Как в 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- изображения. Для этого понадобится решение, которое будет:
- Использовать конвертер WebP для преобразования существующих изображений в формат WebP.
- Определяет, поддерживает ли браузер пользователя формат WebP.
- Предоставлять изображения в формате 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.
Вот так обычно выглядит файл .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 («Начать»).
CDN Smush включена в Smush Pro
Затем в настройках CDN активируйте плагин.
Это было просто
Если вы хотите протестировать этот плагин, подпишитесь на бесплатный 30-дневный пробный доступ к Smush Pro.
Займитесь оптимизацией
Тяжелые изображения являются причиной снижения скорости работы сайта. WebP-изображения позволяют решить эту проблему.
Данная публикация представляет собой перевод статьи «How to Serve Images in Next-Gen Formats with WordPress» , подготовленной дружной командой проекта Интернет-технологии.ру