Why does Chrome pick a larger image when there is a better one in srcset in this example?

248 Views Asked by corgrath At 09 March 2023 at 10:11

I am trying to understand the basics of responsive images.

I have this very simple webpage:

http://chubby-orange-fox.s3-website.eu-north-1.amazonaws.com/test.html

<!DOCTYPE html>
<head>
    <title>Responsive</title>
</head>
<html>
<body>

<img srcset="https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.1&amp;w=2000 200w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.2&amp;w=2000 400w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.4&amp;w=2000 800w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.6&amp;w=2000 1200w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.8&amp;w=2000 1600w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=1&amp;w=2000 2000w" title="test image" alt="test image" aria-label="test image" width="350" height="197" loading="lazy">

</body>
</html>

As you can see, the srcset contains 6 different images and they have the sizes 200w (200px), 400w (400px), 800w (800px), 1200w (1200px), 1600w(1600px) and 2000w(2000px).

However, as you can see, I have explicitly also added width="350px" on the <img> tag, Chrome knows the image will be displayed with a width of 350px.

So if Chrome acknowledge that the image will be rendered with a width of 350px:

Why is it picking the https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.6&w=2000 1200w version that is 1200px large, when there is clearly a 400w (400px) version that is more suited?

Original Q&A

There are 2 best solutions below

Nicolas Hoizey On 09 March 2023 at 17:06

In these responsive times, width="350" height="197" is now more used by the browser to know the image width/height ratio than the actual rendered dimensions in CSS pixels.

With w descriptors in srcset, the browser needs a sizes attribute to know which is the target rendered width. If sizes is missing, the fallback value is 100vh, the full viewport width.

If you really want a fixed rendered image width, you should:

either add sizes with said fixed width in CSS pixels
or use x descriptors instead of w descriptors in srcset

dimanhog On 19 April 2023 at 22:01

I have also been struggling with this problem where I got the biggest image. I ended up converting the image to 16:9 ratio, the same as the display ratio. This resulted in showing a smaller srcset version than the old ratio (500∶243).

I also had a issue with the image being quite pixelated, probably because it was a big image compressed into a small element. This issue went away after changing the ratio and getting a smaller resolution. Later I found an explanation here: object-fit : cover gives pixelated images on chrome

Why does Chrome pick a larger image when there is a better one in srcset in this example?

There are 2 best solutions below

Related Questions in HTML

Related Questions in RESPONSIVE-DESIGN

Related Questions in RESPONSIVE-IMAGES

Related Questions in SRCSET

Trending Questions

Popular # Hahtags

Popular Questions