Как использовать новый формат Webp на своём сайте

Жили - не тужили и тут Google опять огорошил веб-сообщество: используйте современные форматы изображений. А разве JPG или PNG уже не катят?

Да, увы, с точки зрения Google нужно использовать новые форматы, такие как Webp, которые при том же качестве занимают в несколько раз меньше места, а значит, быстрее грузятся и меньше жрут трафика. Итак, Webp что за формат и самое главное, как его включить на своём сайте.

Сам формат Webp продвигается Google уже лет 10, но только сейчас, с момента появления его в качестве важного параметра для оптимизации скорости загрузки сайта, он стал активно внедряться в сайты и просмотрщики, а до этого его толком и просмотреть-то было нечем.

Есть ли эффект от Webp?

Да, на личном опыте скажу, что эффект от применения формата Webp на сайте очевиден.

Google Page Speed убирает ошибку про современные форматы изображений.

Да и сайт грузится быстрее (особенно заметно на мобильном интернете когда много тяжелых картинок). Но даже если картинок всего 4, то всё равно несколько дополнительных баллов в Google Page Speed можно получить.

Внешне я сколько не смотрел никакого ухудшения качества при использовании Webp не заметил.

Попробуйте найти разницу:

Причем JPG был хорошо сжат в Photoshop и занимал всего около 200Кб, без дополнительного сжатия насколько я помню около 400Кб, а png этой же картинки - 1.3 М.
Если ужимать в сервисе tinypng.com - то исходный jpg занимал около 185Кб, но качество падало прямо ощутимо заметно, особенно красных оттенков.

Короче, я думал, что ужал по-максимуму.
Но Webp ужал еще в 2 раза!

Проблемы Webp

• Не все браузеры поддерживают Webp (Safari и IE не поддерживают этот формат).
• Нет возможности загрузить Webp в WordPress или Opencart напрямую в интерфейсе CMS.
• Стандартные просмотрщики в компьютере обычно не воспринимают формат *.webp и отказываются просматривать картинки в нем, приходиться пользоваться сторонними решениями, благо это несложно сделать (смотрите ниже).
• По отзывам многих специалистов этот формат уже устарел и есть более прогрессивные алгоритмы сжатия, однако Google продвигает в первую очередь именно его.

Как задействовать Webp в WordPress

Вручную конвертить и потом заливать файлы webp в WordPress не получится - получите ошибку «Извините, этот тип файла недопустим по соображениям безопасности».

В новом WordPress с 5.8 уже поддерживается Вебп на уровне медиагалереи!

Да и радости перелопачивать сотни картинок особенной нет.

Поэтому я остановился на плагинах для автоматического конвертирования Jpg и Png в Webp для WordPress:

• плагин Converter for Media (лучший, просто раньше не знал его и писал статью под Webp Express).
• плагин Webp Express (уже редко использую, там где не работает Converter for Media)

Как настроить Webp Express

1. Устанавливаем как обычный плагин WordPress.
2. Переходим в Настройки - Webp Express
3. Я использую примерно такие настройки:

Наиболее важные пункты, на которые нужно обратить основное внимание:

Conversion method - хотя бы один флажок должен быть.
Если нету ни одного зеленого флажка, а все красные, то пишите хостеру. Если не реагирует - меняйте хостера (вот лидеры хостинга лично для меня).

Именно по этой причине у меня не получилось прямо сейчас поставить использовать Webp Express на своем собственном блоге, так как на моем дешевом VPS (читайте как я купил сервер за 1000р в месяц) просто нет нужных библиотек и придется вникать и как-то ставить их.

Впрочем, в ближайший месяц я думаю, что найду время и переведу блог на Webp, а пока что перевел на этот формат своих клиентов по СЕО продвижению.

Alter HTML - поставить галку, иначе у меня не работало.

И выбрать по возможности первый режим «Replace <img> tags with <picture> tags, adding the webp to srcset» и посмотреть на сайте - если всё ок, то его и оставляйте.

Если не сработало и показываются старые картинки в форматах jpg или png, а не webp - то включите второй режим, «Replace image URLs» и обязательно поставьте ниже галку «Only do the replacements in webp enabled browsers», иначе картинки не будут показываться в iPhone и т.п.

В этом режиме у меня заработал Webp на всех без исключениях шаблонах, включая подгрузку картинок из CSS и JS. Но идеальный вариант - если на вашем сайте все картинки переведутся именно в первом режиме.

Convert on upload - имеет смысл снять галку чтобы не тупило при загрузке картинок на сайт.

Cache-Control header - я ставлю 1 год.

WebP express +  Fastest Cache

Я использую плагины кеширования во всех проектах, которые продвигаю, особенно мне нравится именно Fastest Cache.

Но при включении изображений в формате Webp на сайте всё равно показывались закешированные старые картинки.

Итак, что нужно сделать:

1. Включить режим CDN Friendly
2. Не ставить галочку "Предварительная автоматическая генерация кэша".

Я проверил на нескольких сайтах - работает и кэш и вебп картинки.

Чем просмотреть формат Webp на компьютере

Чтобы смотреть стандартными средствами Windows (например, через просмотрщик картинок) - поставьте кодек WebpCodecSetup.exe от Google вот тут https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

Как еще один вариант - скачать FastStone или XnView с поддержкой формата webp.

Выводы и итоги

Webp формат - действительно позволяет сделать картинки меньше в несколько раз, причем визуально изменения в качестве незаметны.

Конвертировать все картинки в webp автоматически - наиболее удобно, чем обрабатывать заранее картинки до загрузки на сайт. Потому что ни WordPress, ни тот же Opencart вообще не поддерживают загрузку в интерфейсе webp формата.

Да и просмотр файлов с расширением Webp на компьютере пока еще нестандартная задача, требующая сторонних программ и расширений.

А вот использование автоматических плагинов типа WebP Express и Converter for Media - супер удобная вещь!

Успехов в бизнесе!