As I said in my previous post, site speed is typically one of the largest, if not the largest, SEO opportunity I usually uncover with sites that I work with.
Image optimization is typically a big reason why sites run slowly, and individual images are often needlessly large.
This tutorial will show you how to significantly reduce image file size, and thus increase speed across your site.
- Adobe Photoshop (using CS6 for this tutorial)
- Image compression tool such as http://compressjpeg.com/
Step #1: Save the initial image to your local computer
For this tutorial, I’ve downloaded a large example image from an e-commerce site and saved to my local computer.
The image file size was reported by Screaming Frog as being ~757 Kilobytes in size (anything over 100 kilobytes is considered fairly large).
An initial save down to the local computer (at maximum resolution/quality) showed the image file as being ~739 Kilobytes, which we’ll use as our baseline.
Step #2: Use “Save for Web” for all web images (jpg, gif, png, ico, etc.)
Rather than simply using the traditional “Save As” feature, I recommend using “Save for Web.”
Additionally, I recommend selecting the “High” quality setting as well as selecting ”Progressive”” setting for all JPG file saves.
This will significantly reduce file size as the focus is less on ensuring print-friendly imagery, and more on producing web-friendly images.
As you can see below, even at a “High” quality threshold, this method reduces the size of our original 737 Kilobytes image to 319 Kilobytes (57% reduction in file size).
Depending on the necessary detail for the image, using “Medium” quality can further reduce the size to 184 Kilobytes without too drastically impact image quality (75% reduction in file size).
Additional tip: Reducing image dimensions such as height and width can also have a dramatic impact on file size. As a rule, the wider and taller an image is, the larger the size.
If an image doesn’t need to be very large, ensure that the height and width of the image file is aligned well to the actual display resolution on the web (ex: don’t size an image as 1200 pixels wide if the largest web display is only 500 pixels wide).
Step #3: Use a lossless image compression tool
After saving image for web, the final step in the process before uploading imagery to Websphere Commerce will be to utilize a lossless image compression service such as http://compressjpeg.com/ to reduce the file size further by stripping out any unnecessary image meta-data that Photoshop keeps around.
The image will lose no quality in this step and only the file-size should be reduced.
From the previous step, the image compression tool further reduced the file size of our image:
- Image saved for web at “High”” resolution (additional 33% reduction in file size):
- New size = 214 kilobytes
- Image saved for web at “Medium” resolution (additional 4% reduction in file size):
- New size = 176 kilobytes
Final results = 71 to 76% reduction in image file size
After going through to process of appropriately saving the image file and running through an image compression tool, I was able to reduce image file size by over 70%!!!
Image file size after step #1:
- Original image file size: 739 Kilobytes
Image file size after step #2:
- Image file size after “Save for Web (High-Quality resolution):” 319 Kilobytes
- Image file size after “Save for Web (Medium-Quality resolution):” 184 Kilobytes
Image file size after step #3:
- Image file size after compression (High-Quality resolution): 214 Kilobytes
- Image file size after compression (Medium-Quality resolution): 176 Kilobytes
- Net file size changed (High-Quality resolution): 71% reduction
- Net file size change (Medium-Quality resolution): 76% reduction
Now time to try it for yourself!