Web Image Optimisation: Responsive & Adaptive
Images are one of the biggest performance bottlenecks — but only if you let them be
THIS ARTICLE IS OUTDATED — for an updated version follow this article at https://www.charistheo.io/blog/2021/03/optimised-images-for-the-web-responsive-and-adaptable/.
In this short piece, I’ll take you through some common image-optimisation techniques you can implement right now. Hopefully, you’ll get huge performance improvements and create a smooth web experience.
But first, let’s get on with some data about why it’s important to optimise your images on the web — and especially for mobile.
The average mobile website is 2.2 MB big, of which 68% are images.
Quoting Mustafa Kurtuldu from his ebook:
“As we have just tested, a very high percentage, around 70% of a site is composed of images.”
In a slow 3G network, big resource size would be a huge bottleneck for page loading time. Trying to download only a few unoptimised images will keep the network busy, preventing other equally important resources from being downloaded.
Also, according to Facebook Blueprint, as many as 40% of users abandon the site at a three-second delay. When you add this on top of the previous point on image size, it’s easy to realise we need to be careful in how we serve images to our users.
It’s also about time we think of image optimisation as an important step to a good user experience on the mobile web and try to be mindful about the size of images we’re serving our users.
Before we begin, bear in mind websites differ from each other — as each website may respond with higher performance increase or even have a reverse effect (!) depending on the performance metrics you’re tracking.
Tip: Make sure to test after every optimisation in order to keep track of what’s working for your website and what’s not.
Compress Your Images
This part may be the most important advice of all, and this is the reason why it’s first on the list. Hopefully, after this optimisation, your website will behave better during performance audits.
