Автор выбрал фонд 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.
В этом разделе мы установим программное обеспечение для преобразования изображений и создания директории с изображениями в качестве средства тестирования.
На 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
вы готовы начинать преобразование изображений.
Показ изображений .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. На практике степени сжатия могут отличаться в зависимости от определенных факторов: уровень сжатия исходного изображения, формат файла, тип преобразования (с потерями или без потерь), процент качества и операционная система. При преобразовании большего числа изображений можно видеть изменения коэффициентов преобразования, связанные с этими факторами.
Написание скрипта упрощает процесс преобразования, т.к. устраняет ручное преобразование. Теперь напишем скрипт преобразования, который находит файлы 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 для показа посетителям. На следующем шаге рассмотрим автоматизацию преобразования новых изображений.
На этом шаге мы создадим новый скрипт для просмотра изменений в директории изображений и автоматического преобразования вновь созданных изображений.
Создание скрипта, который следит за нашей директорией изображений, может решить некоторые проблемы со скриптом 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_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;
Для вновь созданных файлов сжатие будет осуществляться следующим образом:
-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 посетителям вашего веб-сайта.
На этом шаге мы расскажем, как показывать изображения 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.
Если мы хотим оптимизировать скорость нашего сайта, но у нас очень много страниц или слишком мало времени для редактирования 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
Примечание. Можно объединить этот файл .htaccess
с другим файлом .htaccess
(при наличии). Если вы используете, например, WordPress, то следует скопировать этот файл .htaccess
и вставить его в верхней части существующего файла.
Давайте на практике сделаем то, что мы изучили на этом шаге. Если вы следовали указаниям в предыдущих шагах, то у вас должны быть изображения 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
.
Чтобы настроить скрипты из данного обучающего руководства, можно обратиться к следующим ресурсам:
элемента
см. в документации по MDN.mod_rewrite
, см. документацию.Использование формата WebP для изображений значительно сокращает размеры файлов. Это позволяет снизить использование полосы пропускания и быстрее загружать страницы, особенно если на вашем веб-сайте много изображений.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Спасибо за перевод. Статья очень помогла. Только поправьте заголовок: себ-сайта на веб-сайта