Как использовать WebP в WordPress

Что такое WebP? Это лучший формат изображения, о котором никто не слышал, но он скоро изменится.

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

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

GIF были изобретены в 1987 году. Первый стандарт JPEG был выпущен в 1992 году, а PNG стал Рекомендацией W3C в октябре 1996 года.

JPEG 2000, JPEG XR и WebP — это современные форматы изображений с превосходными возможностями сжатия и превосходным качеством. Это означает, что они создают намного меньшие файлы изображений, так что вы можете значительно улучшить скорость страниц, используя форматы следующего поколения.

WebP является самым экономичным и обычно обеспечивает сжатие на 30% больше, чем JPEG и JPEG 2000.

Что такое WebP?

WebP — это графический формат Google с открытым исходным кодом. Они используют расширение файла .webp

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

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

Изображения WebP также универсальны, потому что они имеют возможности GIF, JPEG и PNG в одном формате. Вы сможете оптимизировать и упростить. 

WebP поддерживает следующее:

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

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

Непосредственное сравнение различных форматов файлов смотрите здесь. 

Бесплатный WebP

Фактически, если вы недавно использовали Google PageSpeed ​​Insights, вы, возможно, заметили сообщение о возможности « Служить изображениям в форматах следующего поколения ». Это способ Google подтолкнуть вас к принятию изображений WebP. (Если в Google PageSpeed ​​Insights появляется сообщение «изображения правильного размера», попробуйте масштабировать изображения.)

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

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

Существует несколько способов обойти эти проблемы раннего внедрения в WordPress, чтобы вы могли начать использовать изображения WebP. Для этого нам понадобится решение, которое будет:

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

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

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

Хотя вы можете конвертировать изображения в форматы следующего поколения перед загрузкой в ​​медиатеку WordPress, это не практично, если у вас много изображений.

Если вам нужно пойти по этому пути (возможно, вы хотите проверить производительность различных типов изображений), вы можете использовать конвертер WebP, такой как image.online-convert.com/convert-to-webp . Вы просто загрузите файл JPEG, PNG или GIF, подождите, пока он создаст WebP, а затем загрузите новое изображение.

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

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

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

Для удобства вы также можете разрешить WebP в медиатеке WordPress , изменив файл functions.php вашего сайта.

Массовое преобразование изображений WebP для WordPress

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

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

Smush Pro также дает вам возможность конвертировать изображения в другие папки, чтобы вы могли оптимизировать фоновые изображения и иконки вашей темы, например.

Вы также можете использовать командную строку. 

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

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

Smush Pro заботится об обоих: конвертирует в формат WebP в WordPress и предоставляет его совместимым браузерам, чтобы вы могли пропустить всю эту ерунду.

1. Используйте JavaScript для определения поддержки WebP

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

Вы также можете использовать библиотеку JavaScript, такую ​​как Modernizer, которая почти так же обнаруживает поддержку WebP .

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

2. Используйте accept headers браузера

Браузер посетителя отправит заголовок запроса «принять», указывающий, какие форматы изображений он будет принимать с веб-сервера.

Если браузер указывает, что он принимает изображения WebP, веб-сервер знает, что он может безопасно отправлять WebP.

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

3. Измените файл Hypertext Access (.htaccess) в WordPress.

Файл .htaccess находится в корневом каталоге и является уникальным файлом по нескольким причинам:

1. Он начинается с точки (.), Означающей, что это скрытый файл. Вы не увидите его, если не сделали скрытые файлы видимыми
2. У него нет расширения файла
3. Если вы допустите ошибку при редактировании, ваш сервер может серьезно работать со сбоями, поэтому редактируйте его, только если вы знаете, что делаете!

В WordPress этот файл обычно используется для перезаписи URL. В этом случае URL-адрес изображения изменяется и добавляется расширение .webp.

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

4. Обслуживание нескольких размеров и форматов с HTML 5

Одним из лучших способов предоставления изображений WebP является использование браузера для выбора лучшего изображения и использование <picture>элемента HTML5 для передачи различных изображений, доступных для выбора браузером. Вы можете использовать этот <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>элементе. Фактически, <img>это требование (или изображение не будет отображаться), и оно должно отображаться последним.

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

Есть более простой способ конвертировать ваши изображения в WebP и предоставлять их совместимым браузерам с помощью Smush Pro.

Сначала вам нужно активировать Smush Pro CDN. В настройках Smush, перейдите в раздел CDN и нажмите кнопку Get Started.

После активации CDN прокрутите вниз до преобразования WebP в настройках CDN и включите.