We all know the few basic rules we need to follow to ensure a nice, speedy and accessible website: efficient design, architecture and coding, good content, well compressed images and good hosting. Today I’m going to concentrate on image compression, hopefully giving some simple but helpful advice.
Efficient image size was something that was very important 10 to 15 years ago but has received less attention since internet speeds have stabilised at what is considered as – in the developed world, at least – ‘generally quite fast’.
The first thing to note: if your target audience includes users in the developing world, where internet connection speeds can still be slow, a fast loading website is crucial, and it’s those large, badly-optimized images more than anything else that will slow down your site. The same applies to about 5% of UK residents who still suffer with internet speeds slower than 2mbps, in our rural broadband ‘not-spots’. Note also that search engines like Google will look favourably on a well optimised site, ranking it higher than a similar site with un-optimised images.
Why image optimisation matters
It’s true that most web designers and developers know the importance of well-chosen and correctly optimised images, but it still amuses me when I see a page load being held up by a thumbnail image loading in three or four stages.
On closer inspection, it’s no surprise to find out that that thumbnail image is in fact a 12MP photo. The image has been transferred straight from a compact camera or smartphone and uploaded directly to a website to be used as the thumbnail image for a news story.
The original image will be about 5MB in file size with dimensions of about 3000pixels by 4000pixels. In practice, the image should be downsized to about 1000pixels wide and uploaded to the site. This in turn will create another smaller version for use as the thumbnail, thus creating a very small 30kb file rather than one 1666 times larger!
The original 5MB photo will take about three seconds (an eternity!) to load, whereas a correctly made thumbnail image will load in a fraction of a second. Imagine a whole page full of 5MB images loading as thumbnails on the Our News page. 
So, let’s go over the basic web image formats and see how they should be saved out. There are generally three types of image or graphic used on websites.
Logos and icons
If you can, for logos and icons, use true SVGs made from vector shapes. SVGs will scale correctly for all devices. Otherwise, use transparent 8-bit PNGs. Failing that, use GIF. Never save out single colour files as a compressed JPG, it makes them look like they’ve been bashed with a rubber mallet.
Photos
Use JPG for photos. If you’re using a program like Photoshop, it’s easy to forget to change the output type after saving out a load of PNG files, for example, so check you’re saving out as JPG and reduce the quality down to 50% (or even 40% for full width background images). The reduction in quality won’t be noticed by the user.
Diagrams and infographics
Like logos and icons, solid colour graphics should be saved out as 8bit PNGs or good old GIFs. If you have an infographic with a lot of detail that would require to shown full screen, put a file that looks suitable on the page and add a ‘zoom’ icon to have the full-size file open in a popup. There’s nothing wrong with a pop-up that the user has clicked to open.
In conclusion
Careful image compression matters and it will ensure that your pages load nice and quickly, giving a good user experience.
If you knew that, full marks to you. Perhaps you can send this on to someone you know who doesn’t. And if you’re wondering how to cope with high res displays, give us a call and we’ll tell you all about that too!