Настройка WebP-конвертации изображений в 1С-Битрикс

Настройка WebP-конвертации изображений в 1С-Битрикс Мы не раз сталкивались с ситуацией, когда на типовом интернет-магазине Битрикс страница каталога грузит 40–80 изображений. JPEG и PNG весят в сумме 2–5 МБ — это секунды задержки на мобильном соединении. WebP при сопоставимом качестве даёт 25–35%
Услуги, которые мы предлагаем
Показано 1 из 1Все 1626 услуг
Настройка WebP-конвертации изображений в 1С-Битрикс
Простой
~1 день

Наши компетенции:

Часто задаваемые вопросы

Последние работы

  • image_website-b2b-advance_0.webp
    Разработка сайта компании B2B ADVANCE
    1456
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Разработка веб-сайта для компании ФИКСПЕР
    1019
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Разработка на базе Битрикс, Битрикс24, 1С для компании Development of an Online Appointment Booking Widget for a Medical Center
    760
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Разработка на базе 1С Предприятие для компании МИРСАНБЕЛ
    879
  • image_crm_dolbimby_434_0.webp
    Разработка сайта на CRM Битрикс24 для компании DOLBIMBY
    804
  • image_crm_technotorgcomplex_453_0.webp
    Разработка на базе Битрикс24 для компании ТЕХНОТОРГКОМПЛЕКС
    1162

Настройка WebP-конвертации изображений в 1С-Битрикс

Мы не раз сталкивались с ситуацией, когда на типовом интернет-магазине Битрикс страница каталога грузит 40–80 изображений. JPEG и PNG весят в сумме 2–5 МБ — это секунды задержки на мобильном соединении. WebP при сопоставимом качестве даёт 25–35% выигрыша по размеру. Проблема в том, что «включить WebP» в Битриксе — не одна кнопка, а связка из нескольких механизмов, каждый из которых может молча не работать. Мы поможем разобраться и настроим конвертацию под ваш проект. Разберёмся, из-за чего возникают сложности и как их обойти, чтобы ускорить загрузку страниц на 30% без потери качества. Экономия трафика для каталога из 1000 товаров с 5 изображениями каждый может достигать 150 МБ при каждой загрузке страницы, что сокращает расходы на хостинг на $30–50 в месяц для магазина с посещаемостью 5000 уникальных посетителей в день.

Почему WebP не включается одной кнопкой в Битриксе?

Ядро использует модуль main (класс CFile) для хранения файлов и модуль resize_image для генерации превью. Физически ресайзер вызывается через \Bitrix\Main\Web\Image или через старый API CFile::ResizeImageFile(). Результаты кешируются в bitrix/cache/resize_cache/ с хешированными именами папок.

WebP-конвертация в Битриксе реализована двумя путями:

  • Путь 1 — серверная конвертация через PHP. Библиотека GD или Imagick конвертирует при ресайзе. Настраивается в bitrix/php_interface/dbconn.php или через административный интерфейс в разделе «Производительность».
  • Путь 2 — конвертация на уровне веб-сервера. Nginx/Apache отдаёт .webp-версию вместо оригинала, если браузер поддерживает формат (заголовок Accept: image/webp). Файлы конвертируются заранее — скриптом или демоном.

Какой подход эффективнее: PHP-конвертация или Nginx?

Nginx-конвертация в 5 раз снижает нагрузку на процессор по сравнению с PHP при каждом запросе, так как статические файлы отдаются напрямую. PHP-путь проще в настройке, но требует ресурсов при каждом ресайзе. Рекомендуем комбинировать: генерировать превью через PHP на лету для редко запрашиваемых изображений, а для популярных — предварительно конвертировать через Nginx.

Параметр PHP (GD/Imagick) Nginx + предконвертация
Загрузка CPU При каждом ресайзе Только при генерации файлов
Простота настройки Высокая Средняя (требует cron)
Кеширование Через resize_cache Статические файлы
Поддержка CDN Требуется Vary: Accept Проще (файлы на одном сервере)

Как настроить серверную конвертацию?

Проверка GD и Imagick

php -r "echo gd_info()['WebP Support'] ? 'WebP OK' : 'WebP NOT supported';" php -r "echo (new Imagick())->queryFormats('WEBP') ? 'Imagick WebP OK' : 'fail';" 

Если GD собран без WebP — нужен libwebp-dev и пересборка, либо переход на Imagick. На Bitrix VM проблем обычно нет — там Imagick с WebP идёт из коробки.

Конфигурация в Битриксе

// bitrix/php_interface/dbconn.php define("BX_USE_MYSQLI", true); define("CACHED_b_file", 3600); // Включение WebP в модуле resize \Bitrix\Main\Config\Option::set('main', 'use_webp', 'Y'); \Bitrix\Main\Config\Option::set('main', 'webp_quality', '85'); 

После этого \Bitrix\Main\Web\Image::resize() будет возвращать .webp если клиент поддерживает формат. Проверить можно в таблице b_file — поле CONTENT_TYPE у новых превью должно быть image/webp.

Рекомендованные параметры WebP

Параметр Оптимальное значение
Качество 85 (баланс размера и качества)
Lossless Отключить (кроме PNG с прозрачностью)
Метод сжатия 6 (максимальное сжатие)

Конвертация на уровне Nginx

Это производительнее: PHP не тратит CPU на конвертацию в момент запроса. Схема: при первом запросе генерируем .webp-версию рядом с оригиналом, Nginx проверяет её наличие и отдаёт если браузер поддерживает.

map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } server { location ~* ^/upload/.*\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; } } 

Предварительная конвертация скриптом cwebp:

find /var/www/bitrix/upload -name "*.jpg" -o -name "*.png" | \ xargs -P4 -I{} sh -c 'cwebp -q 82 "$1" -o "$1.webp" 2>/dev/null' _ {} 

Запускать через cron раз в час для новых файлов — по дате изменения через find -newer.

Как очистить кеш превью после включения WebP?

После включения WebP старые превью в bitrix/cache/resize_cache/ остаются в JPEG/PNG. Нужно их удалить:

rm -rf /var/www/bitrix/bitrix/cache/resize_cache/* 

Или через административную панель: «Управление сайтом» → «Производительность» → «Очистить кеш». После этого превью регенерируются при первом обращении — можно прогреть curl-скриптом по sitemap.

Типовые проблемы и их решение

WebP генерируется, но браузер получает JPEG. Чаще всего Nginx не передаёт заголовок Vary: Accept — CDN или кеширующий прокси отдаёт закешированную версию без учёта типа браузера. Размер WebP может быть больше оригинала на мелких иконках (до 10×10 px) и PNG с малым количеством цветов. Стоит добавить проверку: если WebP больше оригинала на 10%, отдавать оригинал. Ошибки в b_event_log возникают при включённой конвертации и отсутствии прав на запись в upload/. Проверить chown на директорию upload/ от имени пользователя веб-сервера.

Что входит в работу по настройке WebP?

В рамках услуги мы выполняем:

  • Аудит текущей конфигурации сервера и Битрикса.
  • Настройку GD/Imagick или Nginx для конвертации.
  • Создание скрипта для предварительной конвертации и настройку cron.
  • Тестирование на стенде и боевом сервере.
  • Документацию по эксплуатации и поддержку после внедрения.

Мы занимаемся разработкой на Битрикс более 8 лет и реализовали свыше 120 проектов с оптимизацией производительности. Если вы хотите ускорить загрузку вашего сайта и сократить расходы на трафик, получите консультацию по настройке WebP — мы оценим ваш проект и предложим оптимальное решение.

Источник: WebP — Wikipedia