Конвертер на лету. Webp в битрикс

Автоматическая конвертация изображений в WebP для Битрикс: ускоряем сайт без рутины

Скорость загрузки сайта — один из ключевых факторов ранжирования в поиске (Google PageSpeed Insights) и удержания пользователей. Часто системы аналитики рекомендуют перевести все изображения в современный формат WebP, который обеспечивает лучшее сжатие при сопоставимом качестве. Ручная конвертация десятка файлов — задача выполнимая, но что делать, если на сайте сотни или тысячи изображений? Обновлять каждое вручную — неэффективно.

В этой статье мы создадим простое решение для 1С-Битрикс, которое будет автоматически генерировать WebP-версию картинки сразу после её загрузки в инфоблок.

Что потребуется для реализации

Перед началом убедитесь, что у вас есть:

1. Установленная и активированная PHP-библиотека gd.
2. Рабочая функция imagewebp(). Проверить это можно через функцию phpinfo() или просто попытавшись создать изображение этого формата.
3. Права на запись в файловой системе сервера.

Пошаговая инструкция

Шаг 1. Подготовка структуры

Создайте в корневой директории вашего сайта папку tmp и установите ей права доступа 755. В эту временную директорию будут сохраняться сгенерированные файлы перед их загрузкой в систему.

Шаг 2. Создание свойства в инфоблоке

Перейдите в настройки нужного инфоблока (например, "Новости" или "Товары") и создайте новое свойство типа "Файл".

• Название: Файл WebP
• Код: WEBP_FILE Это поле будет хранить ссылку на сгенерированное изображение.

Шаг 3. Добавление кода в init.php

Теперь добавим логику обработки. Откройте файл /bitrix/php_interface/init.php (или /local/php_interface/init.php) и вставьте туда следующий код:

<?php
// Подписываемся на события добавления и обновления элемента инфоблока
AddEventHandler("iblock", "OnAfterIBlockElementAdd", "convertImageToWebP");
AddEventHandler("iblock", "OnBeforeIBlockElementUpdate", "convertImageToWebP");

function convertImageToWebP(&$arFields)
{
    // Укажите ID инфоблока, для которого нужно применить автоматизацию
    $targetIblockId = 3; 

    if ($arFields['IBLOCK_ID'] == $targetIblockId && !empty($arFields["DETAIL_PICTURE"])) {
        // Получаем путь к исходному файлу
        $originalFilePath = $_SERVER['DOCUMENT_ROOT'].CFile::GetPath($arFields["DETAIL_PICTURE"]);
        
        // Определяем тип изображения и создаем ресурс
        switch(exif_imagetype($originalFilePath)){
            case IMAGETYPE_JPEG:
                $imageResource = imagecreatefromjpeg($originalFilePath);
                break;
            case IMAGETYPE_PNG:
                $imageResource = imagecreatefrompng($originalFilePath);
                break;
            default:
                return; // Если формат не поддерживается, выходим из функции
        }

        // Сохраняем альфа-канал для PNG
        imagepalettetotruecolor($imageResource);
        imagealphablending($imageResource, true);
        imagesavealpha($imageResource, true);

        // Задаем путь для сохранения нового файла
        $newFileName = '/tmp/webp_' . $arFields["ID"] . '.webp';
        $savePath = $_SERVER['DOCUMENT_ROOT'] . $newFileName;

        // Конвертируем и сохраняем изображение с качеством 90%
        imagewebp($imageResource, $savePath, 90);
        imagedestroy($imageResource); // Освобождаем память

        // Загружаем новый файл в свойство WEBP_FILE
        CIBlockElement::SetPropertyValuesEx(
            $arFields['ID'], 
            $arFields['IBLOCK_ID'],
            ['WEBP_FILE' => CFile::MakeFileArray($savePath)]
        );
    }
}

Важно: Не забудьте изменить $targetIblockId = 3; на ID вашего инфоблока.

Шаг 4. Использование в шаблоне

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

<img srcset="
    /<?= $arResult['PROPERTIES']['WEBP_FILE']['VALUE']['SRC'] ?> 1x,
    /<?= $arResult['PROPERTIES']['WEBP_FILE']['RESIZE']['1x']['SRC'] ?> 2x"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="<?= $arResult['NAME'] ?>"
>
<noscript>
    <!-- Fallback для браузеров без поддержки JS -->
    <img src="/<?= $arResult['DETAIL_PICTURE']['SRC'] ?>" alt="<?= $arResult['NAME'] ?>">
</noscript>

Этот код использует атрибут srcset, позволяя браузеру выбрать наиболее подходящий файл.