Resizing image web performance

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 in 2019 displays approximately 1 MB of images (median), and the images on a page account for 900 KB out of 1,700 KB (53%). 

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 for 2019: 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.

For example:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
src="elva-fairy-800w.jpg" alt="Elva in her fairy costume">

Or:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris holding up his daughter Elva">
</picture>

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:

resizing-image-webperf

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! 

Would you like to follow our developments
and stay up to date with our latest features to boost your loading times?


Keep an eye on our blog

 


Hello SMX Paris !