Настройка автоматической оптимизации медиафайлов 1С-Битрикс

Настройка автоматической оптимизации медиафайлов 1С-Битрикс

Страница каталога загружает 40 изображений товаров суммарным весом 8 МБ. Google PageSpeed показывает «Используйте изображения в современных форматах» и «Правильно задайте размер изображений». Битрикс хранит оригиналы в /upload/ и создаёт ресайзы через CFile::ResizeImageGet() — но формат остаётся JPEG/PNG, и нет автоматической конвертации в WebP. Настройка автоматической оптимизации — это несколько уровней: ресайз под реальные размеры, конвертация в WebP, сжатие без потерь и отдача через CDN.

Уровень 1: ресайз при сохранении оригинала

Стандартный CFile::ResizeImageGet() создаёт ресайз при первом запросе и кэширует результат в /upload/resize_cache/. Основная проблема — оригиналы хранятся без сжатия, и менеджеры загружают фотографии с телефона размером 5–10 МБ.

Сжатие при загрузке через обработчик события:

\Bitrix\Main\EventManager::getInstance()->addEventHandler(
    'main',
    'OnAfterFileSave',
    function (\Bitrix\Main\Event $event) {
        $file = $event->getParameter('FILE');

        // Обрабатываем только изображения
        if (!in_array($file['CONTENT_TYPE'], ['image/jpeg', 'image/png', 'image/gif'])) {
            return;
        }

        $path = $_SERVER['DOCUMENT_ROOT'] . $file['SRC'];
        if (!file_exists($path)) {
            return;
        }

        // Сжатие через imagick или GD
        \Local\Media\ImageOptimizer::compress($path, $file['CONTENT_TYPE']);
    }
);

// /local/lib/Media/ImageOptimizer.php
namespace Local\Media;

class ImageOptimizer
{
    public static function compress(string $path, string $contentType): void
    {
        if (!extension_loaded('imagick')) {
            self::compressWithGd($path, $contentType);
            return;
        }

        $img = new \Imagick($path);

        // Убираем избыточные метаданные (EXIF, ICC)
        $img->stripImage();

        // Ограничиваем максимальный размер оригинала
        $width  = $img->getImageWidth();
        $height = $img->getImageHeight();
        if ($width > 2000 || $height > 2000) {
            $img->resizeImage(2000, 2000, \Imagick::FILTER_LANCZOS, 1, true);
        }

        if ($contentType === 'image/jpeg') {
            $img->setImageCompression(\Imagick::COMPRESSION_JPEG);
            $img->setImageCompressionQuality(85);
        } elseif ($contentType === 'image/png') {
            $img->setImageCompression(\Imagick::COMPRESSION_ZIP);
            $img->setOption('png:compression-level', '9');
        }

        $img->writeImage($path);
        $img->destroy();
    }

    private static function compressWithGd(string $path, string $contentType): void
    {
        if ($contentType === 'image/jpeg') {
            $img = imagecreatefromjpeg($path);
            imagejpeg($img, $path, 85);
            imagedestroy($img);
        } elseif ($contentType === 'image/png') {
            $img = imagecreatefrompng($path);
            imagepng($img, $path, 9);
            imagedestroy($img);
        }
    }
}

Уровень 2: конвертация в WebP

WebP даёт 25–35% выигрыш в размере по сравнению с JPEG при сопоставимом качестве. Браузерная поддержка — 97%+ (все современные). Стратегия: генерируем WebP-версию рядом с оригиналом, nginx отдаёт WebP браузерам, поддерживающим формат.

Генерация WebP при ресайзе:

// Переопределяем логику ресайза в /local/php_interface/init.php
\Bitrix\Main\EventManager::getInstance()->addEventHandler(
    'main',
    'OnAfterGetResizeImagePath',
    function (\Bitrix\Main\Event $event) {
        $result = $event->getParameter('RESULT');
        $src = $result['src'] ?? '';

        if (!$src || !preg_match('/\.(jpg|jpeg|png)$/i', $src)) {
            return;
        }

        $localPath = $_SERVER['DOCUMENT_ROOT'] . $src;
        $webpPath  = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $localPath);

        if (!file_exists($webpPath) && file_exists($localPath)) {
            \Local\Media\WebpConverter::convert($localPath, $webpPath);
        }
    }
);

class WebpConverter
{
    public static function convert(string $sourcePath, string $destPath): bool
    {
        if (extension_loaded('imagick')) {
            $img = new \Imagick($sourcePath);
            $img->setImageFormat('webp');
            $img->setOption('webp:method', '6');
            $img->setImageCompressionQuality(82);
            $img->stripImage();
            $img->writeImage($destPath);
            $img->destroy();
            return true;
        }

        if (function_exists('imagewebp')) {
            $ext = strtolower(pathinfo($sourcePath, PATHINFO_EXTENSION));
            $img = match($ext) {
                'jpg', 'jpeg' => imagecreatefromjpeg($sourcePath),
                'png'         => imagecreatefrompng($sourcePath),
                default       => null,
            };
            if ($img) {
                imagewebp($img, $destPath, 82);
                imagedestroy($img);
                return true;
            }
        }

        return false;
    }
}

Nginx: отдача WebP браузерам с поддержкой

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* ^(/upload/resize_cache/.+)\.(jpg|jpeg|png)$ {
        set $img_path $1.$2;
        set $webp_path $1.webp;

        # Отдаём WebP, если поддерживается и файл существует
        if ($webp_suffix = ".webp") {
            add_header Vary Accept;
            try_files $webp_path $img_path =404;
        }

        try_files $img_path =404;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

Уровень 3: lazy loading и responsive images

В шаблоне компонента каталога добавляем loading="lazy" и srcset:

// В шаблоне компонента: template.php
$img  = \CFile::ResizeImageGet($element['PREVIEW_PICTURE'], ['width' => 300, 'height' => 300]);
$img2 = \CFile::ResizeImageGet($element['PREVIEW_PICTURE'], ['width' => 600, 'height' => 600]);
?>
<img
    src="<?= htmlspecialchars($img['src']) ?>"
    srcset="<?= htmlspecialchars($img['src']) ?> 300w, <?= htmlspecialchars($img2['src']) ?> 600w"
    sizes="(max-width: 768px) 300px, 600px"
    loading="lazy"
    width="300"
    height="300"
    alt="<?= htmlspecialchars($element['NAME']) ?>"
>

Массовая оптимизация существующих изображений

Оптимизатор уже загруженных файлов запускается как агент Битрикс или через CLI:

// Агент: обрабатывает по 100 файлов за запуск
$files = \Bitrix\Main\FileTable::getList([
    'filter' => ['CONTENT_TYPE' => ['image/jpeg', 'image/png']],
    'limit'  => 100,
    'offset' => (int)\Bitrix\Main\Config\Option::get('local.media', 'optimize_offset', 0),
])->fetchAll();

foreach ($files as $file) {
    $path = \Bitrix\Main\IO\Path::combine(
        \Bitrix\Main\Application::getDocumentRoot(),
        $file['SUBDIR'], $file['FILE_NAME']
    );
    if (file_exists($path)) {
        \Local\Media\ImageOptimizer::compress($path, $file['CONTENT_TYPE']);
    }
}

\Bitrix\Main\Config\Option::set('local.media', 'optimize_offset',
    (int)\Bitrix\Main\Config\Option::get('local.media', 'optimize_offset', 0) + 100
);

Сроки настройки

Сжатие при загрузке + WebP-конвертация в nginx + lazy loading в шаблонах — 1–2 рабочих дня. Плюс массовая оптимизация существующего upload/ — дополнительно 4–8 часов на разработку агента и запуск.