Когда доступен Webp, Chrome по умолчанию использует формат JPG. Почему?

По умолчанию Chrome использует файлы jpg / png, если доступны файлы webp. Я запустил аудит веб-сайта через Lighthouse, и он рекомендовал правильно изменять размер изображений и использовать форматы «следующего поколения». После изменения файлов на webp (и создания файла нескольких размеров) я добавил файлы под тегом изображения. Когда я открываю инструменты разработчика сейчас, Lighthouse дает мне зеленый свет как для форматов следующего поколения, так и для файлов разных размеров, но по умолчанию используется только формат jpg / png.

<picture>
   <source srcset="imgs/img_480w.webp" media="(max-width:480px)" type="image/webp">
   <source srcset="img/img_280w.webp" media="(max-width:280px)" type="image/webp">
  <source srcset="imgs/imgs.jpg" type="image/jpeg">
  <!-- always defaults to here --> <img src="grid_img/LoW_grid.jpg" alt="Image" class="tm-img">

It is definitely getting the files, they are not showing as not-found. And when I do not include the last line, nothing shows up at all. The files did convert to webp formats properly because I can open them in Chrome.


google-chrome lighthouse default webp jpeg
person missmal    schedule 14.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

кажется, что ваш код правильный. Однако ваше предположение о выполняемом правиле / строке неверно. Chrome не предпочитает отображать изображения в формате JPG.

Для простоты я удалил второстепенную линию (max-width: 280). Если вы посмотрите на код ниже, вы увидите, что по умолчанию используется второй код. Это можно объяснить тем, что это первое изображение, действительное для текущей ширины экрана и которое может быть показано (из-за поддержки браузером webp).

Чтобы проиллюстрировать это, я заменил первые два изображения изображениями дерева. В третьей строке я заменил изображение изображением розы.

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpg">
  <!-- always defaults to here --> <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

Когда вы удалите вторую строку ... вы получите следующее:

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

Когда вы уменьшите окно во втором блоке кода, изображение будет заменено на дерево webp в Chrome. В неподдерживаемых браузерах вы все равно увидите розу.

person JoostS    schedule 23.08.2019
comment
Можем ли мы сообщить браузеру, что независимо от медиа-запроса всегда отображается изображение webp, если браузер поддерживает форматы webp, в противном случае отображается изображение тега img? @JoostS - person siluveru kiran kumar; 02.12.2019
comment
Да, просто не указывайте атрибут media: media="(max-width:480px)" - person JoostS; 02.12.2019
comment
сверху media="(max-width:480px)" код Я понял, как от 0 до 480 пикселей отображать это изображение, верно? Скажите, пожалуйста, если я ошибаюсь. Итак, почему я должен сохранять media="(max-width:480px)" по всей ширине, просто показывать изображение webp, если браузер поддерживает. Спасибо @JoostS - person siluveru kiran kumar; 02.12.2019
comment
Ты прав. Это медиа-запрос. Если вы хотите узнать, КОГДА или ПОЧЕМУ использовать медиа-запрос, поищите его в Интернете. - person JoostS; 02.12.2019
comment
Я не нашел его нигде, я искал его в Google, но у меня есть вопрос, если атрибут media не был там, тогда тег изображения будет работать правильно, тогда в этом случае я должен получить изображение webp вместо изображения тега img. @JoostS - person siluveru kiran kumar; 02.12.2019
comment
Я застрял на этом этапе, можете ли вы проверить эту ссылку на StackOverflow один раз ссылка - person siluveru kiran kumar; 02.12.2019