In the last two weeks I have had three separate projects that required some fairly intensive image manipulation. These ranged from simply reducing image sizes out of a camera before uploading, to finding the optimum dimension, file size, and quality of images before uploading to a website. Each case was different but the common denominator of image quality vs. file size got me thinking how clients would do this; so I did some research into the options available: these are the results.
Why is image optimisation important?
There are a variety of reasons – and they all count. Unnecessarily large images take longer for a browser to render, they take longer for the host to serve up the file, they use up bandwidth, they take up disk space and in most cases smaller is just as good when it comes to quality. Of course there will be exceptions if you are a high end photographer but even then you need to think carefully before you dump hundreds of megabytes of imagery on your server.
What is image optimisation?
There are two ways of looking at image optimisation – (a) physical attributes and (b) search engine optimisation.
Although we are talking ‘digital’ an image still has dimensions and weight. We measure the dimensions in pixels (PX) and the weight in kilobyes (Kb or Mb) of disk space and sometimes in terms of download time. Therefore one part of the image optimisation process is to look at reducing the physical dimensions of an image and the file size while retaining the best possible image quality – or as best as is needed.
The second part of the process is a combination of common sense and good practice. The aim being to not break something in your website’s html or JavaScript and to provide the best possible ‘data’ to both humans and search engines. And it is not a difficult thing to do to get the best out of an image – ensure it has a file name that is relevant and meaningful, ensure that it has a proper title and lastly proper ALT text. All this is aimed at helping search engine spiders and image bots to register the image and provide better and relevant information to humans….your visitors.
Physical Image Optimisation
I have just finished two days of testing nine different, free or open source, desktop image compression programs and compared the output from nine separate photographs. I used a range of digital images because compression algorithms will handle some parts of an image quite differently to others. If you imagine a beach photograph with lots of blue sky and sandy beaches it is quite likely that the blue sky will be continuous and therefore easier to compress without loss of quality.
The test images
These are thumbnail representations of the test images. They were taken using a variety of digital cameras e.g.:- Canon PowerShot A640, NIKON D40 and a Canon EOS-1Ds Mark II and none of the images have been processed in any way prior to the tests.
The programs tested
The nine programs tested were:-
- Caesium – download from here
- Faststone Photo Resizer – download from here
- FILEminimizer – download from here
- Fotosizer – download from here
- Freesizer – download from here
- JPEGmini – download from here
- RIOT- download from here
- Shrink-O-Matic – download from here and
- XnConvert – download from here
How the tests were performed
After installing each program each application was opened and the settings or options were configured to as close as possible to each other. Typically I set – output format to the same as the input (.jpg), – same dimensions, – removal of EXIF metadata, – 75-80% quality and – when possible reduced the dpi to 96. – each image was added at the same time to test batch processing and – each compressed (processed) image was set to be saved in its own folder.
Comparison Chart
I am only showing six of the nine image results (due to the width of my data file) and I have re-ordered the data to show the most efficient program first.
| Image | 1 | 2 | 3 | 7 | 8 | 9 | Totals |
| DPI | 180 | 180 | 300 | 180 | 180 | 300 | |
| Dimensions | 3648×2736 | 3648×2736 | 1812×2740 | 3648×2736 | 2736×3648 | 2496×3744 | |
| Kb | 2174 | 1976 | 3133 | 5511 | 6276 | 4661 | 23731 |
| FILEminimizer | 490 | 305 | 489 | 1066 | 1180 | 429 | 3959 |
| 77.46% | 84.56% | 84.39% | 80.66% | 81.20% | 90.80% | 83.32% | |
| Fotosizer | 694 | 535 | 563 | 1349 | 1525 | 631 | 5297 |
| 68.08% | 72.93% | 82.03% | 75.52% | 75.70% | 86.46% | 77.68% | |
| XnConvert | 796 | 615 | 618 | 1464 | 1666 | 677 | 5836 |
| 63.39% | 68.88% | 80.27% | 73.43% | 73.45% | 85.48% | 75.41% | |
| RIOT | 801 | 622 | 621 | 1469 | 1672 | 681 | 5866 |
| 63.16% | 68.52% | 80.18% | 73.34% | 73.36% | 85.39% | 75.28% | |
| Caesium | 992 | 836 | 728 | 1759 | 2000 | 835 | 7150 |
| 54.37% | 57.69% | 76.76% | 68.08% | 68.13% | 82.09% | 69.87% | |
| Freesizer | 992 | 836 | 728 | 1759 | 2000 | 835 | 7150 |
| 54.37% | 57.69% | 76.76% | 68.08% | 68.13% | 82.09% | 69.87% | |
| Shrink-O-Matic | 1305 | 1169 | 888 | 2162 | 2488 | 1012 | 9024 |
| 39.97% | 40.84% | 71.66% | 60.77% | 60.36% | 78.29% | 61.97% | |
| JPEGmini | 1231 | 827 | 704 | 2662 | 1952 | 1613 | 8989 |
| 43.38% | 58.15% | 77.53% | 51.70% | 68.90% | 65.39% | 62.12% |
Example Images
Part of the reason for this article is because I was producing a very clever plugin or extension to the web development software I use regularly (when not in WordPress). The code, written and provided by Pascal Gauitier, takes a large image and automatically and proportionally resizes the image and then offers a variety of ways to zoom into the image – all using ONE image. The extension is called Liquid Zoom. The extension demo can be seen at my extensions demo website – Liquid Zoom And a further explanatory page that breaks down how to reduce an image from 3.2Mb to 208Kb and still retain a high quality image can be found from here.
Conclusions
If you have taken the time to look at the links from the section above (Example Images) you will see that I have used FILEminimizer to good effect. And in some respects you could use just that program to transform your images. However I also used a couple of other programs worthy of note, as is the final process sequence that gave me the highest quality image for the least amount of disk space. I am very impressed with FILEminimizer for its ease of use, batch processing and amazing compression. However I am equally impressed with XnConvert. Although its final compression ratio was not as good as FILEminimizer the program is absolutely loaded with features…and I mean LOADED. It is really worth installing and experimenting with and for any website owner that maintains a number of images, the combination of XnConvert and FILEminimizer will not only reduce disk space, bandwidth and download times but it will surely reduce your workload. Both are HIGHLY RECOMMENDED! A good ‘runner up’ would be Fotoresizer if you are unlikely to take advantage of the action packed features of XnConvert. So it seems that my much loved Faststone Image Resizer and Prish Image Resizer are very likely to go by the wayside!
Search Engine Image Optimisation
Most clients don’t see any difference between image ALT text and TITLE text, mostly keeping them the same.
Alt text
is meant to be an alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images….such as Google! Alt text therefore should describe what the image is about and get those visitors interested to see it. So ALT text is vital to Google and other search engines.
Title text
should provide additional information and should be relevant, short, catchy and concise. A title offers advisory information about the element for which it is set.
Both tags are primarily meant for visitors (though ALT text seems more important for crawlers) – so provide explicit information on an image to encourage them to view it or get them interested. Include your main keywords in both of them but keep them different. Keyword stuffing in Alt text and Title is still keyword stuffing, so keep them relevant and meaningful.
File name
should also be meaningful. Simply uploading an image from a camera with a file name of DSC00021.jpg will do nothing for you. However if you renamed the image to a meaningful name, without using invalid or illegal characters – including spaces, set the ALT text and TITLE text you will find that search engines will take notice and you page or post will gather even more hits simply because of proper image optimisation.
Don’t use a single word or multiple words together to name your image files. Use dashes ( – ) not underscores ( _ ) or pluses ( + ) to separate the words in the filename as Google sees dashes as word separators, and underscores as joiners so to Google
Large-Red-Bucket = Large Red Bucket
Large_Red_Bucket= LargeRedBucket
‘Real Life’ example
Your website sells buckets. You are a bucket maestro, you are the place to come to for buckets. But what happens if you don’t apply basic image optimisation techniques to your website? Easy, you get less traffic which equates to less sales.
Imagine you have a product, item number B0001-4367-BRB. It’s a bucket, its red and you just took a photo of it for the web site. The file name probably looks like DSC0267.jpg. So, you may get clever and decide to rename it to bucket.jpg, which admittedly would be an improvement…but then again do a Google search for “bucket” and see what you get!
More to the point what if there is a customer out there that wants a BIG RED BUCKET.
Make it easy for them, name the image Big-Red-Bucket.jpg.
When you add the image to your website ensure you add the ALT text so it describes what you see but what a search engine can’t see…describe it, for example “40cm diameter red plastic bucket with metal handle. Holds 3 gallons.”
And set the title text to something like “Big Red Bucket“.
You now have many more chances of selling b0001-4367-BRB than before!
