В ходе оптимизации работы одного из проектов на 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
