[英]Img with srcset and sizes not loading the image I expect
I'm trying to optimize a page which consists of a grid of images with breakpoints that makes it use 1, 2, 3 or 4 columns. 我正在尝试优化一个页面,该页面由带有断点的图像网格组成,使其使用1、2、3或4列。
The html looks like this: html看起来像这样:
<img srcset=" image-300x200.jpg 300w, image-original.jpg 600w" sizes=" (min-width: 1px) calc( 100vw * (0.94 * 1.000) * 1.00 ), (min-width: 480px) calc( 100vw * (0.94 * 0.905) * 0.50 ), (min-width: 768px) calc( 100vw * (0.94 * 0.850) * 0.33 ), (min-width: 981px) calc( 100vw * (0.94 * 0.835) * 0.25 ), 280px" alt="E-Books customer service for Dutch Libraries" width="400" height="284">
The calc() functions may look a bit complicated but I've tested them with various viewport widths and then verified the size of the image in the browser and the math checks out. calc()函数可能看起来有些复杂,但是我已经用各种视口宽度对其进行了测试,然后在浏览器中验证了图像的大小,并进行了数学检验。
For completeness, here's what it does: 为了完整起见,这是它的作用:
[viewport width] - [94% container width] - [column gutters] / [nr of columns]
But whatever I try, Chrome (almost, yay for consistency) always selects the big image even when the size of the img on screen is well below 300px. 但是,无论我尝试什么,即使屏幕上img的大小远低于300px,Chrome(几乎是一致的)总是选择大图像。 I checked this in the developer tools > inspector > properties > img > currentsrc as pointed out in this answer 我在开发人员工具>检查器>属性> img> currentsrc中检查了此答案中指出的内容
Can anyone help me? 谁能帮我?
I think I figured it out. 我想我知道了。 it seems that the media queries don't work as I expected. 似乎媒体查询没有达到我的预期。
For example, with these rules: 例如,使用以下规则:
sizes=" (min-width: 1px) ... (min-width: 480px) ... (min-width: 768px) ... "
one would assume that 人们会认为
This is not how it works, at least not in practice. 这不是它的工作原理,至少在实践中没有。 I think that the browser just looks for a rule that evaluates to true and calls it a day. 我认为浏览器只是在寻找一条评估结果为true的规则,并称之为一天。
So it just goes: 这样就可以了:
When I looked at my rules and the result with this logic in mind, it suddenly made sense that the browser insisted on using the biggest image because the calc() function I use for the first line is: 当我想到规则并考虑逻辑时得出的结果时,突然觉得浏览器坚持使用最大图像是有意义的,因为我在第一行使用的calc()函数是:
calc( 100vw * (0.94 * 1.0) * 1.0 )
- which is a complicated way of writing windowWidth * 0.94
. calc( 100vw * (0.94 * 1.0) * 1.0 )
-这是编写windowWidth * 0.94
一种复杂方法。
In other words, the browser assumes that the image is always 94% of the entire width of the window and doesn't apply any of the other calculations that take the breakpoints into account. 换句话说,浏览器假定图像始终是窗口整个宽度的94%,并且不应用考虑断点的任何其他计算。
Anyway, changing the above rules to this: 无论如何,将以上规则更改为此:
sizes=" (min-width: 1px) and (max-width: 479px) ... (min-width: 480px) and (max-width: 767px) ... (min-width: 768px) and (max-width: 980px) ... "
makes sure that the rule only applies up to a certain point. 确保该规则仅适用于特定点。 Every time the next line evaluates as true, the other lines don't. 每次下一行评估为true时,其他各行都不如此。
So this is what I went with in the end: 所以这就是我最后要做的:
<img src="image-fallback.jpg" srcset=" image-300x200.jpg 300w, image-480x320.jpg 480w, image-600x400.jpg 600w, image-960x640.jpg 960w, image-1200x800.jpg 1200w" sizes=" (min-width: 1px) and (max-width: 479px) calc( 100vw * (0.94 * 1.000) * 1.00 ), (min-width: 480px) and (max-width: 767px) calc( 100vw * (0.94 * 0.905) * 0.50 ), (min-width: 768px) and (max-width: 980px) calc( 100vw * (0.94 * 0.850) * 0.33 ), (min-width: 981px) and (max-width: 1088px) calc( 100vw * (0.94 * 0.835) * 0.25 ), (min-width: 1089px) calc( 1089px * (0.94 * 0.835) * 0.25 ), 280px" />
And here's a working example of the above: Image srcset example (working) 这是上面的一个工作示例: image srcset示例(工作)
Note: once the browser has loaded a larger image, it's reluctant to load smaller ones. 注意:浏览器加载较大的图像后,便不愿加载较小的图像。 That's what the 'force refresh' button is for. 这就是“强制刷新”按钮的作用。
Note #2: For debugging I added more source images compared to my original question. 注意#2:与原始问题相比,为了进行调试,我添加了更多的源图像。 I thought it would be easier to keep it simple with two sizes but I think I would have never figured this out if I hadn't added a bunch. 我认为使用两个大小来简化它会更容易,但是如果我不添加一堆,我想我永远都不会想到。 When I only had 2 images, I thought it always chose the biggest. 当我只有2张图像时,我认为它总是选择最大的图像。 That isn't true, it just never chose the image I expected ;) 那是不对的,它只是从未选择我期望的图像;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.