Предоставление изображений WebP посетителям с использованием элементов HTML

Digital Ocean предлагает следующий формат изображений webp:

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

В приведенном ниже примере я применил класс к файлу jpg. Это хорошая идея (или необходимо) применить тот же класс к webp? Как насчет добавления тега alt? Нужны ли изображениям webp тег alt?

<picture>
<source srcset="images/pic.webp" type="image/webp">
<img src="images/pic.jpg" class="img-fluid" alt=""> 
</picture>

person ControlZ    schedule 22.07.2020    source источник


Ответы (1)


Я предполагаю, что вы имеете в виду эта статья.

Хотя, безусловно, можно использовать изображение и исходные элементы, есть причины против этого:

  • не поддерживается всеми браузерами (хотя он вернется к внутреннему img)
  • усложняет html-код
  • требует переписывания существующего кода

Альтернативный вариант — использовать модуль Apache mod_rewrite для автоматизации процесса доставки изображений .webp в поддерживающие браузеры (также в статье). Преимущества:

  • поддерживается всеми браузерами
  • более простой HTML
  • нет необходимости переписывать существующий код
person 8ctopus    schedule 23.07.2020
comment
В будущем я буду использовать mod_rewrite, так как он упрощает код. Я предполагаю, что этот метод также обеспечивает более быстрое время загрузки. - person ControlZ; 23.07.2020
comment
@ControlZ для простого преобразования существующих изображений в webp я создал webp8. Вы можете проверить это. - person 8ctopus; 24.07.2020