Optimising Web Performance: A Guide to Responsive Images with HTML srcset and sizes

In the world of online shopping, how your store looks matters. It affects how much people like using it and how likely they are to buy things. One important part of making your store look great is handling pictures and small versions of them, called thumbnails. 

Shopware 6, a popular online store platform, makes this easy with something called the sw_thumbnails Twig function. This guide will show you how to use it to make sure your pictures look good on all devices in your Shopware 6 store.

Understanding the Usage of “srcset” and “sizes”

The srcset attribute, found in the <img> tag, allows developers to provide the browser with a carefully selected list of image sources and their sizes. This helps the browser make smart decisions on which image source to choose based on the user’s device, considering factors like screen size and resolution.

Working hand-in-hand with srcset, the sizes attribute informs the browser about the amount of space the image should take up on the screen compared to the viewport. When used together, they create a powerful combination for handling images responsively.

Consider the following example:

Here, three image sources (small.jpg, medium.jpg, and large.jpg) with respective widths (in pixels) are specified in srcset. The sizes attribute then outlines the responsive behaviour based on the viewport width.

How Browsers Detect the Right Image

Browsers employ a sophisticated decision-making process, taking into account the information from srcset and sizes, along with the device’s characteristics. Several factors influence the browser’s choice:

Viewport Width (vw): The sizes attribute uses the vw unit, representing a percentage of the viewport width. The browser evaluates conditions specified in sizes to determine the suitable image size.

Image Widths (w): srcset provides image widths, aiding the browser in calculating the device’s pixel density and selecting the most fitting image source.

Device Pixel Ratio (dpr): The device’s pixel ratio is considered, ensuring optimal image rendering on high-density displays.

Media Queries: sizes support media queries, allowing developers to tailor image selection based on specific conditions like screen orientation or resolution.

The Logic and Calculation Behind “srcset” and “sizes”

Understanding the logic involves a blend of responsive design principles and browser decision-making:

• srcset: Choosing the Right Image Source
• Viewport Width (vw) and Image Widths (w):

   – The sizes attribute defines how much space the image should occupy based on the viewport width (vw).

   – srcset provides image widths, aiding the browser in choosing the source that best fits the current viewport.

• Choosing the Right Image:

   – The browser calculates the device’s pixel density and uses image widths to select the most suitable image source.

• sizes: Responsive Image Sizing
• Viewport Conditions:

   – sizes uses media queries to establish conditions based on the viewport width.

   – For example, (max-width: 600px) 100vw, (max-width: 1200px) 50vw, 25vw sets conditions for different viewport ranges.

• Viewport Calculation:

   – The browser checks these conditions against the current viewport width to determine the appropriate size for rendering.

• Combined Decision-Making:

– The browser combines information from srcset and sizes to:

  – Select the image with the closest width to what’s needed.

  – Determine how much space the image should occupy in the layout.

• Device-Specific Considerations:

– Pixel Density (dpr):

– The device’s pixel ratio is taken into account, ensuring high-density displays get appropriately sized images for optimal quality.

• Real-world Example:

– For a device with a 900-pixel-wide viewport:

  – sizes dictates the image should take 50% of the viewport width.

  – srcset provides options: small.jpg (300w), medium.jpg (600w), and large.jpg (1200w).

  – The browser calculates and selects the medium.jpg source (600 pixels wide), meeting the 50% requirement.

Conclusion

In conclusion, HTML’s srcset and sizes attributes empower developers to create responsive images that adapt seamlessly to various devices. By understanding their usage, how browsers detect the right image, and the logic behind their calculations, web developers can optimise image delivery for a superior user experience across diverse platforms. You can also learn more about media and thumbnails in Shopware 6 here.