Как подтянуть картинки webp?

Question

[Илья Кольцов]

Всем привет. Использую готовую сборку галпа с преобразованием картинок в webp но они не отображаются в браузере. В файлах они , собственно, есть. Подскажите, с чем может быть связано?
.

Comments

[WapSter]

Неверный путь, старый браузер, баба Галя из соседнего подъезда так захотела. Можем еще погадать

Answer 1

[Алексей Назаренко]

Webp вставляются как обычные картинки, но некоторые браузеры не поддерживают этот формат, поэтому стоит использовать специальный тег picture:

<picture>
    <source srcset="path/to/image.webp" type="image/webp">
    <img src="path/to/image.jpg" alt="Image alt">
</picture>

Если webp не отображается, могут быть следующие причины:

• неверный путь к файлу. В разметке, возможно, стоит путь в исходную папку, а не в папку со сконвертированными изображениями;
  
• браузер не поддерживает webp и нужен fallback, как показано выше;
  
• при конвертации что-то пошло не так и изображение битое после конвертации. Это маловероятно, но, тем не менее, такое может быть.