With images taking up ever more space on our webpages, it is ever more crucial to keep their weight to a minimum, especially on mobile. According to HTTP Archive, the average webpage displays approximately 1 MB of images (median), and the images on a page account for almost half of the total weight of the page.
Once you have inevitably compressed it, how do you serve an image in the right dimensions for different screen sizes? In the wake of our predictions in favour of srcset, we decided to set ourselves a new webperf challenge: resizing images!
A feature to streamline the responsive implementation of images
For want of developing a responsive interface, or else entrusting the heavy task of context adaptation to the CMS, a number of websites serve one and the same image on desktop and mobile. Nevertheless, the size of an image should always depend on the size of the screen that displays it, thus avoiding slowdown and wasted bandwidth while downloading, and wasted CPU resources while rendering the image in the browser. Indeed, why would we inconvenience mobile users with an image at 3,000 pixels, if their screens can only display 1,000?
Solutions based on the srcset property or picture tag have been around for a long time, yet many sites do not apply these techniques because they cannot easily generate the images at the desired scale. Nonetheless, these measures significantly reduce image weight according to screen resolution, pixel density and image formats supported by the browser... and therefore optimise page loading times.
In order to overcome these issues, our latest functionality makes it easier to generate images in a specific size. You can write your HTML tags without having to worry about image processing, which is now performed on the fly.
Let’s see how this optimisation works and how it can benefit you.
Two options: resize or crop
Generating multiple versions of an image and serving the one that corresponds to a given screen size is not always possible, or even configurable, depending on the CMS. It’s also impossible to process manually in large volumes.
To make life easier and reduce the weight of your pages, our image resizing feature allows you to define URL settings that will then be applied to your templates – here is a detailed explanation of the available settings on our Support page.
In short, you have two options to resize your images:
- Change the size itself (height/width ratio)
- Crop the image, either by using the automatic “Smart Cropping” function or by defining a gravity position around which to crop the image.
These are a few variants of the same image according to different display settings:
The ability to resize images in real time is the latest step forward in our comprehensive approach to improving image optimisation.
What’s the next step? Currently in the works, the future iteration of the Fasterize engine will calculate the correct dimensions by itself based on the browsing context – and modify the relevant HTML code automatically!