Как в 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-изображения позволяют решить эту проблему.
Пожалуйста, оставьте свои комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!
Дайте знать, что вы думаете по данной теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!