Оптимизация изображений для 1С-Битрикс

Оптимизация изображений для 1С-Битрикс

Изображения — крупнейший компонент веса страниц для большинства битрикс-проектов. Типичная ситуация: менеджер загружает фото товара в высоком разрешении прямо с камеры (3–8 MB, 4000×3000 пикселей), Битрикс сохраняет файл в /upload/iblock/, и именно этот файл отдаётся пользователям с мобильных устройств. В 2024 году это влияет на Core Web Vitals (LCP, CLS), позиции в поиске Google и конверсию — медленная загрузка изображений напрямую связана с отказами на мобильных.

Механизм ресайза в Битрикс

Битрикс предоставляет функции CFile::ResizeImageGet() и \Bitrix\Main\UI\FileInput::processFiles() для нарезки изображений на лету. В шаблонах компонентов это выглядит так:

$resizedImage = CFile::ResizeImageGet(
    $arItem['PREVIEW_PICTURE'],
    ['width' => 400, 'height' => 300],
    BX_RESIZE_IMAGE_PROPORTIONAL,
    false,
    false
);

Результат кешируется в /upload/resize_cache/. Проблема: по умолчанию кеш нарезки хранится без ограничения размера. На проекте с активной заменой изображений папка /upload/resize_cache/ за 2–3 года может вырасти до 20–50 GB — при этом большинство файлов устарели.

Конвертация в WebP

WebP даёт на 25–40% меньший размер файла при эквивалентном качестве для фотографий, и на 60–80% для графики с прозрачностью по сравнению с PNG. Современные браузеры (Chrome 32+, Firefox 65+, Safari 14+) поддерживают WebP.

Способы реализации WebP для Битрикс:

1. На уровне nginx через ngx_http_image_filter_module:

location ~* \.(jpg|jpeg|png)$ {
    add_header Vary Accept;
    if ($http_accept ~* "webp") {
        rewrite ^(.*)\.(jpg|jpeg|png)$ $1.webp break;
    }
}

Работает только если .webp версии файлов существуют. Генерация — через cron-скрипт с cwebp или imagemagick.

2. Через PHP-обёртку над CFile::ResizeImageGet():

function getImageSrc(int $fileId, int $width, int $height): string {
    $webpSupported = str_contains($_SERVER['HTTP_ACCEPT'] ?? '', 'image/webp');
    $format = $webpSupported ? 'webp' : 'jpg';
    // Кастомный конвертер с кешированием результата
    return ImageConverter::resize($fileId, $width, $height, $format);
}

3. Тег <picture> с несколькими источниками:

<picture>
    <source srcset="/upload/resize_cache/product_400x300.webp" type="image/webp">
    <img src="/upload/resize_cache/product_400x300.jpg" width="400" height="300" loading="lazy" alt="...">
</picture>

Это наиболее универсальный способ — браузер сам выбирает поддерживаемый формат.

AVIF как следующий шаг

AVIF (AV1 Image Format) даёт ещё 20–35% выигрыш над WebP для фотографий. Chrome поддерживает с версии 85, Firefox с 86, Safari с 16. Кодирование AVIF медленнее WebP, поэтому для больших каталогов генерация ведётся в фоне через очередь задач.

Адаптивные изображения (srcset)

Для Retina-дисплеев и разных размеров экрана нужны несколько версий изображения:

$sizes = [
    ['width' => 400, 'height' => 300],   // мобильные
    ['width' => 800, 'height' => 600],   // планшеты
    ['width' => 1200, 'height' => 900],  // десктоп
];
$srcset = [];
foreach ($sizes as $size) {
    $img = CFile::ResizeImageGet($fileId, $size, BX_RESIZE_IMAGE_PROPORTIONAL);
    $srcset[] = $img['src'] . ' ' . $size['width'] . 'w';
}

<img srcset="<?= implode(', ', $srcset) ?>"
     sizes="(max-width: 768px) 400px, (max-width: 1024px) 800px, 1200px"
     src="/upload/fallback.jpg" alt="...">

Кейс: каталог мебели, 8000 SKU

До оптимизации: все изображения в JPEG, средний размер 480 KB, нет srcset, нет WebP. Страница каталога (24 товара) — 11,5 MB изображений на десктоп, 11,5 MB на мобильный (те же файлы).

Что сделали:

• Batch-конвертация всех изображений в upload в WebP через cwebp (cron-скрипт, обработка за ночь)
• Нарезка через CFile::ResizeImageGet() в трёх размерах для srcset
• Тег <picture> с source WebP + img JPEG fallback в шаблоне catalog.section
• lazy load для изображений ниже fold
• Настройка агентивной очистки /upload/resize_cache/ старше 90 дней

Результат: средний вес изображения в каталоге — 28 KB (WebP, нужный размер). Страница каталога — 680 KB изображений на мобильном, 1,1 MB на десктоп. LCP: 4,2 с → 1,6 с. PageSpeed Mobile: 31 → 74.

Этапы работ

Итого от 4 до 8 дней в зависимости от количества кастомных шаблонов и объёма каталога.