Marketers use a lot of images on websites. They’re needed to show off products. They’re used for ads and promotions. They form key parts of attractive designs, carefully calculated to turn visitors into customers.
But when images slow web pages down, they have the opposite of the desired effect. They frustrate visitors. They turn people away. They drive potential customers to the competition.
Why images have such a big effect on performance
As a general rule, the bigger a web page, the longer it takes to load. And, for some time now, images have been the main contributor to page weight. According to the HTTP Archive (1 September 2016), images account for nearly two-thirds of the size of the average web page. So if you want to make a web page faster, they’re a good place to start.
This makes it essential for marketers to understand the potential negative impact of oversized images and to have at least an overview of the dos and don’ts of image optimisation.
Some will have a head start. Some will have image optimisation built into their CMS or a CDN service that automatically delivers images in the most appropriate format and at the right quality level.
However, no system is fool proof, and it’s still possible to make mistakes, such as uploading a large animated GIF when a CSS animation would be more efficient.
So what can marketers do to make sure images aren’t holding back their website’s performance unnecessarily?
Minimising the negative impact
The simplest way to reduce the impact of images is to make sure they’re no bigger than they need to be. Here are a few tips to help you do just that:
1 Pick the right format
Basically, this means JPEGs for photos, and PNGs or SVGs (scalable vector graphics) for simpler graphics with fewer colours. SVGs are an increasingly popular and well supported choice for logos and icons. SVGs are useful because they are, as the name suggests, infinitely scalable – regardless of screen resolution or zoom level, the quality will remain razor sharp.
There are other, newer formats too. In particular, WEBP, which can offer much greater levels of compression than JPEG, is starting to gain traction. Support is still limited, but there are CDN services that will automatically substitute JPEGs with WEBP images where they’re supported.
2 Deliver the most appropriate image for the viewport
This is particularly important for visitors on mobile devices. You shouldn’t, for example, deliver a 2,000 pixel wide image to a device with a screen that’s only 360 pixels wide.
There are a few reasons why this matters. One is simply that the user loses time downloading something much bigger than they need. Another is that they lose still more time because of the work their device has to do to rescale the image. Finally, an image that looks good on a big screen just might not work on a small one. It might need to be cropped or replaced altogether.
Some sites try to detect device characteristics to deliver the most appropriate image. Most browsers also now support the responsive images specification, which allows you to deliver different images for different viewports.
Sometimes, the temptation is to show off the highest quality product images possible, without appreciating the trade-off in extra load time. The reality is that images can often be compressed to a fraction of their original file size with little or no perceivable loss in quality.
At this point, it’s worth making the distinction between lossy compression, which applies to JPEGs, and lossless compression, which is used for other formats, such as PNG (although lossy compression of PNGs is now possible). Lossy compression always involves some degradation in quality, but this is often too small for the human eye to notice.
If you’re not lucky enough to have image optimisation built into your CMS, you can use any one of a number of online image optimisation tools, such as JPEG mini or TinyPNG/TinyJPG.
JPEG image at a quality setting of 100: 59KB
Optimised JPEG (using tinyjpg.com): 36KB
4 Remove metadata
Metadata is text about your image, embedded in the file. It can include information such as the device used to take the picture and the date it was taken. Much of this is often redundant: visitors to your website will probably never see it and don’t care about it. It’s therefore possible to reduce an image’s size by stripping out metadata that you don’t need. Sometimes, this is taken care of during the image optimisation process. But if not, you can use a service such as http://www.verexif.com/en/.
However, you do have to be careful. If you’re using someone else’s image, you might find you have to retain certain metadata, such as copyright information.
5 Avoid embedding text in images
This is important for two reasons.
One is simply that images are bigger (in terms of file size) than plain text. Fortunately, the advent of custom fonts means that the days of using images simply to display textual content on a web page are largely behind us. However, you do still see images used as text for buttons and callouts.
The other problem with text in an image is that it limits the extent to which you can compress that image. This is especially true for photos saved as JPEGs. If you embed text in a JPEG, you’ll probably find that you won’t be able to compress it very far before you start seeing a degradation in quality: the solid colour in the text will start to break up before you see any difference in the quality of the image it’s sitting in.
Image optimisation is a big subject. However, it’s also one where a little knowledge can take you a long way, and if you follow the advice above, you shouldn’t go far wrong!
Also in this series: