image - 容器元素中 img srcset 的正确大小？

Question

使用 LazySizes 插件 ( https://github.com/aFarkas/lazysizes ) 我正在尝试构建一个图像网格，每个图像都有一个用于较小视口(viewport)的替代版本。网格(容器)是一个简单的基于列/行的基于百分比的布局。

我不太确定如何声明图像，我一直只看到较大的版本。我选择使用高分辨率图像并将它们缩小 50%，并为容器设置最大宽度。这是图像的标记示例:

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw"
  data-src="images/grid/image-small.jpg"
  data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
  alt="" class="lazyload" />

我只需要一个 768px 的断点。令人困惑的部分是 data-sizes 属性。由于图像是高分辨率的，我应该在这里声明另一个尺寸，还是应该让它们具有全宽？

补充:脚本启动时我得到的生成标记:

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
  data-src="images/grid/image-small.jpg"
  data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w"
  alt="" class=" lazyloaded"
  sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
  srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
  src="images/grid/image-small.jpg">

Answer 1

srcset规范作者在这里。

好吧，您当前的 sizes属性没用；它只是为两个断点指定了相同的大小，而且它们都只是指定了默认大小。

你为什么要尝试做一些奇怪的尺寸调整？你将与​​<img>正在尝试做，所以无论你最终得到什么都将是hacky。

只需遵循规范:sizes应该声明图像在页面中的大小(默认为 100vw，因此如果您已经计划将图像设为全角，则可以省略它)。如果您正在进行响应式设计并且您的不同布局需要以不同的方式调整图像大小，则可以在此处使用 MQ，但如果始终保持相同大小，请不要使事情复杂化。

然后在`srcset.xml 声明你的图片有多大。看起来您已经在这样做了，这很好(假设您的图像确实是 720 和 1440 图像像素宽)。浏览器将根据该信息选择它想要的图像。

我不是 100% 确定您打算如何使用该图像，但听起来您可能计划将图像显示为屏幕宽度的一半？在这种情况下，只需使用 sizes=50vw一切都会好起来的。

(我不知道 LazySizes 是如何工作的，所以如果它在做一些奇怪的事情，我无法帮助你。)