How to use srcset and sizes for Image Optimization?

by

    Image Optimization greatly helps improve a website’s performance. Since image resources are heavy website assets, optimizing them will increase a page’s speed, thereby giving a better user experience, and also make the website rank higher in organic search results.

    Two major aspects of image optimization are the use of srcset and sizes attributes with the image tag. Using these helps:

    • serve better images to the user, and
    • enhance website loading time

    Using these attributes, we can serve multiple sizes for the same image resulting in responsive images and correct sizes as per the device width. We need to pass the various images and their viewport or screen width sizes. The browser handles the rest itself! It will serve the correct images as per the browser width or viewport mentioned.

    Providing multiple sizes for the same image helps improve website loading time, as there is no need to serve a large hero image for small screens or mobile devices. An image with smaller dimensions, having the same aspect ratio can be served for a mobile device, thereby greatly loading loading time.

    Let us now go through some example on how to implement the two HTML attributes.

    Image Optimization HTML attributes

    srcset

    We use the srcset to specify image sources and sizes. The image sources can be separated by commas, and the size in pixels can be added to each image source.

    <img alt="Image Text" src="medium.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes=“(min-width: 960px) 720px, 100vw">

    Here, the src attribute is passed as a fallback for the browsers that won’t recognize the srcset attribute. srcset takes in images in different sizes. The example above has three sizes, alongside the image name, we specify the width in pixels. For example, small.jpg 400w, means the image is 400px wide.

    sizes

    The sizes attribute will take a set of media conditions that help the browser decide which image to choose when the conditions specified are met.

    sizes="(min-width: 820px) 800px, (min-width: 560px) 540px, 100vw"

    The sizes are separated by commas, and hold the following:

    • a media condition, that has a set of media features and values to define the condition. For example (max-width: 420px). The condition is wrapped in parenthesis like a CSS media query.
    • size followed by a space, which is the image size when the given media condition is met.

    Note: The media condition (min-width: 820px) means that the viewport’s width is greater than or equal to 820px.

    The browser will determine which image to use in the following way.

    1. Determine the device’s screen size.
    2. Check the sizes attribute and look for the first condition that matches the device’s screen size.
    3. Use the size defined in the condition to find the image source with the same size in the srcset attribute, if there isn’t one, it will use the first image that is larger than the size defined in the condition.
    4. Load the correct image and display it.

    Browser Support

    Browser support for srcset and sizes is good, However, some browsers won’t support these attributes. Globally, 83% of the browsers support srcset and sizes. The attributes are not supported by Internet Explorer, Opera Mini, and even older versions of Android. Moreover, adding a fallback is the best way to use the latest technology features like these. Always pass the src attribute, so if srcset and sizes are not supported, the browser will use the src attribute.