Оптимизация изображений для Bitrix: конвертация в WebP и создание адаптивных тегов HTML

<?php

// Преобразование изображений в формат WebP
function convertToWebP($source, $destination)
{
    // Проверяем, существует ли исходное изображение
    if (!file_exists($source)) {
        return false;
    }

    // Получаем информацию о типе изображения
    $info = getimagesize($source);
    $image = null;

    // Открываем изображение в зависимости от его типа
    if ($info['mime'] === 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['mime'] === 'image/png') {
        // Учитываем прозрачность PNG
        $image = imagecreatefrompng($source);
        imagealphablending($image, false);
        imagesavealpha($image, true);
    } elseif ($info['mime'] === 'image/gif') {
        $image = imagecreatefromgif($source);
    }

    // Если изображение не удалось открыть, возвращаем false
    if ($image === null) {
        return false;
    }

    // Создаём директорию для WebP, если её нет
    $dir = dirname($destination);
    if (!is_dir($dir)) {
        mkdir($dir, 0755, true);
    }

    // Сохраняем как WebP (качество 80)
    $result = imagewebp($image, $destination, 80);

    // Освобождаем память
    imagedestroy($image);

    return $result;
}

// Генерация тега <picture> для адаптивных изображений
function generatePictureTag($imageItem)
{
    if (empty($imageItem)) return '';

    $originalImagePath = $_SERVER['DOCUMENT_ROOT'] . $imageItem;
    $webpImagePath = preg_replace('/\.(jpg|jpeg|png|gif)$/i', '.webp', $originalImagePath);
    $webpImageUrl = preg_replace('/\.(jpg|jpeg|png|gif)$/i', '.webp', $imageItem);

    // Конвертируем в WebP только если файл ещё не существует
    if (!file_exists($webpImagePath)) {
        convertToWebP($originalImagePath, $webpImagePath);
    }

    // Формируем HTML
    if (file_exists($webpImagePath)) {
        $html = '<picture>';
        $html .= '<source srcset="' . $webpImageUrl . '" type="image/webp">';
        $html .= '<img src="' . $imageItem . '" alt="" loading="lazy" style="max-width:100%;height:auto;">';
        $html .= '</picture>';
    } else {
        $html = '<img src="' . $imageItem . '" alt="" loading="lazy" style="max-width:100%;height:auto;">';
    }

    return $html;
}

<? foreach ($arResult["ITEMS"] as $arItem): ?>
    <div class="compare-tabs__panel">
        <div class="compare-images">
            <div class="compare-images__image">
                <?= generatePictureTag(CFile::GetPath($arItem['DISPLAY_PROPERTIES']['FOTO_BEFORE']['VALUE'])) ?>
            </div>
            <div class="compare-images__image">
                <?= generatePictureTag(CFile::GetPath($arItem['DISPLAY_PROPERTIES']['FOTO_AFTER']['VALUE'])) ?>
            </div>
        </div>
    </div>
<? endforeach; ?>