Как в 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% меньше.

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

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

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

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

Бесплатный WebP

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

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

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

Как добавить WebP- картинки в WordPress

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

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

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

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

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

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

Как в 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.

Как в 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(«Начать»).

Как в WordPress предоставлять картинки в форматах следующего поколения
CDN Smush включена в Smush Pro

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *