如何调试响应式图片的srcset和sizes属性，比如哪个媒体条件会生效？

Question

如何调试响应式图片的srcset和sizes属性，比如哪个媒体条件会生效？

9

我又一次为响应式图片而苦恼，CMS给了我它的 srcset ，我建立了一个简单的 sizes 属性，我在Dev Tools中查看currentSrc时，通过hover来检查属性 - 结果是错误的Src！试图更改媒体条件，保存，重新加载，悬停，重复此过程直到它基本正常。希望它不会对其他图像产生影响。

肯定有更好的方法吧？考虑到Firefox仍然比Chrom*更擅长调试Webfonts，并且仅今天我才发现Chrome的Dev Tools中有“添加设备像素比率”，我想知道是否我遗漏了某些东西。我知道并使用占位符图片，但是它们难以设置，并且无法告诉我

sizes 属性的语法是否正确？
浏览器在当前视口中认为该图像有多少设备像素？这是多少个“srcset w-像素”？
最重要的是：哪个媒体条件与当前视口匹配？为什么？

编辑：我想到了这个例子，希望它有所帮助：

<img
  src="foo.jpg"
  sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
  srcset="foo_a.jpg 300w, foo_b.jpg 768w" />

在设备像素比为1的情况下，视口宽度为650px。
开发者工具告诉我：

currentSrc == "foo_b.jpg"

为什么？这是哪个条件？33vw最终会变成什么？是650px*33/100吗？它与300w有什么关系？它如何接近于768w？
请注意，我实际上不是在询问这些特定值，而是一个常规的工作流程。

编辑2：我可能在寻找一个开发者工具功能（或扩展程序），它会告诉我：

视口宽度为650px
匹配((min-width: 600px) and (max-width: 1000px))
650px @ DPR 1.0 = 650w
=> 33vw = 650w*33/100 = 214.5w
最接近的源= foo_a.jpg 300w
但是，我已经在缓存中拥有了foo_b.jpg
选择foo_b.jpg

- kubi

好的，我已经阅读了关于大小属性的更多信息，我完全错误了！你可能看到foo b是因为它是用于较大窗口尺寸的图像-一旦浏览器加载并缓存了该图像，它将始终被使用，即使浏览器调整为较小的分辨率。 - Pete

@Pete :) 是的，这很复杂。 - kubi

这就是为什么我更喜欢使用picture标签 - 简单明了，直白易懂！ - Pete

@Pete，不幸的是，这并不适用（尽管我怀疑一旦你有了复杂的情况，它就不会那么不同）。关于缓存：我已经禁用了缓存并强制清除了它，但是错过了它在页面上的其他位置（和你的视口之外）出现相同图像时偷偷地重新填充。如果浏览器说：“我正在使用这个非常src，因为缓存（而不是因为你的sizes错误）”，那将会很有帮助。 - kubi

Chrome开发者工具可以告诉你一张图片是否来自缓存。当你检查网络 > 图片时，大小列会显示所有从缓存加载的图片。你需要重新加载页面才能开始录制。 - Steven Kuipers

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Teo Dragovic · Accepted Answer

大小属性的语法是否正确？

在您的情况下，不正确。外部括号在((min-width: 600px) and (max-width: 1000px))上似乎是多余的。

浏览器认为当前视口中的图像有多少设备像素？这是多少个“srcset w-pixels”？

如果您知道您的设备像素比（DPR），则可以使用该值将实际图像宽度（srcset中的w值）除以屏幕上的像素宽度。

浏览器从您提供的srcset和sizes属性中了解此信息，并在决定使用哪个图像时将其考虑在内。

最重要的是：哪个媒体条件与当前视口匹配？为什么？

sizes属性中的媒体查询与CSS媒体查询完全相同。因此，首先从左到右阅读的有效媒体查询将被应用。有趣的是，浏览器（至少是Chrome）做的一件事，如果逗号之间的一个查询无效，它不会使整个sizes属性无效，只有那个查询。

您可以通过在CSS中应用相同的媒体查询来测试它，如下所示（请注意，我正在使用Sass）：

body {
   @media (max-width: 599px) {
      &:before { content: "max-width: 599px"; }
   }
   @media (min-width: 600px) and (max-width: 1000px) {
      &:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
   }

在你的第二个查询中，我的代码检查器报告了无效格式，直到我删除了外部括号。这就是我知道你的第一个观点的原因。

我的测试示例：https://codepen.io/teodragovic/pen/eXjPoz 好的参考文章：https://ericportis.com/posts/2014/srcset-sizes/