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

PostedJanuary 7, 2020 2.1k views CentOSApacheUbuntu 16.04

Автор выбрал фонд 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. Для прохождения данного обучающего руководства вам потребуется следующее:

Шаг 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

Примечание. Эти изображения доступны для использования и распространения по лицензиям Creative Commons Attribution-ShareAlike и Public Domain Dedication.

Основная часть вашей работы на следующем шаге будет находиться в директории /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

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

~/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, где заканчивается команда:

~/webp-convert.sh
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-convert.sh
...
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 теперь будет выглядеть следующим образом:

~/webp-convert.sh
# 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.

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

~/webp-convert.sh
#!/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

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

~/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:

~/webp-watchers.sh
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:

~/webp-watchers.sh
...
| while read operation path; do
  # commands
done;

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

~/webp-watchers.sh
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-watchers.sh
...
webp_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";

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

~/webp-watchers.sh
...
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:

~/webp-watchers.sh
...
if [ -f "$webp_path" ]; then
  $(rm -f "$webp_path");
fi;

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

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

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

~/webp-watchers.sh
...
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 будет выглядеть следующим образом:

~/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>:

/var/www/html/webp/picture.html
<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:

/var/www/html/webp/.htaccess
<ifModule mod_rewrite.c>
  RewriteEngine On
  # further directives
</IfModule>

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

/var/www/html/webp/.htaccess
...
RewriteCond %{HTTP_ACCEPT} image/webp

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

/var/www/html/webp/.htaccess
...
RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$

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

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

/var/www/html/webp/.htaccess
...
RewriteCond %{DOCUMENT_ROOT}%1.webp -f

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

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

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

/var/www/html/webp/.htaccess
...
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

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

/var/www/html/webp/.htaccess
...
AddType image/webp .webp

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

/var/www/html/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

Примечание. Можно объединить этот файл .htaccess с другим файлом .htaccess (при наличии). Если вы используете, например, WordPress, то следует скопировать этот файл .htaccess и вставить его в верхней части существующего файла.

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

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

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

/var/www/html/webp/img.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 для изображений значительно сокращает размеры файлов. Это позволяет снизить использование полосы пропускания и быстрее загружать страницы, особенно если на вашем веб-сайте много изображений.

Creative Commons License