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

12 сентября 2019 | Обновлено: 12 сентября 2019

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

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

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

Содержание

Есть ли эффект от Webp?
Проблемы Webp
Как задействовать Webp в WordPress
Чем просмотреть формат Webp на компьютере
Выводы и итоги

Есть ли эффект от 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 не получится - получите ошибку «Извините, этот тип файла недопустим по соображениям безопасности».

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

Поэтому я остановился на плагине для автоматического конвертирования Jpg и Png в Webp для WordPress, который называется Webp Express.

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

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

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 год.

Основная проблема этого плагина лично для меня - он не работает с Fastest Cache, да и другими плагинами кеширования насколько я понял тоже (кроме Cache Enabler).

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

Чем просмотреть формат 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 - супер удобная вещь!

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