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

Question

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

我不太确定如何声明图像，我一直只看到较大的版本。我选择使用高分辨率图像并将它们缩小 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的断点。令人困惑的部分是数据大小属性。我应该在这里声明另一个尺寸，因为图像是高分辨率的还是我应该让它们全宽？

添加：脚本启动时生成的标记：

<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 中声明您的图像有多大。看起来您已经在这样做了，这很好（假设您的图像确实是 720 和 1440 图像像素宽）。浏览器将根据该信息选择它想要的图像。

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

（我不知道 LazySizes 是如何工作的，所以如果它做了一些奇怪的事情我帮不了你。）

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

Correct sizes for img srcset in a container element?

image

src

srcset