Что делать, если после релиза сайта с gulp-сборкой на GitHub, png перекрывает webp?

Question

[HelWorld]

Сайт делал на своей gulp-сборке с gulp-webp-html и gulp-webp-css. Если запускать сайт на browserSync, всё работает нормально. Но если релизнуть сайт на GitHub, то png перекрывает webp и на сайте вместо webp картинок присутствуют только png. В DevTools менял .png на .webp, изображения отображаются, значит ошибка не в пути до файла. Код подключения webp тоже прописывается, но возникает ошибка в некорректном значении свойства.

Answer 1

[Sigma Male]

А у вас установлен плагин который автоматом заменяет все теги img на:

<picture>
  <source srcset="./images/logo.webp" type="image/webp">
  <img src="./images/logo.png" alt="Logo" loading="lazy">
</picture>

Плагин называется: gulp-webp-html-nosvg
Плагин нужно подключать для HTML и PUG файлов

Comments

[HelWorld]

Всё равно не помогает. Такое ощущение, что у меня самого где-то стоит галочка "Не подгружать webp в браузерах". Смотрю в браузерах Firefox и Chrome. И знаю, что как минимум Chrome должен поддерживать webp. Плагин действительно работает, в коде прописывается всё так, как вы написали, но всё равно у png приоритет больше, чем у webp, и у меня теряется логика, почему это именно так происходит. К тому же прикол в том, что теперь и на localhost webp не работает. Единственное решение - вместо .png написать .webp в коде Pug.