Как обслуживать изображения формата WebP в WordPress

Главная » Блог программиста » Как обслуживать изображения в формате WebP в WordPress

Просмотров: 4129

Как обслуживать изображения в формате WebP в WordPress

WebP - это новый формат изображений, разработанный Google в 2010 году (произносится как английское weppy), который используется, как сжатие картинок без потери качества. Он был создан как альтернатива форматам PNG и JPG. С помощью WebP можно создавать изображения гораздо меньших размеров, чем традиционные форматы JPG и PNG без ухудшения качества картинки. Google разрабатывает и формат, и программное обеспечение, связанное с WebP по лицензии BSD.. Если вы используете WordPress, вы можете легко работать с изображениями в WebP, применяя и изменяя основные настройки. Поэтому рекомендуем вам подготовиться к напряженной работе с терпением.
 
В этой статье мы покажем, что добавлять изображения в формате WebP можно без использования какого-либо плагина, достаточно для этого автоматического обслуживания на поддерживаемом веб-браузере. WebP в настоящее время поддерживается в Google ChromeOpera, Mozilla Firefox, Яндекс и некоторых браузерах Android. Согласно статистике, вы можете обнаружить, что более 49% людей используют эти поддерживаемые типы контента браузера. Так что, самое время использовать эту технику.
Каковы основные преимущества использования изображения в формате WebP?
  • По сравнению с размером нормального JPG или PNG изображения, размер изображения WebP может служить в малых байтах. Следовательно, ваши изображения будут загружаться быстрее.
  • WebP сжимает изображения без потерь на 26% лучше, чем PNG.
  • WebP сжимает изображения с потерями лучше, чем JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM)
  • WebP поддерживает прозрачность без потерь (известную, как альфа-канал) при увеличении размера всего лишь на 22%.

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

Шаг 1: Добавление формата WebP в документ HTML

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

  1. Перейдите по ссылке на сайт online-convert.com/convert-to-webp
  2. Добавьте изображения и нажмите на опцию «конвертировать». Ваши изображения в формате WebP будут загружены.
  3. Теперь отредактируйте необработанный HTML-код, в котором отображается обычное изображение.
  4. Так же можно использовать программку для конвертирования WebPconv. С ней можно работать прямо на компьютере, загрузив сразу несколько картинок, а затем нажать на play. Программа создаст новую папку с уже обработанными изображениями.

Теперь можно их будет загружать на сайт. Но сначала перейдём шагу №2.

Шаг 2: Настройка параметров сервера

Просто еще один шаг, вам нужно настроить некоторые настройки веб-сервера Apache через .htacccess, так браузер и веб-сервер может относиться к нему должным образом, как и все другие изображения.

Добавим следующее в файл .htaccess:

# Serve Images with correct Mime Type
AddType image/webp .webp
# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

 

Пожалуйста, обратите внимание: WordPress по умолчанию не поддерживает загрузку изображения в формате WebP. Таким образом, необходимо решить  проблему, добавив этот код в файл function.php, который находится в папке вашей темы:

function webp_upload_mimes( $existing_mimes ) {
      // add webp to the list of mime types
      $existing_mimes['webp'] = 'image/webp';
      // return the array back to the function with our added mime type
      return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

 

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

Источник:


Друзья! Приглашаем вас к обсуждению. Если у вас есть своё мнение, напишите нам в комментарии.