Как в 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 поддерживает:

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

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

Бесплатный WebP

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

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

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

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

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

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

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

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

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.

Например, в коде Винсента Орбека, размещенном на 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 («Начать»).

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

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

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

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

Данная публикация представляет собой перевод статьи «How to Serve Images in Next-Gen Formats with WordPress» , подготовленной дружной командой проекта Интернет-технологии.ру