How we improved user experience by serving responsive images

In our current digital world, the web can be accessed by a variety of devices with varying screen sizes and resolutions, therefore it’s essential to deliver an optimal experience to each visitor and device. One of the key elements in achieving this is responsive web design, and a critical aspect of responsive design is serving responsive images.
At Villa Plus we use images on all our main pages. On average on the Villa Plus website, images take up 50% of the average web page size, which means serving responsive images is critical for a better visitor experience.

The Old Approach

With the old approach we were using a single image for all devices. This image would be of fixed size and resolution, but this “one-size-fits-all” approach has several drawbacks:

• Slow Loading Times: Large images designed for high-resolution screens would be loaded on mobile devices with limited bandwidth thereby increasing the website loading time.
• Poor User Experience: Serving smaller resolution images on devices with a high pixel density.
• Wasted Bandwidth: Unnecessarily loading larger images wastes the bandwidth for visitors and also incurs unnecessary costs for our business.

The New Approach

Instead of the old “one-size-fits-all” the new approach will serve the images, which are customized for the visitor’s device resolution and pixel density. The important thing here is that we don’t need any JavaScript or CSS for serving responsive images, HTML comes with all of them by default.

<img> or <picture>

Commonly we use <img> tag for serving images however, there is an image-specific tag, which is the <picture> tag. Even though both the 'img' and 'picture' tag can be used for serving responsive images, we choose the <picture> tag over <img> tag because of its simplicity and readability.

The power of media and srcset attributes

Oh! The <img> and <picture> tags were already there since we started writing HTML, so what is the catch here?
The main players here are these two attributes media and srcset which can be used with <picture> tag, specifically <source> tag.

These attributes extend the functionality of <picture> by offering additional information to browsers, such as different image sources, different display sizes and media conditions. This helps browsers to only load one specific image when a rule is met.

<picture>
    <source media="(min-width: 430px)" srcset="/responsive-image-sm.jpeg">
    <source media="(min-width: 431px and max-width: 992px)" srcset="/responsive-image-md.jpeg">
    <source media="(min-width: 993px)" srcset="/responsive-image-lg.jpeg">
    <img src="/reponsive-images.jpeg" loading="lazy" alt="Villa Image">
</picture>

The media attribute give us the superpower to use media queries and srcset is used for adding different sized images according to the media rule.

But why an <img> tag inside <picture> tag?
Actually, picture tag is only helping us to select the specified image by using the media rules and srcset, the actual image rendering is done by the good old <img> tag, ie, more specifically we can use all the features <img> tag offers (lazy loading feature to be specific). And also if any of the rules failed to load the image or the browser doesn't support media or srcset, <img> will act as a fallback.

Pixel density!

Did we miss something? Actually yes! Pixel density , in simple words dots per inch (DPI) or pixels per inch (PPI). As different devices have varying pixel densities, serving images optimized for specific pixel densities ensures that images appear on the screen has good quality and clarity.

So how do we load images according to different pixel density?
Oh, we don’t need any extra work for that srcset can do that simply by adding pixel density descriptors such as 1x, 2x and 3x

<picture>
    <source media="(min-width: 430px)" srcset="/responsive-image-sm.jpeg 1x, /responsive-image-md.jpeg 2x, /responsive-image-lg.jpeg 3x"/>
    <source media="(min-width: 431px and max-width: 992px)" srcset="/responsive-image-md.jpeg 1x, /responsive-image-lg.jpeg 2x, /responsive-image-lg.jpeg 3x"/>
    <source media="(min-width: 993px)"  srcset="/responsive-image-sm.jpeg 1x, /responsive-image-md.jpeg 2x, /responsive-image-lg.jpeg 3x"/>
    <img src="/responsive-image-lg.jpeg" loading="lazy" alt="Villa Image">     
</picture>

Summary

In today’s digital world, it’s really important for web developers to use these responsive image methods. These approaches make websites load faster and load best quality image as per the devices. There’s no need to download a large 725 x 482 pixel image for smaller devices. It is a waste of resource and bandwidth. By incorporating this approach in different places of our website:

• home page now serve 4 types of banner images according to device resolution and pixel density, which helped us to reduce the First Contentful Paint (FCP).
• mobile home page saved around 500+ KB of data transfer by serving different sized image for the villa card.