为 <picture> 内的 <source> 设置 <img> 回退的维度,SEO/page 加载时间
Setting dimensions of <img> fallback for <source> inside <picture>, for SEO/page loading time
使用下面的代码,我试图实现这个:
- 允许浏览器在
<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 的纵横比,但我不确定我是否可以在这个场景中使用它,因为它实际上在图像上方创建了一个填充。
关于设置后备图像尺寸还有其他想法吗?
好吧,毕竟,一个合理的答案是将 <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
中选择。
最终,这将防止页面布局发生烦人的变化,这种变化是由于在已经呈现的页面上绘制图像而引起的。
使用下面的代码,我试图实现这个:
- 允许浏览器在
<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 的纵横比,但我不确定我是否可以在这个场景中使用它,因为它实际上在图像上方创建了一个填充。
关于设置后备图像尺寸还有其他想法吗?
好吧,毕竟,一个合理的答案是将 <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>
包装器必须是 CSSposition: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
中选择。
最终,这将防止页面布局发生烦人的变化,这种变化是由于在已经呈现的页面上绘制图像而引起的。