WebP это современный формат сжатия изображений, который позволяет, при правильных настройках и уровнях сжатий, уменьшить размер файлов изображений. Развивается при поддержке Google.
В этой заметке, расскажу как применить данный формат на сайте, под управлением Битрикс. Однако, способ подойдет для любого сайта, на любой системе управления и без нее.
Изображения WebP в среднем на 26 % меньше по сравнению с PNG, и на 25-34 % меньше по сравнению с JPEG. Формат появился в 2010 году и с тех пор разрабатывается Google. WebP основан на алгоритме сжатия ключевых кадров видео-кодека VP8. Новый формат также поддерживает прозрачность.
При сжатии с потерями в WebP применяется предиктивное кодирование, при котором значения соседних пиксельных блоков используются для предсказания значения нужного пиксельного блока, а затем кодируется разница.
Формат изображений WebP позволит существенно уменьшить размер веб-страницы, но учитывая его ограниченную поддержку необходимо содержать копии всех изображений в нескольких форматах.
WebP уже поддерживается в Chrome, Opera и прочих браузерах на основе движка Chromium (в скором будущем и Edge). Для остальных браузеров отдается оригинал изображения в jpeg/png формате. Либо, можно использовать библиотеку WebPJS.
Итак: имеем работающий магазин под управлением 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 изображения, при их наличии и оригиналы если .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
Заметка написана и дополнена, на базе одной из тем форума, на официальном сайте Битрикс.
![]()
Михаил Базаров
|
Кому интересно использовать webp, на macOS
Например, оптимизация сайта (разрабатываемого локально) до запуска Инструкция по установке |
![]()
Сергей Стефанович
|
это всё очень круто. но ios остается в пролете
|
![]()
Михаил Базаров
|
||
Пусть Яблоки смотрят на простые jpeg-и ![]() Главное Google Page Speed доволен, остальное суета сует) |
||
![]()
Максим Иванов
|
вот такие ошибки выдало при выполнении скрипта
не подскажите, что за ошибки на 5 и 13 строчке? |
![]()
Максим Иванов
|
||
|
||
![]()
Mikhail Rug
|
Добрый день!
А как же быть с WebM ведь gif в этом случае не конвертятся |
![]()
Сергей Стефанович
|
Можно использовать тег picture
я вот так намутил |
![]()
almendeev@gmail.com
|
||||
|
||||
![]()
i92hqvpz2j08@mail.ru
|
может кому будет полезно, использую облачный хостинг в Беларуси, и техподдержка вот как настроила выдачу 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, сходу не помню точный синтаксис Примерно (сразу не пробуйте, могу ошибаться)
|
||||
![]()
Сергей Харчевников
|
Подскажите, сделал всё как у Вас в инструкции, сделал файл webpconverter.sh, вставил туда код, сделал файл исполнительным.
Но при запуске ошибка No such file or directory Если сделать файл сделать не исполнительным то ошибка Permission denied |
![]()
Артем Молодов
|
||||||||||||||||||||||||||
большое спасибо за статьи, слов нет выручили
начал со статьи по ускорению и параллельно подключил наконец page speed если Вы не против, поделюсь моими находками по теме. использовал аналогичный скрипт только с указанием пути в параметре:
команда в консоли приобретает в моем случае вид:
И напоследок, если вы накосячили и нужно удалить все файлы по расширению: для CentOS
поэтому разобью ссылку - Вы удалите если чтобы было правильно:
надеюсь в таком виде ссылки не посчитает за сквозняки |
||||||||||||||||||||||||||
![]()
Pechnikmsk
|
||
Благодарю за полезную и необходимую информацию.
Вопрос
В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте? |
||
![]()
Михаил Базаров
|
||||
|
||||
![]()
Виктор Таран
|
||||||
Сразу вижу кучу мест где можно было сделать проще и то чего нет.
1. у вас в nginx в локейшене нет /upload а картинки не только там лежат, а у вас обжимаются они только в этом месте, притом самые основные лежат то в ресайз кеш, именно они всегда требуют переобжатия. 2. нет проверки на наличие этой картинки, то есть по идее вы должны вначале проверить нет ли там 404 а потом отдавать картинку, это опять же к nginx а нужно это по пункту 4. 3. оптимизировать код
4. регистронезависимость, мало того что jpeg и jgp так и может быть Jpeg JGEG и тд. так что вообще можно сделать вот так
![]() Остальная часть тоже немного монструозна можно было бы хорошо оптимизировать. И вот еще может быть полезно
скопирует все картинки сохраняя стуруктур каталогов, можно будет просто заливать поверх если чо-то пойдет не так, ну и модернизировать для удаления webp картинок, поскольку естественно они могут быть и в движке сайта и тд и тп, не только вами созданы. |
||||||
На нем, уже много видеоуроков по 1С-Битрикс. Как одиночные видео так и серии видеоуроков Перейти на канал
Совсем скоро выйдет видеокурс по разработке доски объявлений с мобильным приложением. Подписывайтесь и будьте в курсе: