為什么谷歌瀏覽器加載 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 像素的屏幕指定來源。 看看這個例子