如何解决我如何结合 <picture> mime 类型和 srcset 宽度值
我想使用 .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 举报,一经查实,本站将立刻删除。