Комплексна оптимізація зображень для 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 місяці за рахунок зростання конверсії.