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

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

使用下面的代码,我试图实现这个:

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

在延迟加载脚本启动之前,浏览器将忽略 <source> 元素,因为此时适当的 srcsetsizes 将不存在。浏览器还将忽略 <img>data-srcsetdata-sizes,因此将显示 src 中定义的 low-res/placeholder 图像。

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

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

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

关于设置后备图像尺寸还有其他想法吗?

好吧,毕竟,一个合理的答案是将 <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>widthheight 设置为 100%,而 position:absolute
  • <div> 包装器必须是 CSS position:relative,图像才能放置在其中 "absolutely"。
  • <div> 必须设置 widthpadding-top 以反映图像的 dimensions/aspect 比例。
  • CSS 不需要内联定义,因此 div 包装器的大小可以使用媒体查询针对不同的视口大小设置不同。

它的工作原理如下:

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

SEO/UX 的主要好处:

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

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