Why should I optimise my images for the web?
Knowing how to optimise your images for the web is a crucially important aspect of running and managing your own website. Google will take your website’s performance into consideration when indexing and ranking for search results. Images are often the biggest culprit in poor site performance; if your images are too big then your site is going to take too long to load.
A visitor’s browser has to download all of your images before showing them. If a user is waiting 10, 20, or 30 seconds to view your site, then the chances are that they’ll leave. In this article, we’ll walk you through some steps you can take to reduce image sizes and optimise them for the web.
What format should I use?
General knowledge was that jpegs are the best for the web, that they strike the right balance between quality retention and file size (actually, many people still think this). Well, that’s not quite the case any more. In recent years we have “next gen” formats available to us. Specifically “WebP”.
Let’s compare jpeg to WebP.
This image of our favourite cow started its life as a 4546px x 2872px – 2.71MB JPEG. That’s a pretty huge jpeg by anyone’s standards. If all we do is convert the format to WebP, then the file size drops to 1.26MB. That’s a saving of 1.45MB – which is brilliant considering there is negligible quality loss and we’ve maintained the original resolution.
This is an extreme example and, unless you have some specific requirements, you shouldn’t be using such huge dimensions on the web. You’ll get diminishing returns on conversions with smaller dimensions; but the important thing to remember is that you will make some size savings. “Some improvement” is better than none, and every KB helps when talking about websites and images.
What dimensions should I be using?
Resizing your images before uploading to the web is an absolute must. You should not be using images like the one from our previous example. Currently, the best sweet spot is a maximum width of 1500px (keep the height to whatever maintains the aspect ratio of the image).
Using our cow from the last example, let’s look at how image dimensions affect file size. The same 4546px x 2872px – 2.71MB JPEG resized to 1500px x 948px reduces the file size down to 606KB. That’s another enormous saving – and, generally speaking, 1500px is more than large enough to look great on almost every device. It will look especially crisp on mobile devices.
To further illustrate our point about formats and dimensions, let’s resize and convert that cow to WebP.
Again, we’re starting with the same 4546px x 2872px – 2.71MB JPEG image. By resizing the image to 1500px x 948px and converting it to WebP the files size reduces to 480KB which is a further saving of 126KB. This is no small amount if you think about the larger images you have – those kinds of savings for every image on your site can add up to MegaBytes saved overall.
Here are two images. One is jpeg and one is WebP – we’ll bet you a pair of socks that you can’t tell the difference between them:
EWWW Image Optimizer for WordPress
If you’re a WordPress user and you (understandably) don’t fancy going through the hassle of converting all your images manually, you should take a look at “EWWW Image Optimizer”. This brilliant plugin will scan your whole site and automatically convert all of your images to WebP. If you leave it active, it will also automatically convert all new images to WebP without you having to do anything. All the standard features you’ll need are completely free, to boot!
You can find it here: https://wordpress.org/plugins/ewww-image-optimizer/
We recommend EWWW to anyone who has an image heavy site and it always works wonders on page load times. Also, by using next gen image formats, you’ll earn yourself some brownie points with Google!
About Sox
We’re a small development company based in Truro. We launched Sox Digital because we strongly believe in doing the right thing. We had frequently been disappointed with our experiences elsewhere, so decided to “be the change”, and provide the kind of organised, passionate service we wished we’d experienced.
Graham is an experienced full stack developer who has been in the industry all of his working life. He’s worked on everything from small websites to gigantic cloud apps with billions of data points. Graham does most of Sox Digital’s coding.
Conversely, Heather has been client-facing all of her working life. Previously she has worked in primarily client and account manager roles, then moving into Project Management in the past couple of years. She manages Sox’s projects, communication and administration.
You can learn more about Sox Digital at https://soxdigital.co.uk