If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email email@example.com to ask for assistance.
Large, high definition images can have huge file sizes. When you using these photos without optimizing them for the web, you increase the time it takes to load the page and, if the person is using a data plan on their mobile device, use up a large portion of their data. Both of these can have huge negative consequences for people visiting your site.
As a general rule, most consumers wait about 3 seconds for a website to load on a desktop or laptop and about 5 seconds on their mobile device. Don't forget that not everyone has the benefit of high-speed internet service, especially in areas outside of major cities in the United States or in foreign countries.
To help keep your webpages loading quickly and using as little data as possible, it's best to keep your image file size to less than 100 KB and your total webpage size below 3 MB. This can be difficult sometimes, especially for larger images, but here are a few steps to help reduce your file sizes.
Open your image in Adobe Photoshop
From the top menu, go to Image > Image Size
Check to ensure that the resolution is set to 72 Pixels/Inch.
Ensure that width is set to the correct size for the image location:
- When using images in the hero envelope template or feature images on article pages, images should be sized at 1440 px wide.
- On full-width pages with no left hand navigation, images should be sized at 1200 px wide.
- When using images in the feature envelope template, images should be sized at 980 px wide.
- On pages with left hand navigation, images should be sized at 780 px wide or less.
NOTE: Keep in mind that these represent images that are the full width of the page and if your image is a portrait or other tall aspect ratio, your image will take up all of the visible page content and may affect how far down the page your users will read.
Open your image in Adobe Photoshop
From the top menu, go to Image > Mode and ensure that the Image Mode is set to RGB Color.
From the top toolbar, go to File > Export > Save for Web (Legacy).
From the drop down for Present, select either JPEG Medium or PNG-24 and click Save.
- JPGs or JPEGs are the most popular file type for images on the web. JPGs are perfect for photographs or complex images containing lots of colors, shadows, gradients, or complex patterns.
- PNGs are a good choice for line drawings, text graphics, and iconic graphics. PNGs can also handle transparency.
- Remove any characters that aren’t letters or numbers, with exception to hyphens or underscores.
- Some ad blockers can hide or prevent images with "ad" words in the file name or Alt Text. To prevent an ad blocker from blocking an image, please avoid using "ad" words in your image names or image Alt Text such as:
Some users do not have Photoshop on their computer to edit their images. We recommend using the free, web-based Adobe Spark program. You will need to have, or create, an Adobe account in order to use the Adobe Spark program, but the Adobe account is free and not tied to any subscription based software you may already use.
Once logged in, use the following steps to create or edit an image with Adobe Spark:
Click the + icon in the top center of the page and select the "Graphic" option.
Click "Start from Scratch"
Choose one of the template options or click "Custom"
Upload your photo
When the image loads, click on the Adobe Spark logo, generally found in the bottom right. Click the logo, then the "Remove" button, and then choose the "Remove once" option
(you may have to close a pop-up Adobe ad window after removing the logo)
If there is text over the image and you want to remove it, click on the text and then click the trash can icon that is above the text to remove the entire text box.
If you need to adjust the crop of your image, click on the image and drag it around until you are satisfied with how your image looks. If you need to "zoom" in or out, use the scale button on the right under the "Layout" menu on the right side of the editor window.
If there is a background color, click somewhere on the background and the right side editor area will change to give you color options to choose from:
When you are ready to export your image into a file you can use outside of Adobe Spark, click the "Download" button at the top right and choose where you want to save the image, making sure you rename it to something relevant to the image so that you know what the image is when it is on your computer or website.
- Adobe Spark will automatically save your project as you are working on it so you don't need to do anything for your project to be saved.
- If you are working on your project and you don't see the menu you are looking for, try clicking off the image or onto the image. Most of your editing will be done on the primary sidebar, where you can change the different image settings or add items to your project.
- If an image size is one you will commonly use, name your project with what that size is (such as 300 x 200) and just use that project as a template and replace the image, or you can clone that project instead of creating a whole new project for each image.
Important Note: Adobe Spark may not export your images at the highest resolution so if precise image quality is critical, we recommend using Adobe Photoshop or Illustrator.