To learn more about our imagery, such as ratio and responsive rules, check out our foundation photography section.
Reducing the size of images benefits the user by allowing their page to feel like the page has rendered quicker and will save data on their mobile networks. A perceptively faster-running page, for us, reduces bounce rates and increases conversion.
A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions
The answer is: The smallest size that does not degrade the image too much that it becomes distracting to the customer.
These numbers are just a guide and shouldn’t be treated as “I have hit the number, so I don’t need to optimise it anymore”. If they can go much lower than these numbers - then they should.
Full width image: < 200kb.
Side image: < 100kb.
Additional image: < 50kb.
Decoration: < 10kb.
(For PNGs add an additional 50kb).
Resize your image to the smallest it can be. If it is a full-width image the highest width should be 1440px.
If an image has some transparency save as a PNG, otherwise save as JPEG. Lossless compression is the first step. We need to remove all the metadata and additional garbage from the image, while not removing the quality of the image. This will reduce the image by 5-20%. With the lossless compressed image, incrementally reduce the quality by 10%. Depending on the initial size, there will probably be a reduction of 70% in file size.
Sometimes with PNG images that have transparency, corners, gradients and shadows the images will degrade really quickly. For these images, it is essential to resize the image optimally. If these parts of the images aren’t required they should be removed to allow the image to reduce properly (such as shadows can be added via CSS).
If you want to get a specific quality percentage, kraken.io web interface has an expert mode that lets you pick.
Double click your image in Finder to open it in Preview. In the menu, Tools > Adjust Size... An overlay will appear. Keep "Scale proportionally" ticked and change your dimension to what is the required size. After that click OK and then save the image.
It is best for each iteration of optimisation to create a new folder of duplicates as ImageOptim will overwrite.
Click the setting button, at the bottom right corner. Go into Optimisation level and set it to insane; in General, tick PNGCrush and in Quality, disable loss minification.
Drag and drop images and wait for them to tick green ✅.
With the duplicated versions of these images, enable lossy minification and go down on the level of quality (as explained in "How to Optimise").
Compare the original lossless version to the lossy, to check there isn't too much degradation.
This is a nice web interface that allows the comparison of the original and the compressed version. It gets almost comparative results to ImageOptim, but they are slightly (5%) larger. It can also resize images.
Kraken gets similar results to ImageOptim and has more advanced controls, but has a limit on file size uploaded which can be an issue at the start if you are given a 10-20mb image.