WebP это современный формат сжатия изображений, который позволяет, при правильных настройках и уровнях сжатий, уменьшить размер файлов изображений. Развивается при поддержке Google.
В этой заметке, расскажу как применить данный формат на сайте, под управлением Битрикс.
В этой заметке, расскажу как применить данный формат на сайте, под управлением Битрикс. Однако, способ подойдет для любого сайта, на любой системе управления и без нее.
Что такое WebP
Изображения WebP в среднем на 26 % меньше по сравнению с PNG, и на 25-34 % меньше по сравнению с JPEG. Формат появился в 2010 году и с тех пор разрабатывается Google. WebP основан на алгоритме сжатия ключевых кадров видео-кодека VP8. Новый формат также поддерживает прозрачность.
При сжатии с потерями в WebP применяется предиктивное кодирование, при котором значения соседних пиксельных блоков используются для предсказания значения нужного пиксельного блока, а затем кодируется разница.
Формат изображений WebP позволит существенно уменьшить размер веб-страницы, но учитывая его ограниченную поддержку необходимо содержать копии всех изображений в нескольких форматах.
Поддержка WebP браузерами
WebP уже поддерживается в Chrome, Opera и прочих браузерах на основе движка Chromium (в скором будущем и Edge). Для остальных браузеров отдается оригинал изображения в jpeg/png формате. Либо, можно использовать библиотеку WebPJS.
Использование WebP на веб-сервере c работающим сайтом
Итак: имеем работающий магазин под управлением 1С-Битрикс, который работает на веб сервере под управлением centOS-7 (стандартное Битрикс веб окружение)
Наша задача, конвертировать, в WebP, имеющиеся изображения всех товаров и прочие изображения хранящиеся в директории (и ее поддиректориях) upload
Сначала устанавливаем утилиту cwebp - конвертирует изображения в WebP. В терминале выполняем команду
yum install libwebp-tools
Далее, в директории /root/ создаем скрипт webpconverter.sh. Данный скрипт будет рекурсивно проходиться по директории upload и конвертировать все найденные изображения. При этом, он создаст копии изображений в формате .webp рядом с оригиналами. То есть, не удалит оригиналы.
Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой
#!/usr/bin/env bash
# converting JPEG images
find /home/bitrix/ext_www/bxstory.ru/upload/ -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 /home/bitrix/ext_www/bxstory.ru/upload/ -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;' {} \;
Далее проходим в терминал и делаем этот файл исполняемым
chmod +x /root/webpconverter.sh
И запускаем его. Предварительно, на всякий случай, сделайте полную резервную копию сайта
/root/webpconverter.sh
Собственно, начнется процесс конвертации. Длительность зависит от количества изображений и глубины их вложенности. Ну и, производительность сервера тоже имеет место быть. Для примера: на сервере за 250 рублей, от simplecloud заняло около получаса. На сайте 15 000 товаров, у каждого по 3-4 картинки.
Данный скрипт, если у Вас постоянная текучка товаров, можно повесить на cron и выполнять, раз в несколько суток.
Конфигурация nginx для отдачи WebP
После того как картинки сконвертируются, нужно сконфигурировать веб сервер nginx. Так, что бы он отдавал .webp изображения, при их наличии и оригиналы если .webp вариантов нет (или не поддерживается браузером).
Для этого открываем файл виртуального хоста. В моем случае он находится по пути /etc/nginx/bx/site_available/bx_ext_ssl_bxstory.ru.conf
И сразу, после указания правила server_name_in_redirect off; дописываем
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|woff2|webp)$
{
if ( $http_accept ~* webp ) {
set $webp "A";
}
if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
set $file_without_ext $1;
}
if ( -f $file_without_ext.webp ) {
set $webp "${webp}E";
}
if ( $webp = AE ) {
add_header Vary Accept;
rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;
}
expires 365d;
}
И перезапускаем nginx
service nginx restart
В общем-то и все. на всякий, проверяем что все в порядке. С точки зрения исходного кода, картинки все также будут с расширениями jpeg/png.
Но в инспекторе, на вкладке Network, должно показать Type - webp
