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

• По сравнению с размером нормального 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' );

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

Источник:

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