Как подружить WebP и WordPress

Еще в 2010 году Google представил новый формат изображений WebP. Такой крайне полезный формат, который значительно повышает производительность сайта, до сих пор не используют некоторые браузеры, в том числе Safari.

На одном из творческих проектов, расположенном на обычном хостинге, где скорость загрузки сайта занижена за счет большого количества неоптимизированных, по мнению PageSpeed Insights, изображений, решено было попробовать применить формат WebP. Надо сказать, что все картинки формата jpg, максимально сжимаются перед загрузкой на сайт, но этого недостаточно. Результатом такого эксперимента стало повышение баллов PageSpeed Insights на 20 пунктов, и это отличный результат.

Как подружить WebP и WordPress
Пример сжатия изображений

Но есть одно но, картинки такого формата не увидят пользователи iPhone. В этом случае необходимо указать резервное изображение формата jpg или png, которое будет отображено в браузерах не имеющих поддержки WebP. Для этого мы используем элементы <picture> и <source>.

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="Моя картинка">
</picture>

Все прекрасно, если это статический сайт, но что делать, если это WordPress?

WebP на сайте WordPress.

Для небольшого сайта публиковать картинки можно не как обычно, а через редактор HTML с указанием элемента <picture>, как показано выше. Т.е. загружать в медиатеку, копировать оттуда ссылку на изображение и вручную вставлять ее в код.

По умолчанию в WordPress отключено разрешение на загрузку изображения с таким форматом, включить его можно плагином WP Enable WebP. Плагин не требует никакой настройки, просто активируйте его и загружайте картинки WebP в библиотеку.

Но этот ручной способ неудобен для больших сайтов. Для автоматизации процесса существует несколько плагинов:

  • WebP Express — полностью бесплатный;
  • Imagify – WebP & Image Compression and Optimization;
  • WebP Converter for Media и другие.

Повышение производительности вашего сайта может быть значительным при использовании этих плагинов. Но и здесь есть минус — плагины создают отдельную папку в вашем проекте и в нее сохраняют картинки WebP. Если у вас на хостинге есть ограничение по файлам (инодам), то лишние файлы ни к чему. Поэтому лучший способ — использовать CDN с конвертацией в WebP, как это делает тот же плагин Jetpack.

Как конвертировать изображения в WebP?

Есть много полезных и бесплатных приложений для конвертации:

  • XnConvert — кросс-платформенный пакетный конвертер;
  • Squoosh.app — онлайн инструмент Google для сжатия изображений без потерь качества;
  • WebPShop — плагин для открытия и сохранения изображений WebP непосредственно из Adobe Photoshop и другие.

Помните, что конвертировать надо изображения хорошего качества, иначе все артефакты сжатия jpg или png будут переданы и в картинку WebP.

Если этой информации мало, очень подробная статья по сжатию графики есть на Habr.

наверх

Пожалуйста, докажите, что вы человек, выбрав чашку.