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
Заметка написана и дополнена, на базе одной из тем форума, на официальном сайте Битрикс.
Цитата | ||
---|---|---|
Максим Иванов написал:
|
Ввиду наличия связки apache + nginx, настроили отдачу изображений *.webp через конфигурационный файл .htaccess. Акцент делали на настройку под bitrix и папку upload. Код ниже добавили в файл .htaccess в корне битрикс сайта:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (.*)(\.(jpe?g|png))$
RewriteCond %{DOCUMENT_ROOT}/%1\.webp -f
RewriteRule .* %1\.webp [L,T=image/webp]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

Цитата |
---|
i92hqvpz2j08@mail.ru написал: Михаил подскажите, а как бороться с уже не актуальными файлами .webp - в нашем интернет магазине очень часто меняется ассортимент, удаляются товары. .Jpeg файлы удаляются средствами битрикс, а вот копии в формате WebP созданные скриптом webpconverter.sh остаются. Как автоматизировать их удаление например запуском раз в сутки всех, либо только не актуальных, файлов webp? |
Почитайте про find в unix, сходу не помню точный синтаксис
Примерно (сразу не пробуйте, могу ошибаться)
Код |
---|
find /home/ПУТЬ_ДО_UPLOAD -name '*.webp' -type f -delete |

Но при запуске ошибка No such file or directory
Если сделать файл сделать не исполнительным то ошибка Permission denied
начал со статьи по ускорению и параллельно подключил наконец page speed
если Вы не против, поделюсь моими находками по теме.
использовал аналогичный скрипт только с указанием пути в параметре:
Скрытый текст | ||
---|---|---|
|
команда в консоли приобретает в моем случае вид:
Код |
---|
./webp-convert.sh /home/www/shared/upload |
Скрытый текст | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
1. Воспользоваться редактором Vi. Открываем файл
|
И напоследок, если вы накосячили и нужно удалить все файлы по расширению:
для CentOS
Код |
---|
find . -type f -name '*.webp' -exec rm {} + |
поэтому разобью ссылку - Вы удалите если чтобы было правильно:
Скрытый текст | ||||
---|---|---|---|---|
по ошибке:
|
надеюсь в таком виде ссылки не посчитает за сквозняки

Вопрос
Цитата |
---|
Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой |
В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте?

Цитата | ||
---|---|---|
Pechnikmsk написал: Благодарю за полезную и необходимую информацию. Вопрос
В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте? |
1. у вас в nginx в локейшене нет /upload а картинки не только там лежат, а у вас обжимаются они только в этом месте, притом самые основные лежат то в ресайз кеш, именно они всегда требуют переобжатия.
2. нет проверки на наличие этой картинки, то есть по идее вы должны вначале проверить нет ли там 404 а потом отдавать картинку, это опять же к nginx а нужно это по пункту 4.
3. оптимизировать код
Код |
---|
find /home/bitrix/ext_www/site.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(jpg\|jpeg\|JPG\|JPEG\)" |
4. регистронезависимость, мало того что jpeg и jgp так и может быть Jpeg JGEG и тд.
так что вообще можно сделать вот так
Код |
---|
find -type f -regex ".*\.\(j\|J\)\(p\|P\)\(e\|E\|\)\(g\|G\)" |
Остальная часть тоже немного монструозна можно было бы хорошо оптимизировать.
И вот еще может быть полезно
Код |
---|
find /home/bitrix/ext_www/siteru.ru/ -regex ".*\.\(jpg\|jpeg\|gif\|png\|JPG\|JPEG\|GIF\|PNG\)" -print0 | xargs -0 cp --parents --target- |
скопирует все картинки сохраняя стуруктур каталогов, можно будет просто заливать поверх если чо-то пойдет не так, ну и модернизировать для удаления webp картинок, поскольку естественно они могут быть и в движке сайта и тд и тп, не только вами созданы.
эти файлы не будут переводиться в webp