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

Question

I'm scratching my head why Google Chrome loads JPG instead of Avif and WebP? Here's my code:

<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

First of all of your sources are specified for screens smaller than 991px – I guess you are loading page on larger device (or window width) so only default src fits the query. The second mistake is expecting filename should be recognized as media query. I guess you are looking for something like this:

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

This means "while screen is smaller than 991px use avif. According to your screen pixel density and current width will be loaded one of two images". Same for webp. You also need to specify sources for screens larger than 991px. Take a look at this example