为 <picture> 内的 <source> 设置 <img> 回退的维度，SEO/page 加载时间

Question

使用下面的代码，我试图实现这个：

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

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

<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 中定义的 low-res/placeholder 图像。

知道图像尺寸和 w/h 比率，我也想在 HTML 中提供这些，以便浏览器知道 space 在加载期间为图像保留什么一次，在加载图像之前，以防止重新渲染。

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

我知道有一个 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 的 fallback <img>：width 和 height 设置为 100%，而 position:absolute
<div> 包装器必须是 CSS position:relative，图像才能放置在其中 "absolutely"。
<div> 必须设置 width 和 padding-top 以反映图像的 dimensions/aspect 比例。
CSS 不需要内联定义，因此 div 包装器的大小可以使用媒体查询针对不同的视口大小设置不同。

它的工作原理如下：

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

SEO/UX 的主要好处：

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

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

为 <picture> 内的 <source> 设置 <img> 回退的维度，SEO/page 加载时间

Setting dimensions of <img> fallback for <source> inside <picture>, for SEO/page loading time

html

css

responsive-design

responsive-images

srcset