Chrome dont recognize webp source in picture tag

Question

I'm generating picture html tag with set of variants of image but when I opening it in chrome, browser still getting default png image

I tried different sets of srcset and sizes but no luck

<picture>
    <source type="image/jpeg" sizes="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w">
    <source type="image/webp" sizes="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w">
    <img src="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w" media="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" class="img-fluid" alt="">
</picture>

Try here to find answer: https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working — Ivananutrition, Aug 23 '19 at 12:19
Problem about - why chrome deciding to get jpeg or png prefer to webp from picture sources and not about wrong image size. — Oleg Shakhov, Dec 02 '19 at 14:13

score 2 · Accepted Answer · answered Apr 10 '21 at 14:02

2

The browser takes the first <source> element it supports. Because all browsers support image/jpeg the second <source type="image/webp"> gets always ignored.

To fix this issues you have to reverse the order of the <source> elements:

<picture>
    <source type="image/webp" …>
    <source type="image/jpeg" …>
    <img …>
</picture>

answered Apr 10 '21 at 14:02

ausi

7,253
2
31
48

1

I think - it works, changed render ordering and chrome got it, thanks – Oleg Shakhov Aug 18 '21 at 14:52

Chrome dont recognize webp source in picture tag

1 Answers1