Photos on the web are essential elements of storytelling and connecting with our audience. But it’s important to note that:
- Photos are usually the biggest factor in total webpage weight.
- The weightier the page, the slower it is to load, especially on slow internet connections.
- The average smart phone photo is more than 2 MB in file size. Too heavy!
- The average modern DSLR photo is more than 20 MB.
- Each web page photo should be no more than 150 KB to make the page quick to load. So we have to use photo optimization to make this work.
What is Photo Optimization
Photo optimization means compressing the file size of photo using software like Adobe Photoshop. Too much compression reduces the quality of the image. Too little compression results in a larger file size which slows loading of the web page. Optimization is finding the right balance between quality and file size.
Consider these two images:
The file size of second photo is about 10 percent of the first. You can probably see a slight degradation in the image quality, because I’ve primed you to look for it. Otherwise, most people wouldn’t notice the difference.
On the web you want to keep large photos under 100KB if you can, and much less than 100KB for smaller images. Here’s the same photo reduced in dimensions:
The second photo is less than 10 percent of the file size of the first image, and most people won’t notice any difference. If you’ve got a bunch of thumbnail images on a single page, optimization yields a huge reduction in loading time.
How to Optimize Photos in Photoshop
Best practice is to start with an original photo, then resize and compress it for the web. Start by cropping and resizing the photo for the space it will fill on your web page. If the photo will be displayed in a sidebar that’s 300px wide, there’s no reason to upload a photo wider than 300px. Reducing the photo’s dimensions will significantly reduce its file size.
After the photo is cropped and sized, in the File menu go to Export -> Save for Web (Legacy):
Using the dropdown menus at the top, you can select which format to export and a compression quality setting. For photos, always set it to JPEG. For Compression Quality, medium is often the best setting but use your judgement. More compression = less image quality. You want the smallest file size you can get without making the photo look like crap. You can also use the Quality slider for fine-tuning.
If you don’t see a preview of both the Original photo and the JPEG export, click the 2-Up tab at the top. Now you can try different compression settings and see a preview of the results, including the file size:
Once you’re happy with the image quality and file size reduction, click Save to create your web-optimized photo. This will not affect your original image, which you should save somewhere for possible reuse, re-editing, etc.
More Tutorials on Photoshop’s Save for Web
You can of course find lots of great Photoshop tutorials online.
Here’s a 5-minute video from Lynda.com that explains how to use Save for Web in Photoshop.
Here’s another really good tutorial on Photoshop’s Save For Web that walks through the process.
Pro Tip: If you work with photos frequently, keyboard shortcuts can save you time. In Photoshop you can launch Save for Web like this:
- Command + Shift + Option + s (Mac)
- Control + Shift + Alt + s (Windows)
Optimizing Photos without Photoshop
Compressor.io is a free online tool. You can drag and drop a source photo into it, and download a compressed version of the image. Compressor.io doesn’t have any cropping or resizing tools, and you can’t adjust the amount of compression. In my tests, Photoshop does a better job of balancing photo quality and file size. But if you have a photo sized correctly for your website, it’ll do in a pinch.
If you’re comfortable using the command line, there are a number of tools available for optimizing different image types.
Your Photo Workflow
If you’ve produced photos for print, you know it’s important to keep the highest quality photo throughout the process. But with today’s cameras, the highest quality photo is likely to be 5000 pixels wide, and more than 20 Megabytes in file size. Such a photo is great for print, but a problem on the web.
Best practice is to safely store the original photo files in their highest resolution, for the day when you need to resize or reuse them in another context. Use the original photos to crop, size, and export for the web, then keep the originals safe for future use.
Once you compress a photo for the web, it no longer has the quality of the original photo. Compression means throwing away information from the original photo file. Compressing a photo that’s already compressed can look pretty bad.
So it’s good to make it a practice of saving your original photos. You never know when you might need them again.