Img Srcset Attribute Not Picking Smaller Image

▼魔方 西西 提交于 2021-01-28 03:40:26

问题


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.


回答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 🖖



来源:https://stackoverflow.com/questions/54675270/img-srcset-attribute-not-picking-smaller-image

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!