Alex Painter - 20 June 2019
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 impact 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 March 2019), images account for roughly half 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 optimization.
Some will have a head start. Some will have image optimization built into their CMS or a content delivery network (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?
Minimizing the effect on performance
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
Generally, this means JPEGs for photos, and PNGs or SVGs (scalable vector graphics) for simpler graphics with fewer colors. 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 gaining traction. Support is still not universal, but there are ways to switch in the appropriate image format depending on the browser, and some CDN services will do it for you automatically.
2 Deliver the most appropriate image for the viewport
This is important for visitors on mobile devices, with small screen sizes and limited connectivity.
There are a few reasons why this really 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. Virtually all 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 optimization built into your CMS, you can use any one of a number of online image optimization tools, such as JPEG mini or TinyPNG/TinyJPG.
JPEG image at a quality setting of 100: 151KB
Optimized JPEG (using tinyjpg.com): 86KB
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 optimization 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 color in the text will start to break up before you see any difference in the quality of the image it’s sitting in.
Image optimization 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!
But if you want to know more, you can download our free guide to image optimization.
Also in this series: