为什么Google Chrome加载的是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的屏幕指定的-我猜你是在更大的设备上加载页面(或窗口宽度)，所以只有默认的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也是如此。您还需要为大于991px的屏幕指定信号源。看一下这个example