Как в WordPress предоставлять изображения в форматах следующего поколения

В этом руководстве я расскажу, как применять формат WebP на WordPress-сайте. Мы рассмотрим, как преобразовать изображения в формат WebP и как их использовать в совместимых браузерах.

Что такое изображения следующего поколения?

JPEG 2000, JPEG XR и WebP – это современные форматы изображений с превосходными возможностями сжатия и отличным качеством.

WebP является самым экономичным форматом и обеспечивает сжатие на 30% эффективнее, чем JPEG и JPEG 2000. Поэтому мы сосредоточимся на этом формате.

Что такое WebP?

WebP – это графический формат с открытым исходным кодом, созданный корпорацией Google. Его файлы имеют расширение .webp

Существует несколько вариантов WebP. Один из них использует сжатие с потерями. По своим характеристикам он сопоставим с JPEG, но имеет размер файла на 25-34% меньше. Изображения, сохраненные в формате WebP, поддерживают прозрачность, чего нет у JPEG.

Другой вариант WebP – формат без потерь. Он схож формат PNG, но имеет размер файла на 26% меньше.

Что такое WebP?

Сравнительная характеристика форматов.

WebP поддерживает:

  • Анимацию.
  • Сжатие без потерь.
  • Сжатие с потерями.
  • Прозрачность альфа-канала.

Это означает, что можно конвертировать PNG, GIF и JPEG в один удобный формат изображений, и получить преимущество в производительности сайта.

Бесплатный WebP

Теперь плохие новости. Не все браузеры поддерживают WebP. Тем не менее, поддержка проекта таким гигантом, как Google, позволяет надеяться, что будущее – за WebP.

Бесплатный WebP

Действительно впечатляет

Вы слышали о возможности «Предоставлять изображения в форматах следующего поколения»? Это способ, используемый Google для того, чтобы подтолкнуть вас к использованию WebP.

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

Медиа-библиотека WordPress не позволяет загружать WebP-изображения по соображениям безопасности. Но можно активировать поддержку данного формата на своем WordPress-сайте.

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

Извините, не извиним

Есть несколько способов начать использовать WebP- изображения. Для этого понадобится решение, которое будет:

  1. Использовать конвертер WebP для преобразования существующих изображений в формат WebP.
  2. Определяет, поддерживает ли браузер пользователя формат WebP.
  3. Предоставлять изображения в формате WebP, если они поддерживаются или в форматах PNG и JPEG, если нет.

Преобразование изображений в формат WebP для WordPress

Для преобразования можно использовать конвертер WebP. Например, этот. Просто загрузите файл в формате JPEG, PNG или GIF, а затем скачайте новое изображение.

Преобразование изображений в формат WebP для WordPress

Одно готово, осталась тысяча

Adobe Photoshop по умолчанию не экспортирует графические файлы в формат WebP. Но вы можете добавить эту функцию с помощью специального плагина. Его необходимо добавить в папку Adobe Photoshop, размещенную на компьютере.

Вы также можете использовать WebPonize для Mac или Webpconv для Windows. Оба этих плагина позволяют выполнять конвертации JPEG в WebP или PNG в WebP.

Также в WordPress можно использовать SFTP для прямой загрузки файлов WebP в папку uploads, минуя медиа-библиотеку.

Пакетное преобразование WebP-изображений для WordPress

Также можно использовать плагин Smush Pro для загрузки WebP-версий всех изображений сайта с помощью CDN. Данный плагин оставляет исходные изображения нетронутыми и выполняет преобразование форматов перед передачей. Это означает, что CDN Smush Pro не изменяет ваши изображения напрямую.

Если вы отключите опцию преобразования, то сервер не будет конвертировать изображения в формат WebP. В результате сайт вернется к исходным форматам изображений, которые использовались при загрузке.

Как предоставлять изображения в формате следующего поколения

Некоторые плагины для оптимизации  только конвертируют изображения в WebP, но не предоставляют их браузеру пользователя в поддерживаемом формате.

Плагин Smush Pro конвертирует изображения в формат WebP в WordPress и предоставляет их совместимым браузерам. Другие варианты решения проблемы:

1. Использование JavaScript для определения поддержки WebP

Можно написать собственный код, который будет декодировать WebP- изображение. Если тест пройден успешно, можно отправлять клиенту другие WebP- изображения. Вот один из способов сделать это.

Также можно использовать JavaScript-библиотеку Modernizer. Она также определяет поддержку WebP браузером.

2. Использование заголовков accept

Во время посещения сайта браузер отправляет заголовок запроса accept. В нем указано, какие форматы изображений он может принимать с веб-сервера.

Это метод, используемый CDN Smush Pro для определения того, какие браузеры могут принимать WebP-изображения.

3. Редактирование файла .htaccess в WordPress

Файл .htaccess находится в корневом каталоге сайта. В WordPress он используется для перезаписи URL. С его помощью можно добавить поддержку расширения .webp.

Редактирование файла .htaccess в WordPress

Вот так обычно выглядит файл .htaccess в WordPress

Например, в коде Винсента Орбека, размещенном на GitHub файл .htaccess изменен соответствующим образом. В результате URL-адреса JPEG и PNG- изображений изменяются, если в той же папке есть их WebP-версия и если браузер поддерживает формат WebP. В этом случае ответственность за предоставление правильного изображения ложится на веб-сервер Apache.

4. Предоставляйте различные размеры и форматы изображений с помощью HTML 5

Одним из лучших способов предоставления WebP-изображений является элемент. HTML5 <picture>. Он используется для передачи различных изображений, доступных для выбора браузером.

Элемент <picture> можно использовать не только для предоставления форматов, но и различных размеров изображений для мобильных и Retina устройств. Посмотрите на этот пример.

Обычно HTML- код для представления изображения выглядит примерно так:

<img src="image.jpg" alt="my image" width="100" height="100" />

Но код элемента <picture>  намного объемнее:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="my image" width="100" height="100">
</picture>

Тег <img> вложен в элемент <picture>. Браузеры, которые не поддерживают WebP, вернутся к изображению, указанному в элементе <img>.

Как предоставлять изображения следующего поколения с помощью Smush Pro

Более простой способ конвертировать изображения в формат WebP и предоставлять их совместимым браузерам – это использование плагина Smush Pro.

Сначала нужно активировать CDN Smush Pro. Для этого в настройках плагина Smush перейдите в раздел CDN и нажмите кнопку Get StartedНачать»).

Как предоставлять изображения следующего поколения с помощью Smush Pro

CDN Smush включена в Smush Pro

Затем в настройках CDN активируйте плагин.

Как предоставлять изображения следующего поколения с помощью Smush Pro - 2

Это было просто

Если вы хотите протестировать этот плагин, подпишитесь на бесплатный 30-дневный пробный доступ к Smush Pro.

Займитесь оптимизацией

Тяжелые изображения являются причиной снижения скорости работы сайта. WebP-изображения позволяют решить эту проблему.

Пожалуйста, оставьте свои комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!

Дайте знать, что вы думаете по данной теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!

Сергей Бензенкоавтор-переводчик статьи «How to Serve Images in Next-Gen Formats with WordPress»