Image Optimisation Experiment
Jay Alvarez experiments with an Image Optimisation technique for maximum compression, minimum visual fuzz, minimum file size (win win win) outlined in Retina Revolution by Daan Jobsis
This sounds too good to be true - so i'm going to give it a shot. If it works it will mean that we can use this to good effect on our client sites and also recommend that our clients encourage their content editors to use this technique if it's easy to do.
The technique requires 3 steps
- Double the pixel dimension of an image
- Save as jpg with high compression
- Add to webpage at original size
Step 1 - Double the pixel dimension of an image.
I'm going to start with an image that is fairly typical of the kind we see a lot of on our clients web pages. It's a bookshelf. I've taken an image from my camera at 375px wide by 500px height. I've saved to computer at 247kb file size.
I'm using gimp to optimise the images which is an open source image manipulation programme equivalent to Adobe Photoshop
Step 2: Save as jpg with high:7 compression
I'm now going to save the image at a new size double the original so 750px wide by 1000px height and save as a JPG with compression setting of 7. The resulting file size is now 20kb
Step 3. Add to webpage at original size
I'm going to upload this image to the website and insert it into this web page at 50% the size which is 375px using an in-line style.
As a point of comparison for this technique I’m also saving an image the way we regularly do at Aptivate (and which we recommend for our clients) which is a JPG compression with 70 quality. This file is now 37k.
Results & Conclusion
Well... I must be doing something wrong as clearly the top image is far blockier than I thought it would be.
The only immediate conclusion i can come to is that although we may find a clever way to make this work at Aptivate - it's not something that the average content editor will be able to do easily. So I'm still going to suggest that our clients stick to compressing images with Picresize.com at jpg 70 quality.
What could I be doing wrong?
- Using sub-optimal compression engine
- Inserting to page using wrong technique
Things to try now:
I think my colleague Marko had better luck than me. Ask him about it
Read Retina Revolution a bit more carefully and do some more research on technique
Try with other jpg compressors in other image manipulation packages
Try different advanced options in Gimp