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

» »


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

Знакомство с WebP

Представленный формат WebP появился в 2010 году, и с этого времени разрабатывается Google, основан на алгоритме сжатия ключевых кадров видеокодека VP8 как с потерями, так и без, и упаковывается в контейнер на основе RIFF. Некоторые крупные компании, такие как Google, Facebook и eBay, советуют использовать данный его для сжатия изображений.
Он позволяет существенно уменьшить размер веб-страницы.

Lossless – это сжатие использует уже известные фрагменты изображения для точной реконструкции пикселей. Также может использоваться локальная палитра, если нет интересующих алгоритм совпадений.

WebP уже поддерживается в Chrome, Opera и стандартным браузером Android, а при помощи библиотеки WebPJS может отображаться во всех популярных браузерах (в IE 6 и выше при помощи Flash).

Согласно Google:

  • WebP сжимает изображения без потерь на 26% лучше, чем PNG.
  • WebP сжимает изображения с потерями лучше, чем JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM)
  • WebP поддерживает прозрачность без потерь (известную, как альфа-канал) при увеличении размера всего лишь на 22%.

Сегодня ещё не все браузеры поддерживают формат webp. И для того, чтобы пользователь с любым браузером смог увидеть Ваши изображения, используйте следущий скрипт:

<script>(function(){var WebP=new Image();
WebP.onload=WebP.onerror=function(){ if(WebP.height!=2)
{var sc=document.createElement(‘script’);sc.type=’text/javascript’;sc.async=true;
var s=document.getElementsByTagName(‘script’)[0];sc.src=’js/webpjs-0.0.2.min.js’;
s.parentNode.insertBefore(sc,s);}};
WebP.src=’data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA’;})();
</script>

Этот скрипт проверяет, поддерживает ли браузер нативно webp формат. Если поддерживает, то скрипт использует код WebPJS.

Такое решение работает практически во всех браузерах. В IE используется flashscript.

Кроме того, разработаны легкая библиотека кодирования и декодирования libwebp, утилиты командной строки для кодирования и декодирования WebP, а также инструменты для просмотра, мультиплексирования и анимирования изображений в этом формате.

Установка утилит и конвертация в WebP

Все инструменты можно скачать на странице для разработчиков Google. Они существуют для Windows, Linux и MacOS X в скомпилированном виде, но также можно загрузить исходный код для разработки (opensource все же) или самостоятельной компиляции.

Для конвертации из JPEG, PNG и TIFF используется утилита cwebp, а для декодирования — dwebp.

Конвертация запускается простой командой (из директории с утилитами):

cwebp input.png -q 80 -o output.webp

# Указание названий входного и выходного файлов, качества (от 0 до 100)

По тому же принципу запускается декодирование. Присутствует множество опций и дополнительных параметров, в том числе для проверки кодирования.

Если вы уже научились правильно конвертировать или сохранять изображения в WebP, то остается проблема подключения WebP на сайте.

Использование WebP на веб-сервере c работающим сайтом

Итак: имеем работающий магазин под управлением 1С-Битрикс, который работает на веб сервере под управлением centOS-7 (стандартное Битрикс веб окружение).

Наша задача, конвертировать, в WebP, имеющиеся изображения всех товаров и прочие изображения хранящиеся в директории (и ее поддиректориях) upload.

Сначала устанавливаем утилиту cwebp - конвертирует изображения в WebP. В терминале выполняем команду:

yum install libwebp-tools

Внимание! Далее указан пример, в котором веб-сервер запущен от имени root. Естественно, данный пример необходимо выполнять из-под пользователя, от имени которого запущен веб-сервер.

Далее, в директории /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;
}
}

И перезапускаем nginx.

service nginx restart

В общем-то и все. на всякий, проверяем что все в порядке. С точки зрения исходного кода, картинки все также будут с расширениями jpeg/png.
Но в инспекторе, на вкладке Network, должно показать Type – webp.

 

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


Источник.

Друзья! Приглашаем вас к обсуждению. Если у вас есть своё мнение, напишите нам в комментарии.