UPDATE 07.07.2015: We no longer recommend using the Compressive Images technique. Any wins with file size are outweighed by the extra processing power required by browsers when scalling double-size images. This is particularly an issue on lower powered mobile devices. Instead we simply recommend generating images that are context and device size appropriate. We use the
picture element and
srcset to serve up different size images based on media queries.
There’s a lot we as developers can do with images that are part of our frontend workflow or directly referenced in our code and templates (automatically resizing, cropping etc.), but one of the biggest challenges we face, and have little control over, are images uploaded by site editors and other users.
Below is a summary of techniques we share with our clients on good image optimisation practice.
Compressive Images Technique
We recommend a technique called Compressive Images. This allows us to cater for Hi-Def/Retina devices, whilst still serving as small file sizes as possible.
The principal behind it is that you make your master image double (or more) the visible size, and then highly compress it. This results in an image that looks sharp on all devices, but often has a smaller file size than an image the same size as the visible size. For more details have a read of this article by Filament Group.
By way of illustration, consider these two pictures of a cute kitten.
Image 1 (standard method)
- Pixel dimensions: 960px x 540px
- JPEG quality: 80%
- File size: 165KB
Image 2 (Compressive Images technique)
- Pixel dimensions: 1920px x 1080px
- JPEG quality: 10%
- File size: 87KB
When both images are viewed at the same size, in this case, 620px wide there is little discernible difference in quality, and yet the second, much larger image is almost half the file size of the smaller image.
Save For Web
We recommended using software such as Adobe Photoshop, which does a good job of optimising images for the web.
- In Photoshop go to File > Save For Web
- Select the Optimized preview tab and zoom level (bottom left of window)
- In Preset select JPEG Low
- Raise the Quality to set the desired level, keeping an eye on the output file size in the bottom left of the window (the lower the quality the smaller the file size)
- Also, make sure Convert to sRGB is unchecked and Metadata is set to None
REMEMBER, when using the Compressive Images technique the pixel dimensions will be double the size they will be viewed at on the site, so the image can be compressed a lot (hence starting from the JPEG Low setting).
Once you have saved the image in Photoshop we also recommend using software such as ImageOptim (free Mac OS X app) or Kraken (free online tool) to compress the file further. These tools work by tweaking the compression parameters of the image and removing any unnecessary embedded comments, colour profiles and metadata.
For a more comprehensive list of tools, including workflow automation and server side, Addy Osmani has written a good roundup.
A Note On (File) Size
I can’t illustrate what a ‘large’ file size looks like, so here’s a fat cat instead.
It is hugely important that image file sizes are as small as possible in order to help speed up page load times. Particularly where conversions are concerned, research has shown that you can achieve:
- +3% conversions for every second reduced from 15 seconds to 7 seconds
- +2% conversions for every second reduced from seconds 7 to 5
- +1% conversions for every second reduced from seconds 4 to 2