html - 如何在 元素中设置 元素的宽度和高度属性以防止布局偏移？

Question

在 Chrome DevTools 中运行 Lighthouse，它说 CLS(Cumulative Layout Shift)需要改进。
我知道现代浏览器现在会根据图像的 width 设置图像的默认纵横比。和 height属性。因此，最佳实践是 width和 height属性 应该设置以防止布局偏移。
尽管如此，我还是省略了设置 width和 height属性，因为这是我可以让它以我想要的方式工作的唯一方法(请参阅下面的代码)。
因为我有 WebP 格式的图像(带有 png 后备)，所以我不得不使用 <picture>元素(以便不支持 WebP 的浏览器获取图像的 png 版本)。请注意，我使用的是同一图像的不同尺寸版本。
因此，如果我没有使用 WebP 格式，我会选择 <img>。唯一而不是<picture> .由于纵横比，问题将得到解决。
正如您在下面的代码片段中看到的那样，在这个特定示例中，同一图像有两个版本。设置width="245"和 height="600"在 <img>导致我的两个不同尺寸版本的同一图像的最大尺寸均为 245 x 600 像素(它当然会根据较小的视口(viewport)缩小)。根据我的媒体查询，对于更宽的视口(viewport)(最小宽度:813px)，我提供的是同一图像的较大版本，但设置 width和 height在 <img>图像缩小到 245 x 600 像素。
现在回答我的问题；如果可能，我该怎么做才能设置 width和 height我的 <img> 的属性我的 <picture> 中的元素元素来防止布局变化(并且这样做还可以获得其他好处，例如更快的加载时间)？因此，我如何让浏览器利用纵横比以正确的方式显示我的图像？
我非常感谢有人对此的指导。
谢谢/卡尔

<picture>
            <source 
              media="(max-width: 812px)" 
              srcset="image-245w.webp"
              type="image/webp"
            >
            <source 
              media="(min-width: 813px)" 
              srcset="image-332w.webp"
              type="image/webp"
            >
            <source 
              media="(max-width: 812px)" 
              srcset="image-245w.png"
              type="image/png"
            >
            <source 
              media="(min-width: 813px)" 
              srcset="image-332w.png"
              type="image/png"
            >
            <img class="img-fluid" src="image-245w.png" alt="image">     
</picture>

Answer 1

我做了一些测试，得出的结论是使用 width和 height (正如你应该)在图像元素上取消 sizes属性。如果您设置 width，您将无法让您的响应式图像正常工作。和 height .
我创建了一个显示不同组合的小型仓库:https://www.gijsvandam.nl/responsive-picture-element/
解决方法是不使用 sizes如果您使用 width和 height而是依靠 css 来设置正确的宽度和高度。

<picture>
            <source 
              srcset="image-245w.webp 245w, image-332w.webp 332w"
              type="image/webp"
            >
            <img
              srcset="image-245w.png 245w, image-332w.png 332w" 
              class="img-fluid" 
              src="image-245w.png" 
              alt="image" 
              width="245" 
              height="600">     
</picture>

     @media (max-width: 812px) {
        .img-fluid {
           width: 245px;
           height: auto;
        }
      }
      @media (min-width: 813px) {
        .img-fluid {
           width: 332px;
           height: auto;
        }
      }

重要的是要了解 srcSet结合 sizes (或与上面的 css 结合使用)不一定强制浏览器使用一个图像或另一个图像。取决于 device pixel ratio浏览器可能会选择加载更大的图像以显示在 245 像素宽的图像槽中。您只需要相信浏览器会为工作选择最佳文件。 'sizes' 和 srcSet 之间没有一对一的关系。 .这就是为什么您可以在 srcSet 中提供更多(或更少)文件的原因。比 sizes 中的选项还多属性。