我如何结合 <picture> mime 类型和 srcset 宽度值

编程问答 2022-05-31

问题描述

我想使用 .webp 作为首选文件类型，如果浏览器不支持下一代图形，则默认为原始文件类型。

我已经可以使用断点的媒体查询来做到这一点：

<picture>
    <source type="image/webp" media="(min-width: 1281px)" srcset="big_image.webp">
    <source type="image/jpeg" media="(min-width: 1281px)" srcset="big_image.jpg">
    <source type="image/webp" media="(min-width: 460px) and (max-width: 1280px)" srcset="medium_image.webp">
    <source type="image/jpeg" media="(min-width: 460px) and (max-width: 1280px)" srcset="medium_image.jpg">
    <source type="image/webp" media="(max-width: 460px)" srcset="small_image.webp">
    <source type="image/jpeg" media="(max-width: 460px)" srcset="small_image.jpg">

    <img src="big_image.jpg"  width="1920" height="1080"  alt="Sample Image" style="max-width:100%;">

</picture>

但是，当我进行 Google Core Vitals 测试时，由于预期尺寸大于显示尺寸，我失去了最佳实践分数。

例如

  • 显示尺寸 360 x 187
  • 实际尺寸 460 x 239（由上述媒体查询提供）
  • 预期尺寸 945 x 491

我不确定为什么会发生这种情况，但假设它提供了适合屏幕像素宽度的分辨率而不考虑视网膜显示？

所以，我想将源类型与图像 srcset 宽度（例如 1920w）结合起来，以便浏览器可以选择合适的图像，而不是使用媒体查询来确定断点……但我还没有找到可行的解决方案（我看过类似的问题）甚至是尝试。这不可能吗？

如果不可能，我该如何克服这种对低分辨率图像的核心生命体征惩罚？

我错过了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlimageimagesrcsetwebp