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

Question

我在摸不着头脑，为什么 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>

Answer 1

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

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

这意味着“当屏幕小于 991px 时使用 avif。根据您的屏幕像素密度和当前宽度将加载两个图像之一”。 webp也是一样。 您还需要为大于 991 像素的屏幕指定来源。 看看这个例子