Создание и вывод изображений WebP для ускорения себ-сайта

Автор выбрал фонд Apache Software Foundation для получения пожертвования в рамках программы Write for DOnations.

Введение

WebP — открытый формат изображений, разработанный компанией Google в 2010 году на основе видеоформата VP8. С тех пор количество веб-сайтов и мобильных приложений с использованием формата WebP значительно выросло. Как Google Chrome, так и Opera поддерживают оригинальный формат WebP, и поскольку на эти браузеры приходится около 74% всего веб-трафика, пользователи могут получать доступ к веб-сайтам быстрее, если на них используются изображения WebP. Также имеются планы внедрения WebP в Firefox.

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

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

Предварительные требования

Работа с изображениями WebP не требует конкретного дистрибутива, но мы продемонстрируем, как работать с соответствующим программным обеспечением на Ubuntu 16.04 и CentOS 7. Для прохождения данного обучающего руководства вам потребуется следующее:

• Сервер, созданный пользователем sudo без прав root. Для настройки сервера Ubuntu 16.04 следуйте нашему руководству по начальной настройке сервера Ubuntu 16.04. Если вы хотите использовать CentOS, то можете настроить сервер CentOS 7 при помощи нашего «Обучающего руководства по начальной настройке сервера CentOS 7».

• Apache, установленный на сервере. Если вы используете Ubuntu, то можете следовать первому шагу руководства «Установка стека Linux, Apache, MySQL, PHP (LAMP) на Ubuntu 16.04». Если вы используете CentOS, следуйте первому шагу «Установка стека Linux, Apache, MySQL, PHP (LAMP) на CentOS 7». Обязательно измените настройки брандмауэра для разрешения трафика HTTP и HTTPS.

• mod_rewrite, установленный на сервере. Если вы используете Ubuntu, то можете следовать нашему руководству «Как переписывать URL-адреса при помощи mod_rewrite для Apache на Ubuntu 16.04». По умолчанию mod_rewrite установлен и активирован на CentOS 7.

Шаг 1 — Установка cwebp и подготовка директории изображений

В этом разделе мы установим программное обеспечение для преобразования изображений и создания директории с изображениями в качестве средства тестирования.

На Ubuntu 16.04 можно установить `cwebp (это утилита, которая позволяет сжимать изображения в формат .webp),``` введя следующее:

sudo apt-get update
sudo apt-get install webp

В CentOS 7 введите:

sudo yum install libwebp-tools

Для создания новой директории изображений, которая называется webp, в корневой директории Apache (находится по умолчанию в /var/www/html), введите:

sudo mkdir /var/www/html/webp

Дайте права на данную директорию вашему пользователю sammy без прав root:

sudo chown sammy: /var/www/html/webp

Для тестирования команд можно скачать бесплатные изображения JPEG и PNG, используя wget. Этот инструмент установлен по умолчанию в Ubuntu 16.04; если вы используете CentOS 7, можно установить его, введя следующее:

sudo yum install wget

Затем загрузите тестовые изображения, используя следующие команды:

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

Основная часть вашей работы на следующем шаге будет находиться в директории /var/www/html/webp, в которую можно перейти, введя:

cd /var/www/html/webp

С имеющимися тестовыми изображениями, при помощи веб-сервера Apache, модуля mod_rewrite и утилиты cwebp вы готовы начинать преобразование изображений.

Шаг 2 — Сжатие файлов изображений с помощью cwebp

Показ изображений .webp посетителям сайта требует версий .webp файлов изображений. На этом шаге вы преобразуете изображения JPEG и PNG в формат .webp, используя cwebp. Общий синтаксис команды выглядит следующим образом:

cwebp image.jpg -o image.webp

Параметр -o указывает путь к файлу WebP.

Поскольку вы все еще находитесь в директории /var/www/html/webp, можно запустить следующую команду для преобразования изображений image1.jpg в image1.webp и image2.jpg​​​ в ​​​image2.webp​​​​:

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

Если установить параметр качества -q равным 100, сохраняется 100% качества изображения; если он не указан, значение по умолчанию составляет 75.

Затем проверьте размер изображений JPEG и WebP, используя команду ls. Параметр -l показывает длинный формат списка, который включает размер файла, а параметр -h обеспечивает, что ls выводит на печать изображения читаемых размеров:

ls -lh image1.jpg image1.webp image2.jpg image2.webp

Output
-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

Данные, выводимые командой ls, показывают, что размер image1.jpg составляет 7,4 Mбайт, а размер image1.webp — 3,9 Mбайт. То же самое относится к изображениям image2.jpg​​​​​​ (16 Mбайт) и image2.webp (7 Mбайт). Эти файлы почти в два раза меньше первоначального размера!

Для сохранения полных исходных данных этих изображений при сжатии можно использовать параметр -lossless вместо параметра -q. Это наилучший вариант сохранения качества изображений PNG. Для преобразования загруженного изображения PNG из шага 1 введите:

cwebp -lossless logo.png -o logo.webp

Следующая команда показывает, что размер изображения WebP без потерь (60 Кбайт) примерно в два раза меньше размера первоначального изображения PNG (116 Кбайт):

ls -lh logo.png logo.webp

Output
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

Преобразованные изображения WebP в директории /var/www/html/webp на 50% меньше исходных JPEG и PNG. На практике степени сжатия могут отличаться в зависимости от определенных факторов: уровень сжатия исходного изображения, формат файла, тип преобразования (с потерями или без потерь), процент качества и операционная система. При преобразовании большего числа изображений можно видеть изменения коэффициентов преобразования, связанные с этими факторами.

Шаг 3 — Преобразование изображений JPEG и PNG в директории

Написание скрипта упрощает процесс преобразования, т.к. устраняет ручное преобразование. Теперь напишем скрипт преобразования, который находит файлы JPEG и преобразовывает их в формат WebP с 90% качеством, а также преобразовывает файлы PNG в изображения WebP без потерь.

Используя nano или предпочитаемый вами редактор, создайте скрипт webp-convert.sh в домашней директории вашего пользователя:

nano ~/webp-convert.sh

Первая строка скрипта будет выглядеть следующим образом:

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \)

Эта строка включает следующие компоненты:

• find: Эта команда будет искать файлы в конкретной директории.
• $1: этот позиционный параметр указывает путь к директории изображений, взятый из командной строки. В конечном счете, он делает местоположение директории менее зависимым от местоположения скрипта.
• -type f: данный параметр указывает команде find искать только обычные файлы.
• -iname: данный тест соспоставляет имена файлов по заданной схеме. Нечувствительный к регистру тест -iname указывает команде find искать любое имя файла, заканчивающееся на .jpg (*.jpg) или .jpeg (*.jpeg).
• -o: этот логический оператор указывает команде find вывести файлы, соответствующие первому тесту -iname (-iname "*.jpg") **или **второму (iname "*.jpeg").
• (): скобки вокруг этих тестов, вместе с оператором -and, обеспечивают, что первый тест (т.е. -type f) всегда выполняется.

Вторая строка скрипта будет преобразовывать изображения в формат WebP, используя параметр -exec. Общий синтаксис этого параметра — -exec command {} \;​​. Строка {} заменяется каждым файлом, который обрабатывает команда, а символ ; указывает команде find, где заканчивается команда:

find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c 'commands' {} \;

В данном случае для параметра -exec потребуется несколько команд для поиска и преобразования изображений:

• bash: эта команда будет выполнять небольшой скрипт, создающий версию .webp файла, если она отсутствует. Этот скрипт будет передаваться в bash как строка благодаря опции -c.
• 'commands': этот заполнитель — скрипт, который будет создавать версии .webp ваших файлов.

Скрипт в 'commands' будет выполнять следующие функции:

• Создавать переменную webp_path.
• Проверять наличие версии .webp файла.
• Создавать файл, если он отсутствует.

Малый скрипт выглядит следующим образом:

...
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;

Элементы этого малого скрипта включают в себя следующее:

• webp_path: эта переменная будет создана с помощью sed и соответствующего имени файла из команды bash, обозначенного по позиционному параметру $0. here string (<<<) будет передавать это имя в sed.
• if [ ! -f "$webp_path" ]: данный тест будет определять наличие файла под названием "$webp_path", используя логический оператор not (!).
• cwebp: эта команда будет создавать файл, если он отсутствует, используя параметр -q, чтобы не выводить результат.

С этим малым скриптом вместо заполнителя 'commands', полный скрипт преобразования изображений JPEG теперь будет выглядеть следующим образом:

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

Для преобразования изображений PNG в WebP мы будем использовать тот же подход, с двумя отличиями: Во-первых, шаблон -iname в команде find будет "*.png". Во-вторых, команда преобразования будет использовать параметр -lossless вместо параметра качества -q.

Завершенный скрипт выглядит следующим образом:

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
  cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

Сохраните файл и выйдите из редактора.

Затем проверим скрипт webp-convert.sh на практике, используя файлы в директории /var/www/html/webp. Убедитесь, что файл скрипта является исполняемым, запустив следующую команду:

chmod a+x ~/webp-convert.sh

Запустите скрипт в директории изображений:

./webp-convert.sh /var/www/html/webp

Ничего не произошло! Это потому, что мы уже преобразовали эти изображения на шаге 2. Далее скрипт webp-convert будет преобразовывать изображения при добавлении нами новых файлов или удалении версий .webp. Чтобы увидеть, как это работает, удалите файлы .webp, созданные нами на шаге 2:

rm /var/www/html/webp/*.webp

Удалив все изображения .webp, снова выполните скрипт, чтобы убедиться, что он работает:

./webp-convert.sh /var/www/html/webp

Команда ls подтвердит, что скрипт успешно преобразовал изображения:

ls -lh /var/www/html/webp

Output
-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42 logo.webp

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

Шаг 4 — Просмотр файлов изображений в директории

На этом шаге мы создадим новый скрипт для просмотра изменений в директории изображений и автоматического преобразования вновь созданных изображений.

Создание скрипта, который следит за нашей директорией изображений, может решить некоторые проблемы со скриптом webp-convert.sh в ходе его написания. Например, данный скрипт не будет идентифицировать, переименовали ли мы изображение. Предположим, у нас есть изображение foo.jpg, мы выполняем webp-convert.sh, переименовываем этот файл в bar.jpg, а затем снова выполняем webp-convert.sh — теперь у нас есть идентичные файлы .webp (foo.webp и bar.webp). Для решения этой проблемы, и чтобы не выполнять скрипт вручную, добавим watchers в другой скрипт. Наблюдатели (watchers) наблюдают за конкретными файлами или директориями и запускают команды в ответ на эти изменения.

Команда inotifywait будет настраивать наблюдатели (watchers) в нашем скрипте. Эта команда является частью inotify-tools — пакета инструментов командной строки, который обеспечивает простой интерфейс подсистемы ядра inotify. Чтобы установить его на Ubuntu 16.04, введите:

sudo apt-get install inotify-tools

В CentOS 7 пакет ​​​inotify-tools доступен в хранилище EPEL. Установите хранилище EPEL и пакет ​​​inotify-tools, используя следующие команды:

sudo yum install epel-release
sudo yum install inotify-tools

Далее создайте скрипт webp-watchers.sh в домашней директории вашего пользователя с помощью nano:

nano ~/webp-watchers.sh

Первая строка скрипта будет выглядеть следующим образом:

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

Эта строка включает следующие элементы:

• inotifywait: эта команда следит за изменениями в определенной директории.
• -q: данный параметр будет указывать команде inotifywait ограничивать свою активность и не генерировать много результатов.
• -m: данный параметр будет указывать команде inotifywait работать без ограничения времени и не совершать выход после получения одного события.
• -r: данный параметр будет настраивать наблюдатели рекурсивно, наблюдая за заданной директорией и всеми ее поддиректориями.
• --format: данный параметр указывает команде inotifywait следить за изменениями с помощью имени события и следующего за ним пути файла. События, за которыми мы хотим наблюдать: close_write (инициируется, когда файл создается и полностью записывается на диск), moved_from и moved_to (инициируется, когда файл перемещается) и delete (инициируется, когда файл удаляется).
• $1: этот параметр позиционирования хранит путь измененных файлов.

Далее добавим команду grep, чтобы установить, являются ли наши файлы изображениями JPEG или PNG. Параметр -i будет указывать команде grep игнорировать регистр, -E будет указывать, что grep должна использовать расширенные регулярные выражения, а --line-buffered будет указывать grep передавать совпавшие строки в цикл while:

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '\.(jpe?g|png)$' --line-buffered

Далее создадим цикл while с командой read. read будет обрабатывать событие, которое обнаружила команда inotifywait, и присваивать его переменной $operation, а путь обработанного файла — переменной $path:

...
| while read operation path; do
  # commands
done;

Объединим этот цикл с остальным скриптом:

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
  # commands
done;

После того, как цикл while проверил событие, команды внутри цикла будут совершать следующие действия, в зависимости от результата:

• Создайте новый файл WebP, если новый файл ​​изображения был создан или перенесен в целевую директорию.
• Удалите файл WebP, если соответствующий файл изображения был удален или перенесен из целевой директории.​​

Внутри цикла есть три основных раздела. Переменная webp_path будет хранить путь к версии .webp рассматриваемого изображения:

...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

Далее скрипт проверит, какое событие произошло:

...
if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
  # commands to be executed if the file is moved or deleted
elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
  # commands to be executed if a new file is created
fi;

Если файл был перенесен или удален, скрипт будет проверять наличие версии .webp. Если она существует, скрипт будет удалять ее с помощью rm:

...
if [ -f "$webp_path" ]; then
  $(rm -f "$webp_path");
fi;

Для вновь созданных файлов сжатие будет осуществляться следующим образом:

• Если соответствующий файл будет изображением PNG, скрипт будет использовать сжатие без потерь.
• В противном случае скрипт будет использовать сжатие с потерями с помощью параметра -quality.

Добавим команды cwebp, которые будут выполнять эти действия, в скрипт:

...
if [ $(grep -i '\.png$' <<< "$path") ]; then
  $(cwebp -quiet -lossless "$path" -o "$webp_path");
else
  $(cwebp -quiet -q 90 "$path" -o "$webp_path");
fi;

Целиком файл webp-watchers.sh будет выглядеть следующим образом:

#!/bin/bash
echo "Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 \
| grep -i -E '\.(jpe?g|png)$' --line-buffered \
| while read operation path; do
  webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
  if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
    if [ -f "$webp_path" ]; then
      $(rm -f "$webp_path");
    fi;
  elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
     if [ $(grep -i '\.png$' <<< "$path") ]; then
       $(cwebp -quiet -lossless "$path" -o "$webp_path");
     else
       $(cwebp -quiet -q 90 "$path" -o "$webp_path");
     fi;
  fi;
done;

Сохраните и закройте файл. Не забудьте сделать его исполняемым:

chmod a+x ~/webp-watchers.sh

Выполним этот скрипт в директории /var/www/html/webp в фоновом режиме, используя &. Также перенаправим стандартный результат и стандартную ошибку в ~/output.log, чтобы хранить результат в легкодоступном месте:

./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

На данный момент вы преобразовали файлы JPEG и PNG в директории /var/www/html/webp в формат WebP, а также настроили наблюдатели для выполнения этих действий с помощью скрипта webp-watchers.sh. Теперь пора изучить варианты показа изображений WebP посетителям вашего веб-сайта.

Шаг 5 — Показ изображений WebP посетителям сайта с помощью элементов HTML

На этом шаге мы расскажем, как показывать изображения WebP с элементами HTML. На данный момент в директории /var/www/html/webp должны быть версии .webp каждого тестового изображения JPEG и PNG . Теперь мы можем показывать их в поддерживаемых браузерах с помощью элементов HTML5 (<picture>) или модуля mod_rewrite Apache. На этом шаге мы используем элементы HTML.

Элемент <picture> позволяет включить изображения напрямую в веб-страницы и задать несколько источников изображений. Если браузер поддерживает формат WebP, он будет загружать версию файла .webp вместо оригинального, что приведет к более быстрой загрузке веб-страниц. Следует отметить, что элемент <picture> широко поддерживается в современных браузерах, поддерживающих формат WebP.

Элемент <picture> представляет собой контейнер с элементами <source> и <img>, указывающими на конкретные файлы. Если мы используем элемент <source> для указания на изображение .webp, браузер сможет его обработать. В противном случае браузер будет использовать файл изображения, заданный с помощью атрибута src в элементе <img>.

Мы будем использовать файл logo.png из директории /var/www/html/webp, который мы преобразовали в logo.webp, например с помощью элемента <source>. Мы можем использовать следующий код HTML для показа logo.webp в любом браузере, поддерживающем формат WebP, и logo.png в любом браузере, не поддерживающем WebP или элемент <picture>.

Создайте файл HTML в /var/www/html/webp/picture.html:

nano /var/www/html/webp/picture.html

Добавьте в веб-страницу следующий код для показа logo.webp в поддерживающих браузерах с помощью элемента <picture>:

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Site Logo">
</picture>

Сохраните и закройте файл.

Чтобы убедиться, что все работает, перейдите в каталог http://your_server_ip/webp/picture.html. Вы должны увидеть тестовое изображение PNG.

Теперь, когда вы знаете, как показывать изображения .webp напрямую из кода HTML, давайте посмотрим, как автоматизировать этот процесс с помощью модуля mod_rewrite Apache.

Шаг 6 — Показ изображений WebP с помощью mod_rewrite

Если мы хотим оптимизировать скорость нашего сайта, но у нас очень много страниц или слишком мало времени для редактирования HTML, то модуль mod_rewrite Apache поможет нам автоматизировать процесс показа изображений .webp в поддерживаемых браузерах.

Во-первых, создайте файл .htaccess в директории /var/www/html/webp с помощью следующей команды:

nano /var/www/html/webp/.htaccess

Директива ifModule проверит, доступен ли if mod_rewrite; если доступен, то он может быть активирован при помощи RewriteEngine On. Добавьте эти директивы в .htaccess:

<ifModule mod_rewrite.c>
  RewriteEngine On
  # further directives
</IfModule>

Веб-сервер сделает несколько проверок, чтобы установить, когда показывать изображения .webp пользователю. Когда браузер делает запрос, он включает в запрос заголовок, чтобы указать серверу, что именно браузер способен обрабатывать. В случае с WebP браузер будет направлять заголовок Accept, содержащий image/webp. Мы проверим, отправляет ли браузер этот заголовок с помощью RewriteCond, указывающего критерии, которые должны быть сопоставлены для выполнения правила RewriteRule:

...
RewriteCond %{HTTP_ACCEPT} image/webp

Необходимо отфильтровать все, кроме изображений JPEG и PNG. Снова используя RewriteCond, добавьте регулярное выражение (аналогично тому, что мы использовали в предыдущих разделах), чтобы сравнить запрошенную версию URI:

...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

Модификатор (?i) сделает сравнение нечувствительным к регистру.

Чтобы проверить наличие версии .webp файла, используйте RewriteCond еще раз следующим образом:

...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

Наконец, если все предыдущие условия выполнены, RewriteRule перенаправляет запрошенный файл JPEG или PNG в соответствующий файл WebP. Обратите внимание, что это перенаправление redirect происходит при помощи флага -R, а не перезаписи rewrite URI-адреса. Разница между перезаписью и перенаправлением — в том, что сервер будет направлять перезаписанный URI-адрес, не сообщая об этом браузеру. Например, URI-адрес покажет, что расширение файла — .png, но на самом деле это будет файл .webp. Добавьте RewriteRule в файл:

...
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

На данный момент раздел mod_rewrite в файле .htaccess завершен. Но что произойдет, если между вашим сервером и клиентом будет промежуточный сервер кэширования? Он может показать неправильную версию конечному пользователю. Именно поэтому стоит проверить, активирован ли модуль mod_headers, чтобы отправить заголовок Vary:Accept. Заголовок Vary указывает серверам кэширования (например, прокси-серверам), что тип содержания документа варьируется в зависимости от возможностей браузера, запрашивающего документ. Кроме того, ответ будет сгенерирован на основе заголовка Accept в запросе. Запрос с другим заголовком Accept может получить другой ответ. Данный заголовок важен, поскольку не позволяет показывать кэшированные изображения WebP в неподдерживаемых браузерах:

...
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

Наконец, задайте тип MIME изображений .webp как image/webp в конце файла .htaccess, используя директиву AddType. Благодаря этому, изображения будут показаны с правильным типом MIME:

...
AddType image/webp .webp

Это последняя версия нашего файла .htaccess:

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Давайте на практике сделаем то, что мы изучили на этом шаге. Если вы следовали указаниям в предыдущих шагах, то у вас должны быть изображения logo.png и logo.webp в /var/www/html/webp. Мы используем простой элемент <img>, чтобы добавить изображение logo.png на нашу веб-страницу. Создайте новый файл HTML для проверки конфигурации:

nano /var/www/html/webp/img.html

Введите следующий код HTML в файл:

<img src="logo.png" alt="Site Logo">

Сохраните и закройте файл.

При посещении веб-страницы http://your_server_ip/webp/img.html в браузере Chrome вы увидите, что показанное изображение — это версия .webp (попробуйте открыть изображение в новой вкладке). Если вы используете Firefox, то автоматически получите изображение .png.

Заключение

В этом обучающем руководстве мы изучили основные методы работы с изображениями WebP. Мы рассказали, как использовать cwebp для преобразования файлов, а также два варианта показа этих изображений пользователям: элемент HTML5 <picture> и модуль Apache mod_rewrite.

Чтобы настроить скрипты из данного обучающего руководства, можно обратиться к следующим ресурсам:

• Характеристики формата WebP и использование инструментов преобразования описаны подробнее в документации WebP.
• Дополнительные сведения об использовании элемента см. в документации по MDN.
• Чтобы полностью понять, как использовать mod_rewrite, см. документацию.

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