为什么谷歌浏览器加载 JPG 而不是 Avif 和 WebP？答案

【问题标题】：Why Google Chrome loads JPG instead of Avif and WebP?为什么谷歌浏览器加载 JPG 而不是 Avif 和 WebP？
【发布时间】：2021-02-22 08:50:47
【问题描述】：

我在摸不着头脑，为什么 Google Chrome 会加载 JPG 而不是 Avif 和 WebP？这是我的代码：

<picture>
<source media="(max-width: 991px)" srcset="/assets/img/768w.avif" type="image/avif">
<source media="(max-width: 991px)" srcset="/assets/img/768w.webp" type="image/webp">
<source media="(max-width: 991px)" srcset="/assets/img/576w.avif" type="image/avif">
<source media="(max-width: 991px)" srcset="/assets/img/576w.webp" type="image/webp">
<img src="/assets/img/768w.jpg" alt="image" width="100%" height="auto" class="img-fluid" decoding="async" loading="lazy">
</picture>

【问题讨论】：

标签： html image

【解决方案1】：

首先，您的所有来源都是为小于 991 像素的屏幕指定的——我猜您是在较大的设备（或窗口宽度）上加载页面，因此只有默认 src 适合查询。第二个错误是期望文件名应该被识别为媒体查询。我猜你正在寻找这样的东西：

<source media="(max-width: 991px)" srcset="/assets/img/576w.avif 576w, /assets/img/768w.avif 768w" type="image/avif">

这意味着“当屏幕小于 991px 时使用 avif。根据您的screen pixel density and current width 将加载两个图像之一”。 webp也是一样。您还需要为大于 991 像素的屏幕指定来源。看看这个example

【讨论】：