Комплексная оптимизация изображений для 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%, что сэкономило клиенту десятки тысяч рублей ежемесячно на CDN-трафике.

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

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

Этапы работ

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

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

80% сайтов на Битрикс тормозят из-за одной таблицы

b_iblock_element_property — EAV-структура, где каждая строка хранит одно значение одного свойства одного элемента. Каталог в 50 000 товаров с 30 свойствами даёт 1,5 млн строк. Умный фильтр делает JOIN этой таблицы с b_iblock_element по пяти свойствам — и MySQL уходит в full table scan на 3–5 секунд.

Наш опыт показывает: без вмешательства в эту таблицу ускорение сайта невозможно. Мы берёмся за проекты, где скорость загрузки упала до 8–10 секунд, и возвращаем TTFB < 200 мс за 1–2 недели. Оптимизация скорости сайта начинается с аудита slow-запросов и заканчивается комплексной перестройкой инфраструктуры под ключ.

[Свяжитесь с нами для аудита] — мы определим узкие места за 2 часа и предложим конкретный план.

Серверная оптимизация

Nginx. Не просто «включили gzip». Конкретно:

• gzip_comp_level 4-5 — выше бессмысленно, CPU сжирает больше, чем экономит трафик;
• brotli on с brotli_static on — для предварительно сжатых файлов;
• HTTP/2 с http2_max_concurrent_streams 128;
• fastcgi_cache для PHP-ответов — кэширование на уровне Nginx, минуя PHP-FPM;
• worker_processes auto, worker_connections под количество одновременных соединений.

PHP-FPM. Выбор между pm = dynamic и pm = static — не академический:

• Static: фиксированное количество воркеров, без overhead на форк — для выделенных серверов с предсказуемой нагрузкой.
• Dynamic: экономит RAM при низком трафике. pm.max_children считаем как (доступная RAM - RAM для MySQL/Redis) / средний расход на процесс.
• OPcache: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, opcache.validate_timestamps=0 на продакшене (перезагрузка PHP-FPM при деплое).

MySQL/MariaDB. Главное узкое место почти всегда:

• slow_query_log с порогом 0.5 сек — каждый запрос разбираем через EXPLAIN.
• innodb_buffer_pool_size = 70–80% доступной RAM на выделенном сервере.
• Составные индексы для фасетного поиска: (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) на b_iblock_element_property.
• OPTIMIZE TABLE b_iblock_element_property после массовых операций.

Как настроить кэширование на три уровня?

Управляемый кэш компонентов. TTL настраиваем для каждого компонента отдельно. Каталог — 3600 сек, новостная лента — 300 сек, баннеры — 86400. Одинаковый TTL везде — гарантия либо устаревших данных, либо бесполезного кэша.

Композитный кэш. Технология bitrix:composite — Nginx отдаёт готовый HTML из файла, PHP не запускается. Динамические зоны (корзина, авторизация) подгружаются AJAX-запросом через CBitrixComponent::setFrameMode(true). TTFB < 50 мс. Но: не все компоненты совместимы, $APPLICATION->ShowPanel() и прямой вывод через echo ломают композит. Проверяем каждую страницу через панель «Производительность → Композитный сайт».

Сравнение: композитный кэш быстрее управляемого в 10–20 раз по времени первого байта. Официальная документация Битрикс по композитному кэшу: Bitrix Composite.

Memcached / Redis. Переносим кэш из файловой системы:

• Сессии → Redis (session.save_handler = redis) — быстрее файлов в 10–50×, плюс работа в кластере.
• Кэш компонентов → Memcached через .settings.php: 'cache' => ['type' => 'memcache'].
• Кэш ORM-запросов — чтобы одинаковые GetList() не нагружали MySQL на каждом хите.

Почему стандартных настроек MySQL недостаточно?

Индексы. Составные для фасетного поиска. Покрывающие для частых выборок — MySQL отвечает из индекса, не обращаясь к данным. Частичные индексы (MariaDB) для фильтрации по ACTIVE = 'Y'. Аудит неиспользуемых индексов — каждый замедляет INSERT/UPDATE.

Партиционирование. Для таблиц с миллионами строк: b_stat_session, b_search_content_stem, Highload-блоки с историей. Партиция по дате — запрос «заказы за месяц» не сканирует данные за три года.

Реальный кейс: каталог 200 000 товаров, 50 свойств. Фильтр по 10 свойствам занимал 12 секунд. После создания составных индексов по (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) и партиционирования b_iblock_element_property по IBLOCK_ID время выполнения упало до 0,3 секунды. Нагрузка на MySQL снизилась в 40 раз.

Очистка. В любой базе за год-два накапливается: устаревший поисковый индекс, просроченные записи в b_cache_tag, история b_iblock_element_prop_s*, логи в b_event_log на гигабайты. Настраиваем регулярную очистку через агенты.

Партиционирование также решает проблему с параллельными запросами при обмене с 1С через CommerceML. Подробнее: MySQL Partitioning Documentation.

Фронтенд

Изображения — 60–80% веса страницы:

• WebP через CFile::ResizeImageGet() с BX_RESIZE_IMAGE_PROPORTIONAL + конвертация;
• srcset + sizes — не грузим 3000px картинку в блок 400px;
• loading="lazy" для всего ниже первого экрана;
• AVIF — ещё 20–30% экономии vs WebP (подробнее: WebP).

CSS/JS:

• Встроенный модуль Битрикс: объединение и минификация через «Настройки → Оптимизация CSS/JS»;
• PurgeCSS / UnCSS — на типичном Битрикс-проекте 60–70% CSS не используются;
• defer / async для некритичного JS;
• Critical CSS инлайном в <head> для мгновенного FCP.

Шрифты:

• <link rel="preload" as="font" crossorigin> для основного шрифта;
• font-display: swap — текст виден сразу;
• Subsetting через pyftsubset — вырезаем кириллицу + латиницу, файл уменьшается в 3–5 раз.

CDN

Cloudflare, BunnyCDN, AWS CloudFront или российские (Selectel CDN, VK Cloud CDN).

• Статика (CSS, JS, изображения, шрифты) — через CDN.
• Правила кэширования: Cache-Control: public, max-age=31536000, immutable для файлов с хешем.
• Оптимизация изображений на лету (imgproxy, Cloudflare Polish) без нагрузки на origin.

Зачем нужно нагрузочное тестирование?

Не синтетические бенчмарки, а реальные сценарии:

• k6 / wrk — имитация маршрутов: каталог → фильтрация → карточка → корзина → оформление.
• Метрики: RPS, время ответа (p50, p95, p99), процент ошибок.
• Xdebug (callgrind) или Blackfire — профилирование PHP, поиск узких мест.

Результат тестирования — объективная картина, где реально тормозит, а не где «кажется». После оптимизации прогоняем повторно — фиксируем улучшения.

Результаты

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

1. Аудит текущей производительности — анализ slow-запросов, профилирование PHP, проверка кэширования, CDN, серверных настроек.
2. Настройка серверной части — Nginx, PHP-FPM, MySQL, Redis/Memcached, OPcache.
3. Оптимизация кэширования — управляемый кэш, композитный сайт, настройка TTL, тегированное кэширование.
4. Работа с БД — создание индексов, партиционирование, очистка, реорганизация EAV-таблиц.
5. Фронтенд — изображения (WebP/AVIF), CSS/JS (минификация, deferred), шрифты (preload, subsetting).
6. CDN — подключение, настройка правил кэширования.
7. Нагрузочное тестирование — сценарии реальных пользователей, отчёт по метрикам.
8. Документация — описание всех изменений, рекомендации по дальнейшему обслуживанию.
9. Гарантия — поддержка в течение 1 месяца после сдачи.

Мониторинг

Без мониторинга через полгода всё деградирует. Новый модуль, нерасчищенные логи, изменение в шаблоне — и скорость вернулась к исходной.

• web-vitals API — Real User Monitoring от реальных посетителей.
• Synthetic monitoring — Pingdom, UptimeRobot, регулярные проверки из разных локаций.
• Алерты — TTFB > 500 мс или LCP > 3 сек → уведомление.

Сроки и стоимость

Стоимость рассчитывается индивидуально после аудита. [Получите консультацию по вашему проекту] — оценим текущее состояние и предложим план ускорения с конкретными сроками и бюджетом. Мы — команда с 10+ годами опыта в Битрикс, выполнили более 200 проектов по оптимизации скорости сайта.