为 <picture> 内的 <source> 设置 <img> 后备尺寸，用于 SEO/页面加载时间

Question

使用下面的代码，我正在尝试实现这一目标：

• 允许浏览器在 WEBP <source> 和 JPEG in<img> 之间进行选择（作为后备）
• 如果视口宽度 >1058px，则将图像显示为 754px 宽，或者，对于较小的视口，自动选择五个图像之一并拉伸到视口宽度。
• 具有<img> 的src 属性，它指向低分辨率延迟加载版本

• 为 SEO/UX 原因指定 HTML 中图像的 width 和 height（更多内容见下文）。

  <div>
  <picture>
  <source type="image/webp" 
       data-srcset="
          image_100.webp 100w, 
          image_200.webp 200w, 
          image_400.webp 400w, 
          image_600.webp 600w,
          image_754.webp 754w" 
          data-sizes="(min-width: 1058px) 1000px, 100%" />
  <img data-srcset="
          image_100.png 100w, 
          image_200.png 200w, 
          image_400.png 400w, 
          image_600.png 600w,
          image_754.png 754w" 
          data-sizes="(min-width: 1058px) 1000px, 100%" 
          src="image_min.png" width="1000" height="300" alt="image_alt" />
  </picture>
  </div>
  

你问为什么会有data- 前缀？我想使用延迟加载脚本，它会在应该显示图像的正确时间删除它们。

在延迟加载脚本启动之前，浏览器将忽略<source> 元素，因为此时正确的srcset 和sizes 将不存在。浏览器还将忽略<img> 中的data-srcset 和data-sizes，因此将显示src 中定义的低分辨率/占位符图像。

知道图像尺寸和 w/h 比，我还想以 HTML 格式提供这些，以便浏览器知道在加载期间为图像保留什么空间，在图像之前已加载，以防止重新渲染。

简单地将图像的绝对值设置为style或<img>的width和height属性，仅对视口宽度>1058px有效。否则，尺寸是相对于视口大小的。所以，我想告诉浏览器，图片的宽度和高度分别为父 <div> 宽度的 100% 和 30%，这在所有情况下都有效。

我知道有一个 css padding-top 技巧，可以保持 div 的纵横比，但我不确定我是否可以在这个场景中使用它，因为它实际上会在图像上方创建一个填充。

关于设置后备图像尺寸的任何其他想法？

Answer 1

好吧，一个合理的答案毕竟是将<picture> 包装在<div> 容器中并应用CSS，包括padding-top hack，以保持其纵横比：

<div style="position:relative;"width:100%;padding-top:33%>
<picture>
<source type="image/webp" 
     srcset="
        image_100.webp 100w, 
        image_200.webp 200w, 
        image_400.webp 400w, 
        image_600.webp 600w,
        image_754.webp 754w" 
        sizes="(min-width: 1058px) 1000px, 100%" />
<img srcset="
        image_100.png 100w, 
        image_200.png 200w, 
        image_400.png 400w, 
        image_600.png 600w,
        image_754.png 754w" 
        sizes="(min-width: 1058px) 1000px, 100%" 
        src="image_min.png" style="width:100%;height:100%;position:absolute" alt="image_alt" />
</picture>
</div>

• 回退的 CSS <img>: width 和 height 设置为 100% 和 position:absolute
• <div> 包装器必须是 CSS position:relative，以便图像“绝对”位于其中。
• <div> 必须设置 width 和 padding-top 以反映图像的尺寸/纵横比。
• CSS 不需要内联定义，因此可以使用媒体查询针对不同的视口大小设置不同的 div 包装器的大小。

它的工作原理如下：

<img> 元素完全填满了<div> 包装器。感谢position:absolute，<div> 包装器的padding-top 对图像的位置没有影响。 padding-top 的百分比值使其相对于元素 width，因此纵横比保持不变（例如，padding-top 设置为 100% 会使包装器始终为正方形）。

SEO/UX 的主要好处：

无论sizes 和srcset 的值是什么，如果尺寸（因此纵横比）已知，我们可以使用备用<img> 的CSS 创建一个占位符，从而为图像保留空间尚未加载，甚至尚未被浏览器从srcset 中选择。

最终，这将防止页面布局发生烦人的变化，这是由于在已经呈现的页面上绘制图像而引起的。