Img Srcset Attribute Not Picking Smaller Image

Question

The <img> element srcset attribute is consistently choosing the larger <img> src, even when the size media query is false.

Using a <picture> element to enforce image selection according to browser width worked well. I understand by this answer that <picture> and <img> srcset attributes work differently, <picture> elements can enforce image selection according to rules while <img> srcset yields choice to the browser's discretion. This can be according to screen pixel densities, network speed, or any other logic the browser employs. I've tried, in response, to force the browser's selection of the smaller image by disabling my Chrome browser's cache, shrinking my browser's width well short of the 800px media query (to about 300px to account for my retina display's 2x pixel density), and even throttling my own connection to that of a slow 3g network. Still, Chrome chose the larger 800px image.

Here's my <img> element so far...

<img 
    src="/image-2.jpeg" 
    srcset="/image-1.jpeg 800w, /image-2.jpeg 600w" 
    sizes="(min-width: 800px) 800px, 600px"
>

Consistently /image-1.jpeg is used as the <img> src attribute.

Answer 1

I can only see three possible reasons as to why the provided code isn't working;

(1). Browser support.
(2). File location or filename mismatch.
(3). Sizes of images specified in the code doesn't match the image size.

---

Use the following code snippet. This is working in Firefox for Desktop on Windows 10.

Confirm if the snippet below works for your browser when you resize the browser window. If it doesn't, then we have the culprit.

If it does work, then please check the following:

--> Filenames (typos)
--> File Extensions (.jpeg, .jpg, .png,...)
--> Image Locations (/image-1.jpeg)
--> Image Sizes (mismatched size) [It shouldn't really matter]

If everything is fine then maybe the browser doesn't have access to the folder containing the images. Check Permissions etc.

<img src="https://picsum.photos/800/400?image=0"
 srcset="https://picsum.photos/800/400?image=0 800w,
         https://picsum.photos/700/350?image=1 700w,
         https://picsum.photos/600/300?image=2 600w,
         https://picsum.photos/500/250?image=3 500w,
         https://picsum.photos/400/200?image=4 400w,
         https://picsum.photos/300/150?image=5 300w,
         https://picsum.photos/200/100?image=6 200w,
         https://picsum.photos/150/75?image=7 150w,
         https://picsum.photos/100/50?image=8 100w"
 sizes="(min-width: 800px) 800px,
        (min-width: 700px) 700px,
        (min-width: 600px) 600px,
        (min-width: 500px) 500px,
        (min-width: 400px) 400px,
        (min-width: 300px) 300px,
        (min-width: 200px) 200px,
        (min-width: 150px) 150px,
        100px">

Run the code Snippet and resize the browser window.

Or, you can find this code in action on CodePen.

I hope this helps.

Peace