Битрикс и WebP. Генерация (конвертация) jpg, png в webp

Битрикс и WebP. Генерация (конвертация) jpg, png в webp
Внимание:
статья изменена в соответствии с новыми требованиями PageSpeed insights и изменениями в коде класса. Так же внесены изменения для корректной работы на PHP 8

В ходе оптимизации работы одного из проектов на 1С-Битрикс пришлось разобраться с вопросом быстрой конвертации изображений из png, jpg в webp. На текущий момент на маркетплейсе нет ни одного решения на эту тему, а так же все решения в сети предлагают генерировать webp файлы через настройки linux. Данный подход меня не очень устраивал, по этому был написан небольшой класс для работы с изображениями в 1С-Битрикс.

Качаем его по ссылке

Далее переименовываем его из .txt в .php. Кладём, например, в папку /local/php_interface/class. В init.php подключаем:

CModule::AddAutoloadClasses("", array(
    'Pict' => '/local/php_interface/class/Pict.class.php',
));

Теперь мы готовы к тому, что бы генерировать webp из jpg или png для изображений, содержащихся в инфоблоках 1С-Битрикс. Например: картинки новостей, товаров и т.д.

Но в дальнейшем, думаю, при переосмыслении данного подхода, можно будет заменять и любую другую картинку на странице.

Для примера рассмотрим замену изображений в карточке товара с изменением его размера до 500 на 500 пикселей.

Вызовем метод для генерации webp из детальной картинки:

<img src="<?=Pict::getResizeWebpSrc($arResult['DETAIL_PICTURE'], 500, 500)?>" alt="<?=$arResult['DETAIL_PICTURE']['ALT']?>" height="<?=Pict::getLastHeight()?>" width="<?=Pict::getLastWidth()?>">

Либо используя тег <picture>

<picture>
    <source type="image/webp" srcset="<?=Pict::getResizeWebpSrc($arResult['DETAIL_PICTURE'], 500, 500)?>">
    <img src="<?=Pict::getResizeSrc($arResult['DETAIL_PICTURE'], 500, 500)?>" alt="<?=$arResult['DETAIL_PICTURE']['ALT']?>" height="<?=Pict::getLastHeight()?>" width="<?=Pict::getLastWidth()?>">
</picture>

На этом процесс замены jpg или png на webp в карточке товара 1С-Битрикс закончен. Кроме того данный класс возвращает последнее значение height и width для нашего изображения, что поможет исправить соответствующее требование PageSpeed insights.

Следует заметить, что на текущий момент класс обрабатывает только файлы хранящиеся в инфоблоках и располагающиеся в папках: /upload/iblock или /upload/resize_cache/iblock. Новые файлы генерируются соответственно в папки: /upload/webp/iblock и /upload/webp/resize_cache


P.S. Для корректной поддержки альфа-каналов, у вас должна быть установлена библиотека GD версии 2.2.5 и выше. (Она уже входит в PHP 7.3)
Назад к списку

Читайте также

Разработка сайтов оптимизированных под PageSpeed Insights на 1С-Битрикс
PageSpeed Insights 1С-Битрикс
Разработка сайтов оптимизированных под PageSpeed Insights на 1С-Битрикс
Отчет о разработке двух сайтов на 1С-Битрикс оптимизированных под требования PageSpeed insights
PageSpeed insights и Битрикс. Оптимизация и ускорение
PageSpeed Insights 1С-Битрикс
PageSpeed insights и Битрикс. Оптимизация и ускорение
Как часто Вам приходится слышать пожелания от SEO-специалистов на тему зеленой зоны PageSpeed insights? Выполнение данного задания вполне реально, вопрос только в трудозатратах.