对于具有不同纵横比的响应式图像，有啥方法可以最小化 Cumulative Layout Shift？

Posted 2023-02-23

【中文标题】对于具有不同纵横比的响应式图像，有啥方法可以最小化 Cumulative Layout Shift？

【英文标题】：For responsive images with different aspect ratios, what's a good way to minimize Cumulative Layout Shift?对于具有不同纵横比的响应式图像，有什么方法可以最小化 Cumulative Layout Shift？

【发布时间】：2020-10-24 13:44:47

【问题描述】：

如果您的 <picture> 元素在不同断点处具有不同纵横比的图像源，那么通过在 CSS 中使用纵横比和媒体查询来最小化 CLS 的最佳方法是什么？

【参考方案1】：

对于<picture>，只要每个<source> 图像在您的响应式图像sn-p 中具有相同的纵横比，您就应该是fine：

<img  
       src="puppy-1000.jpg"
    srcset="puppy-1000.jpg 1000w,
            puppy-2000.jpg 2000w,
            puppy-3000.jpg 3000w"
           />

对于<picture>，其中每个<source> 具有不同的纵横比，浏览器正在等待standardization 为每个<source> 推荐用于艺术方向用例的宽度/高度：

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)"  >
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)"  >
  <img src="https://via.placeholder.com/1500x300"  >
</picture>

同时，您可以通过padding-top CSS hacks 提供height，每个<picture> 断点提供不同的媒体查询。

【讨论】：

width/height in 现在在 Chrome 90 中工作（链接的 github 问题已关闭）

【参考方案2】：

支持dimension attributes 的源元素是html 标准的now 部分——https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

标准化匹配 the example implementation @addyo 已经提供。

对于<picture> 的艺术指导用例，每个<source> 具有不同的纵横比，每个<source> 可以提供自己的width 和height 值。

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)"  >
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)"  >
  <img src="https://via.placeholder.com/1500x300"  >
</picture>

浏览器支持的实现是underway，应该可以在caniuse soon 中跟踪。