Webp Битрикс сжатие изображений

06.04.2020

Этот пост, скорее заметка для себя.
При ускорении сайта столкнулся с вопросом, что сжатые jpg изображения все равно выдают ошибку при проверке в Pagespeed
В интернете и маркетплейсе очень много решений, которые позволят отдавать изображения через webp. Но, я нашел универсальное решение, которое бесплатное и может работать не только с битриксом.
Помогла статья на сайте comolof.ru

Используйте современные форматы изображений битрикс

Webp - формат, который в среднем на 25% меньше .jpg и 25-35% меньше .png
Но, он пока (апрель 2020) не поддерживается браузером Safari.
Важно, что этот скрипт не изменяет формат изображений, а ложит рядом с оригиналом .jpg или .png изображение в формате .webp. Т.е браузеры, где webp не поддерживается - будут видеть картинку .jpg или .png
Обращаю внимание, если у вас приличное количество изображений и мало места на диске - вы рискуете забить все свободное пространство им. Будьте внимательны и посчитайте, сколько места вам необходимо!
Моя цель - устранить ошибку в Google Pagespeed.
Устанавливаем скрипт, подключившись по SSH c правами root к вашему серверу:


	yum install libwebp-tools

Дальше в директории /root создаем файл с именем: webparstudio.sh (Вы можете назвать файл как угодно. На моем сервере много сайтов и я буду запускать переодически их по CRON, поэтому я разделяю их названием сайта в названии)

#!/usr/bin/env bash

# converting JPEG images
find /home/bitrix/ext_www/ar-studio.by/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/ar-studio.by/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/webp.sh

Потом запускаем скрипт и ждем:


	/root/web.sh

Интернет-магазин с 5 тысячами товаров в каждом по 2-3 картинки конвертировался за 40 минут. Все зависит от мощности вашего сервера.
Так, изображения .webp созданы, теперь нужно настроить NGINX
Идем по пути: /etc/nginx/bx/site_available/bx_ext_ssl_ar-studio.by.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

и смотрим результат в консоли браузера (вкладка network):

p.s - важный момент, если у вас большая текучка изображений - вам нужен еще и скрипт, который перед созданием .webp будет удалять старые изображения. Т.к стандартными средствами 1С-Битрикс изображения .webp не будут удаляться после удаление элемента инфоблока.