设置<img>在<图片>内的<源码>的尺寸，以利于SEO页面的加载时间。

Question

使用下面的代码，我试图实现这个目标。

• 让浏览器选择WEBP <source> 和JPEG<img> (作为后备)
• 对于视口宽度>1058px，显示754px宽的图像，或者，对于较小的视口，自动选择五个图像中的一个，并拉伸到视口宽度。
• 有一个 src 的属性 <img> 的地方，这说明是一个低分辨率的懒人版本。

• 指定 width 和 height 由于SEOUX的原因，在HTML中指定了图片的名称(详见下文)。

  <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 此时将不存在。浏览器也会忽略 data-srcset 和 data-sizes 的 <img>中定义的低占位图，因此，将显示一个低占位图。src.

知道了图片的尺寸和wh比例，我还想在HTML中提供这些数据，以便浏览器知道在加载时要为图片保留多少空间。之前 的图像，以防止重新渲染。

只需将图像的绝对值设置为 style 或成 width 和 height 的属性 <img>，仅对视口宽度>1058px有效。否则，尺寸是相对于视口大小的。所以，我想告诉浏览器，图片的宽度是100%，高度是30%，是父图片宽度的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 <img>: width 和 height 设置为100%，并且 position:absolute
• 该 <div> 包装器必须是CSS position:relative为了让图像 "绝对 "地定位在其中。
• 该 <div> 要有 width 和 padding-top 设置为反映图片的尺寸长宽比。
• 该CSS不需要在行内定义，因此可以使用媒体查询为不同的视口尺寸设置不同的div包装的大小。

它的工作原理如下。

在 <img> 元素填满 <div> 包装纸完全。感谢 position:absoluteజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజ padding-top 的 <div> 包装器对图像的位置没有影响。的百分比值。padding-top 使其相对于元素 宽度所以长宽比保持不变（例如 padding-top 设置为100%会使封装器总是正方形）。)

对于SEOUX来说，主要的好处是。

无论长宽比是多少 sizes 和 srcset 值，如果尺寸（因此长宽比）是已知的，我们可以使用后备的CSS创建一个占位符。<img>因此为尚未加载的图像保留了空间，甚至浏览器从 srcset.

最终，这将防止页面布局的恼人变化，因为图像被绘制在已经渲染的页面上。