Комплексная оптимизация изображений для 1С-Битрикс: WebP, AVIF, srcset

Мы специализируемся на оптимизации изображений для проектов на 1С-Битрикс. Изображения — крупнейший компонент веса страниц для большинства битрикс-проектов. Типичная ситуация: менеджер загружает фото товара в высоком разрешении прямо с камеры (3–8 MB, 4000×3000 пикселей), Битрикс сохраняет файл в /upload/iblock/, и именно этот файл отдаётся пользователям с мобильных устройств. Это критически влияет на 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/ может вырасти до 20–50 GB — при этом большинство файлов устарели. Инфоблоки (IBLOCK) хранят изображения, и без грамотной стратегии кеширования разрастание неизбежно.

WebP даёт выигрыш до 40%?

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

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

1. На уровне nginx — через ngx_http_image_filter_module с проверкой заголовка Accept. Требует предварительно созданные .webp копии.
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="Фото товара в каталоге — пример оптимизации изображений для 1С-Битрикс"> </picture> 

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

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

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

настроить автоматическую конвертацию при загрузке?

Для автоматизации конвертации используйте следующий порядок действий:

1. Установите PHP-расширение gd или imagick с поддержкой WebP и AVIF.
2. Напишите агент Битрикс, который раз в час проверяет новые файлы и конвертирует их.
3. Для уже существующих файлов запустите batch-скрипт через cron с помощью cwebp или imagemagick.
4. После конвертации настройте srcset для адаптивных изображений.
5. Включите lazy load атрибутами loading="lazy".

После конвертации генерируются srcset-версии для адаптивных изображений.

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

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

$sizes = [400, 800, 1200]; $srcset = []; foreach ($sizes as $w) { $img = CFile::ResizeImageGet($fileId, ['width' => $w, 'height' => round($w*0.75)], BX_RESIZE_IMAGE_PROPORTIONAL); $srcset[] = $img['src'] . ' ' . $w . 'w'; } ?> <img srcset="<?= implode(', ', $srcset) ?>" sizes="(max-width: 768px) 400px, (max-width: 1024px) 800px, 1200px" src="/upload/fallback.jpg" alt="Изображение товара в разных разрешениях"/> 

Каждое изображение сопровождается alt-текстом с ключевым словом для SEO.

Кейс: каталог мебели, 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. Экономия трафика составила более 80%, что сэкономило клиенту около $90–130 ежемесячно на CDN-трафике.

Этот кейс — реальный пример. Каждый проект уникален, но мы гарантируем аналогичный прирост производительности. Свяжитесь с нами, чтобы обсудить оптимизацию вашего каталога.

входит в работу

Этапы работ

Итого от 4 до 8 дней в зависимости от количества кастомных шаблонов и объёма каталога. Наш опыт: 10+ лет в разработке на Битрикс, 150+ успешных проектов по оптимизации. Гарантируем улучшение показателей Core Web Vitals.

Закажите оптимизацию изображений для вашего проекта — получите консультацию по выбору форматов и схемы кеширования. Свяжитесь с нами, чтобы получить расчет экономии для вашего проекта — инвестиции окупаются за 2-3 месяца за счёт роста конверсии.