Пример полного кода, объединяющий все части из статьи, с небольшими улучшениями для надёжности (проверка директории, создание WebP только при отсутствии, обработка PNG с альфа-каналом):
Файл: local/php_interface/init.php| Код | 
|---|
<?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;
} | 
 Файл: local/templates/your_template/components/bitrix/news.list/result_modifier/template.php (или в цикле элементов)| Код | 
|---|
<? 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; ?>  | 
Этот код автоматически конвертирует изображения в современный формат WebP при первом обращении и генерирует адаптивный HTML с тегом <picture>, обеспечивая быструю загрузку и совместимость с любыми браузерами в системе 1С-Битрикс.