Why and how should I reduce the size of my images before uploading them to my website?
NOTE: for information on automatic image optimization in the ePublishing admin tools, please see this Knowledge Base article: Automatic Image Optimization
Any image you add to your site should be prepared specifically for the web. This keeps your site visitors on slower connections from being frustrated by a slowly loading home page or article, and your mobile users from eating up their data plans by just downloading images for your website.
Size your image.
Using your graphics software (like Photoshop or Sketch), make sure your image has been sized to meet the height or width limitations of your website.
If you are not sure what those are, please either look to your site documentation (which may have a section on recommended image sizes), look on your existing website, or talk to an ePublishing project manager.
Optimize your image for the web.
Depending on which graphics software you use, look for an option that allows you to optimize for the web.
- Photoshop calls this: Save for Web.
- Sketch call this Save for Web when exporting.
Our recommendation is to set the quality filter (if provided) to 70% to create a good-looking image, that is a small file size.
Below is an image example of this for Sketch
In the latest versions of Photoshop, you'll find this under Export > Save for Web (Legacy). Typically, clicking Save with no adjustments will work. You can also change the file type in the top right if you'd like to test image quality.
OPTIONAL: Run image through an image optimizer.
This is a pro tip.
You don't have to do it, but it can allow you to have the smallest file size possible, and maintain image quality.
Recommendations for Image Optimizers
There are many options if you choose to use this step.
A good article that reviews several of these options is here:
Specifically mentioned in the article as recommendations:
What do I gain by doing this?
Below is a real-life example of file size and dimensions.
Original Image
- Starting Dimensions: 5,568px wide by 3,712px high
- Starting File size: 12.7MB
- Download time on slower cable modems: over a minute
Recommended Site Width for Image:
- Changed File Dimensions: 777px wide by 568px high
- Updated File size: 1.5MB
Export > Save for Web within Photoshop
- Same File Dimensions: 777px wide by 568px high
- File Type: JPEG chosen
- File type: PNG or JPEG or GIF - test to see which looks best
- Quality: 70
- Updated File size: 105.1KB
- Download time on slower cable modems: around 2 seconds
The time to download the image dropped from over a minute (on a slow connection) down to 2 seconds.
The file size dropped from 12.7MB down to 105.1KB
Imagine the file size noted here for one image occurring for every image on your site. You can see why putting time to make your image file sizes as small as possible while maintaining image quality, your pages load quickly and site visitors won't leave the site because the page is slow to load.