Модуль оптимизации размера и преобразования формата изображений в Webp
Технические данные
Совместимые редакции
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Старт
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Стандарт
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Малый бизнес
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Бизнес
Описание
Модуль позволяет производить автоматический ресайз и конвертацию изображений инфоблоков из форматов .jpg и .png в современный формат .webp.Webp - это современный формат изображений, который позволяет сократить вес файлов без потери качества, что положительно влияет на скорость загрузки сайта.
PHP >= 8.0
Bitrix CMS >= 17.0.15
Установленные библиотеки jpegoptim, optipng или pngqunat
Установить модуль через административную часть вашего сайта.
Использование//Задаем параметры ресайза $config = new ZLabs\ImageResizer\Config\Config($width, $height, $bxResizeType, $arFilters); //Создаем новый ресайзер $resizer = new ZLabs\ImageResizer\Resizer\Resizer($config); //Передаем изображение в виде массива с полями сущности \CFile $newImage = $resizer->resize($arImage); |
Настройка
Для автоматического ресайза на лету загружаемых в ИБ изображений необходимо добавить массив настроек в файл
bitrix/.settings.php
'zlabs.imageresizer' => [ //Список обработчиков 'handlers' => [ //Имя обработчика (номер ИБ + название свойства) 'iblock_41_detail_picture' => [ ... ], ], //Слушатели 'listeners' => [ //Группа обработчиков для инфоблока. в данном примере ИБ номер 41 'iblock_41' => [ //Список обработчиков 'handlers' => [ 'iblock_41_detail_picture' ] ] ], 'convert_to_webp' => [ // Параметры конвертации в webp [ 'iblock_id' => '1', // ID Инфоблока 'from' => 'PREVIEW_PICTURE', // Свойство, из которого берется изображение 'to' => 'WEBP_IMAGE', // Свойство, в которое записывается изображение 'quality' => 100 // Качество конечного изображения ], ] ] |
Настройки обработчика
В установке типа ресайза и фильтра опираемся на документацию битрикса.
'iblock_13_section_image' => [ 'width' => 500, 'height' => 500, //Тип ресаза. Внимание! указывайте значенимем константы, то есть цифрой 'bxResizeType' => 2, //Ресайзер 'class' => '\\ZLabs\\ImageResizer\\Handlers\\SectionPropertyPicture', //Другие специфические поля. Например код пользовательского свойства 'code' => 'UF_IMAGE', //Массив фильтров 'filters' => [ //Резкость [ 'name' => 'sharpen', 'precision' => 20, ], //Водяной знак [ 'name' => 'watermark', 'position' => 'br', 'size' => 'real', 'type' => 'image', 'file' => $_SERVER['DOCUMENT_ROOT'] . '/local/images/watermark.png'] ] ] ] |
Также настройки для ресайзера можно задать через параметры модуля в соответствующем разделе административной панели
<url сайта>/bitrix/admin/settings.php?lang=ru&mid=zlabs.imageresizer&mid_menu=1
Виды ресайзеров\ZLabs\ImageResizer\Handlers\PreviewPicture - PREVIEW_PICTURE элемента ИБ;
\ZLabs\ImageResizer\Handlers\DetailPicture - DETAIL_PICTURE элемента ИБ;
\ZLabs\ImageResizer\Handlers\PropertyPicture - Свойство типа файл элемента ИБ;
\ZLabs\ImageResizer\Handlers\SectionPicture - PICTURE для раздела ИБ;
\ZLabs\ImageResizer\Handlers\SectionDetailPicture - DETAIL_PICTURE для раздела ИБ;
\ZLabs\ImageResizer\Handlers\SectionPropertyPicture - Пользовательское поле типа файл для раздела ИБ.
РасширениеДля реализации уникальной задачи необходимо создать класс ресайзер наследующийся от абстрактного класса ZLabs\ImageResizer\Resizer\ResizerAbstract
Конвертер в WebPВ `settings.php` можно задать ИБ, для которого будет производиться конвертация, а также из какого свойства будет браться изображение и в какое сохраняться.
'zlabs.imageresizer' => [ 'convert_to_webp' => [ [ 'iblock_id' => '29', // ID инфоблока 'from' => 'PREVIEW_PICTURE', // Из какого поля или свойства (код) взять изображение 'to' => 'WEBP_MOBILE', // В какое свойство записать webp-версию изображения ], ... ], ] |
Также настройки для конвертации в webp можно задать через параметры модуля в соответствующем разделе административной панели
<url сайта>/bitrix/admin/settings.php?lang=ru&mid=zlabs.imageresizer
Установите этот модуль прямо сейчас!
Для этого укажите адрес сайта:
