TOC

Как создавать и обслуживать изображения WebP для ускорения вашего сайта

_ Автор выбрал Apache Software Foundation, чтобы получить пожертвование в рамках Write for DOnations program._

Вступление

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

Формат WebP поддерживает сжатие изображений с потерями и без потерь, включая анимацию. Его главное преимущество перед другими форматами изображений, используемыми в Интернете, заключается в значительно меньшем размере файла, что ускоряет загрузку веб-страниц и уменьшает использование полосы пропускания. Использование изображений WebP может привести к увеличению скорости страницы https://blog.chromium.org/2014/03/webp-improves- while-rolling-out-across.html[sizeable]. Если ваше приложение или веб-сайт испытывают проблемы с производительностью или увеличивают трафик, преобразование изображений может помочь оптимизировать производительность страницы.

В этом руководстве вы будете использовать инструмент командной строки + 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

Измените владельца этого каталога на пользователя без полномочий root * sammy *:

sudo chown : /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
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59

Вывод команды + ls + показывает, что размер + image1.jpg + равен 7,4 МБ, а размер + image1.webp + - 3,9 МБ. То же самое касается + image2.jpg + (16M) и + image2.webp + (7M). Эти файлы почти в два раза меньше их оригинального размера!

Чтобы сохранить полные исходные данные изображений во время сжатия, вы можете использовать опцию + -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

Преобразованные изображения 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" \)

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

  • https://www.digitalocean.com/community/tutorials/how-to-use-find-and-locate-to-search-for-files-on-a-linux-vps [+ find +]: эта команда будет искать файлы в указанном каталоге.

  • + $ 1 +: этот позиционный параметр указывает путь к каталогу изображений, взятый из командной строки. В конечном итоге это делает расположение каталога менее зависимым от расположения скрипта.

  • + -type f +: эта опция говорит + find + искать только обычные файлы.

  • + -iname +: этот тест сопоставляет имена файлов с указанным шаблоном. Нечувствительный к регистру тест + -iname + говорит + find + искать любое имя файла, которое заканчивается на + .jpg + (+ *. Jpg +) или + .jpeg + (+ *. Jpeg +). ,

  • + -o +: Этот логический оператор указывает команде + find + перечислить файлы, которые соответствуют первому тесту + -iname + (+ -iname" * .jpg "+) * или * второму (`+ -имя "* .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 +`.

  • + 'команды' +: этот заполнитель является сценарием, который создаст версии ваших файлов для + .webp +.

Скрипт внутри + 'команды' + будет делать следующие вещи:

  • Создайте переменную + 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 +: эта переменная будет создана с использованием https://www.digitalocean.com/community/tutorials/the-basics-of-using-the-sed-stream-editor-to-manipulate-text-in-linux [+ sed +] и соответствующее имя файла из команды + bash +, обозначаемое позиционным параметром + $ 0 +. Here строка (+ <<< +) передаст это имя + sed +.

  • + если [! -f "$ webp_path"] + `: Этот тест установит, существует ли файл с именем + "$ webp_path" + , с использованием логического оператора + not + ( +! + `).

  • + cwebp +: эта команда создаст файл, если он не существует, используя опцию + -q +, чтобы не печатать вывод.

С этим меньшим сценарием вместо заполнителя + 'команды' +, полный сценарий для преобразования изображений 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

Запустите скрипт в каталоге images:

./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
-rw-r--r-- 1 sammy sammy  16M Dec 18  2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59
-rw-r--r-- 1 sammy sammy 116K Jul 18  2017 logo.png
-rw-r--r-- 1 sammy sammy  60K Feb 18 16:42

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

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

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

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

Команда + inotifywait + настроит наблюдателей в нашем скрипте. Эта команда является частью пакета + 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 + (срабатывают, когда файл создается и полностью записывается на диск), + Move_From + и + Move_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`. + readd обработает обнаруженное событие` + 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. На этом этапе должны быть + .webp + версии каждого из тестовых изображений JPEG и PNG в каталоге + / var / www / html / webp +. Теперь мы можем использовать их для поддержки браузеров, использующих либо элементы HTML5 (+ <picture> +), либо модуль Apache + mod_rewrite +. На этом шаге мы будем использовать элементы 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: /// webp / picture.html. Вы должны увидеть тестовое изображение PNG.

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

Шаг 6 - Обслуживание изображений WebP с помощью mod_rewrite

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

Сначала создайте файл + .htaccess + в каталоге + / var / www / html / webp +, используя следующую команду:

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

Директива + ifModule + проверит, доступен ли + 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>

Наконец, в конце файла + .htaccess + установите тип MIME для изображений + .webp + на + image / webp + с помощью директивы + 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

Давайте применим то, что мы сделали на этом этапе. Если вы следовали инструкциям на предыдущих шагах, вы должны иметь изображения + 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">

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

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

Заключение

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

Чтобы настроить сценарии из этого руководства, вы можете взглянуть на некоторые из этих ресурсов:

  • Чтобы узнать больше о функциях формата WebP и о том, как использовать инструменты конвертации, см. Https://developers.google.com/speed/webp/[WebP документацию].

  • Чтобы узнать больше об использовании элемента + <picture> +, см. Его documentation на MDN.

  • Чтобы полностью понять, как использовать + mod_rewrite +, см. Его documentation.

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

Related