Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружение)

Просмотров: 28137

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

Заметка написана и дополнена, на базе одной из тем форума, на официальном сайте Битрикс.

almendeev@gmail.com 07.11.2019
Цитата
Максим Иванов написал:
Цитата
Максим Иванов пишет:
вот такие ошибки выдало при выполнении скрипта  http://prntscr.com/ngsijg  
не подскажите, что за ошибки на 5 и 13 строчке?
Проблему решил утилитой dos2unix  
У меня аналогичная проблема, но с помощью утилиты не решилась...
i92hqvpz2j08@mail.ru 18.12.2019
может кому будет полезно, использую облачный хостинг в Беларуси, и техподдержка вот как настроила выдачу 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 18.12.2019
Михаил подскажите, а как бороться с уже не актуальными файлами .webp - в нашем интернет магазине очень часто меняется ассортимент, удаляются товары. .Jpeg файлы удаляются средствами битрикс, а вот копии в формате WebP созданные скриптом webpconverter.sh остаются. Как автоматизировать их удаление например запуском раз в сутки всех, либо только не актуальных, файлов webp?
Михаил Базаров 19.12.2019
Цитата
i92hqvpz2j08@mail.ru написал:
Михаил подскажите, а как бороться с уже не актуальными файлами .webp - в нашем интернет магазине очень часто меняется ассортимент, удаляются товары. .Jpeg файлы удаляются средствами битрикс, а вот копии в формате WebP созданные скриптом webpconverter.sh остаются. Как автоматизировать их удаление например запуском раз в сутки всех, либо только не актуальных, файлов webp?
Можно, просто проходиться рекурсивно по всем под директориям upload у удалять файлы с расширение .webp
Почитайте про find в unix, сходу не помню точный синтаксис

Примерно (сразу не пробуйте, могу ошибаться)
Код
find /home/ПУТЬ_ДО_UPLOAD -name '*.webp' -type f -delete
Сергей Харчевников 02.04.2020
Подскажите, сделал всё как у Вас в инструкции, сделал файл webpconverter.sh, вставил туда код, сделал файл исполнительным.

Но при запуске ошибка No such file or directory

Если сделать файл сделать не исполнительным то ошибка Permission denied
Артем Молодов 02.05.2020
большое спасибо за статьи, слов нет выручили
начал со статьи по ускорению и параллельно подключил наконец page speed
если Вы не против, поделюсь моими находками по теме.

использовал аналогичный скрипт только с указанием пути в параметре:
Скрытый текст

команда в консоли приобретает в моем случае вид:
Код
./webp-convert.sh /home/www/shared/upload
по ошибкам - это ругань на перевод каретки, три способа по устранению:

Скрытый текст

И напоследок, если вы накосячили и нужно удалить все файлы по расширению:
для CentOS
Код
find . -type f -name '*.webp' -exec rm {} +
не знаю можно ли сослаться на материал по которому искал
поэтому разобью ссылку - Вы удалите если чтобы было правильно:
Скрытый текст

надеюсь в таком виде ссылки не посчитает за сквозняки
Pechnikmsk 28.05.2020
Благодарю за полезную и необходимую информацию.


Вопрос
Цитата
Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой

В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте?
Михаил Базаров 28.05.2020
Цитата
Pechnikmsk написал:
Благодарю за полезную и необходимую информацию.


Вопрос
Цитата
Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой

В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте?
Просто пропишите настройки для двух сайтов, у каждого из них свой nginx- хост
Виктор Таран 16.07.2020
Сразу вижу  кучу мест где можно было сделать проще  и то чего нет.
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-
directory ./tmp/backup
скопирует все картинки сохраняя стуруктур каталогов, можно будет просто заливать поверх если  чо-то пойдет не так, ну и модернизировать для удаления webp картинок, поскольку естественно они могут быть и  в движке сайта и тд и тп, не только вами созданы.
Guest 26.04.2022
нет регистрозависимости в Jpeg PNG
эти файлы не будут переводиться в webp

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Основные функции вывода в шаблонах Битрикс Просмотров: 158281 Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну к... Установка вебсервера на Apple M1 (нативный ARM стек), оптимизированны... Просмотров: 7404 Появилась задачка, установить стек MAMP (macOS, Apache, MYSQL, PHP) на рабочий ноутбук с п... Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 11797 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Старые шаблоны битрикс для простой верстки Просмотров: 18193 Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии ... Создание блога с комментариями, оценками и просмотрами на сайте с 1С-... Просмотров: 24530 Если на вашем сайте требуется создание раздела с блогом или новостями, статьями. Записям в... Добавить свойство в административную форму заказа Просмотров: 3759 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Отфильтровать новости в Битрикс за заданный период Просмотров: 16690 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Хостинг панель BrainyCp: оптимизация под 1С-битрикс Просмотров: 8131 В этой видео-заметке расскажу как установить и оптимизировать панель управления сервером B... Многосайтовость битрикс на разных доменах и поддоменах Просмотров: 63137 Часто спрашивают "как настроить многосайтовость Битрикс на разных доменах", решил записать... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 15267 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Оптимизация jpeg и png картинок на cron, с помощью jpegoptim и optipn... Просмотров: 2278 Задача: на сайт каждый день проходит выгрузка из 1С с обновлением картинок. Нужно оптимиз... Сравнение двух типов цен для иммитации системы скидок, в Битрикс Просмотров: 6819 Встала задачка, иммититровать систему скидок в интернет магазине на Битрикс. Из 1С-УТ, на ... Очистка корзины в 1С-Битрикс одним нажатием Просмотров: 29582 В стандартной корзине Битрикс не хватает кнопки для полной очистки корзины одним нажатием... Модифицировать состав заказа #ORDER_LIST# в почтовом событии "Новый з... Просмотров: 30308 Если вы хотите как-то по особенному сверстать состав заказа в почтовом уведомлении 1С-Битр... Создание раздела инфоблока при регистрации пользователя в Битрикс Просмотров: 8649 Например вам нужно выводить информацию исключительно для определенного пользователя. Само ... Базовая защита "Битрикс виртуальная машина" от DDoS атак. Просмотров: 5856 Данный способ защиты не панацея, и скорее всего не спасет от профессиональной DDoS атаки, ... Вывести минимальную и максимальную цену в разделе каталога Битрикс. Просмотров: 3663 Что бы вывести минимальную и максимальную стоимость товаров, из каталога 1С-Битрикс, доста... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 20891 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Заполнить коэффициент единицы измерения (MEASURE_RATIO) из свойства э... Просмотров: 6467 Задачка: Каталог наполняется из 1С, но 1С не передает коэффициент единицы измерения (особе... Получение местоположений через API Битрикс c поиском по select. Просмотров: 23192 Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Би...