Srcset vs. Picture

The picture element allows you to define multiple source elements within it, each specifying a different media query or image format. The browser selects the first matching source element based on the defined conditions (e.g., screen width or format support) and loads the corresponding image. 

Advantages of the Picture Element: 

1. More control over image formats: Allows specifying different image formats (e.g., WebP, JPEG) for different browsers. 

2. Adapts to media queries: Enables targeted image swapping based on media queries. 

3. Conditional image loading: The picture element allows dynamic image selection based on different conditions. 

Disadvantages of the Picture Element: 

1. More complex syntax: The code is more extensive and complex compared to using srcset alone. This makes it easier to include errors or forget elements. 

2. Restricted to the picture element: Can only be used within a picture element, which means that you have to change your existing HTML structure if you have only been using an <img> tag up to now. 
  


When to Use the Picture Element: 

• When different image formats need to be provided based on browser support. 

• When precise control over image display based on media queries is required. 

• When different image content should be displayed depending on screen size or device orientation. 

The ‘srcset’ attribute is used directly within an img-tag. It allows specifying multiple image versions for different screen resolutions or widths. The browser selects the most appropriate image based on the device’s pixel density and the defined image sizes. 

Advantages of srcset: 

1. Simpler syntax: Adding a ‘srcset’ attribute to an img-tag is straightforward and easy to read. 

2. Automatic selection based on resolution: The browser chooses the correct image based on pixel density. 

3. Backward compatibility: Older browsers will still display the image using the ‘src’ attribute. 

Disadvantages of srcset: 

1. Less flexibility with conditions: ‘srcset’ does not support media queries like the picture element. 

2. Limited format selection: Unlike the picture element, ‘srcset’ does not allow different image formats. 

When to Use srcset: 

• When only resolution-based adjustments are needed. 

• When the image content remains unchanged, but different sizes of the same image should be served. 

• When a simple and quick way to enhance responsive design is required. 

Both methods can enhance image performance when used correctly. The question is not whether to use them, but which one to use in specific scenarios. 

With ‘srcset’, the browser automatically selects the most suitable image size based on the device’s properties (pixel density or viewport width), leading to optimal file size delivery. The picture element, on the other hand, provides more control over image loading. However, if conditions are too broad, a larger-than-necessary image may be loaded, potentially impacting performance. 

Thus, ‘srcset’ may offer a slight performance advantage when it comes to resolution switching, whereas the picture element provides more flexibility for complex scenarios but requires careful implementation. The performance difference is negligible when images are properly optimized. 

Let’s look at two scenarios:

The image appears the same on all devices, regardless of screen size. The goal is to avoid performance drawbacks. 

The image varies based on the device to tailor the user experience for mobile and desktop users. On mobile, the message should be short and eye-catching, while on desktop, more space allows for a more detailed product presentation. 

Since the image should remain the same across all breakpoints in Scenario 1, the ‘srcset’ attribute is the best choice. It allows serving different image resolutions based on the device’s pixel density, ensuring high-resolution screens (e.g., Retina displays) receive a higher-quality image, while standard displays load a smaller, optimized version. For users, the quality difference is unnoticeable, but the performance benefits are significant. 

Example Implementation: 

<img  

    src="image-800.jpg"  

    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"  

    sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"  

    alt="Responsive Image"> 

If the website initially loads at a viewport width of 500px, ‘image-800.jpg ‘will be displayed. If the user resizes the screen to 1000px, ‘image-1200.jpg’ is loaded. If the user then resizes the screen back to a smaller width, the image does not change because ‘image-1200.jpg’ has already been loaded as the best option. 

This behavior is designed to optimize performance and avoid unnecessary image loading. Once a larger image has been loaded, there is no reason to load a smaller one, as this would increase load times and network traffic without improving image quality. When switching to a higher resolution or a better-quality screen, the browser ensures the best available image is displayed by loading a more suitable one from the ‘srcset’. 

If different images are needed for mobile and desktop, as in Scenario 2, the picture element is the better choice. This method allows specifying different images for different screen widths. 

The picture element provides more control over which image is displayed at various breakpoints, allowing the adjustment of image content for different devices and enabling conditional image loading based on media queries. 

Example Implementation: 

<picture> 

    <source srcset="uploads/mobil-bild.jpg" media="(max-width: 799px)"> 

    <source srcset="uploads/desktop-bild.jpg" media="(min-width: 800px)"> 

    <img src="uploads/standard-bild.jpg" alt="Kundenkommunikationsbild"> 

</picture> 

In this example, devices with a width of less than 800px will see a dedicated mobile image. If the user resizes the viewport to more than 800px, it switches to the desktop image. If the user resizes back below 800px, the mobile image is shown again. 

With the picture element, the image displayed is always the one defined for the given condition. This ensures a more targeted form of communication. 

Both the ‘picture’ element and ‘srcset’ are excellent approaches for image optimization. The picture element is ideal when precise control over image display and communication is needed. The ‘srcset’ attribute, on the other hand, is better suited for optimizing performance without altering image content. 

Our experts at diva-e Conclusion will be happy to help you sustainably optimize your website for different devices and screen sizes.