Ресайз на лету позволяет хранить одно исходное изображение и получать из него уменьшенные копии нужного размера прямо во время вывода страницы. Битрикс делает это средствами ядра и кэширует результат, чтобы не пересоздавать картинку при каждом обращении.
Что такое ресайз на лету
Ресайз на лету (resize on the fly) — это создание уменьшенной копии изображения в момент первого запроса. Исходный файл остаётся неизменным, а платформа генерирует и сохраняет масштабированную версию в каталоге кэша.
Подход даёт несколько преимуществ:
- в базе и медиабиблиотеке хранится один оригинал, а не десяток предгенерированных размеров;
- размеры превью можно менять в шаблоне без повторной загрузки файлов;
- копии создаются один раз и берутся из кэша при последующих обращениях.
За генерацию отвечает класс CFile главного модуля. Обрабатываются форматы JPEG, PNG, GIF и WebP (при поддержке на сервере библиотеки GD или ImageMagick).
Функция CFile::ResizeImageGet
Базовый инструмент для программного ресайза — метод CFile::ResizeImageGet(). Он принимает идентификатор файла или массив с данными файла и возвращает массив с путём к готовой копии, её шириной и высотой.
Сигнатура вызова:
CFile::ResizeImageGet($file, array('width'=>300, 'height'=>200), BX_RESIZE_IMAGE_PROPORTIONAL, true);
$file— ID картинки или массив, полученный изCFile::GetFileArray();- второй параметр — целевые
widthиheight; - третий — тип масштабирования (константа
BX_RESIZE_IMAGE_*); - четвёртый — признак использования кэша готовых копий.
В результате в элементе src возвращается относительный путь вида /upload/resize_cache/..., который подставляется в атрибут src тега изображения.
Типы масштабирования
Тип ресайза задаётся константой в третьем параметре. От него зависит, как исходная картинка впишется в заданный прямоугольник.
| Константа | Поведение |
|---|---|
BX_RESIZE_IMAGE_PROPORTIONAL | Пропорциональное уменьшение так, чтобы картинка целиком поместилась в габариты. Итоговые размеры могут быть меньше заданных. |
BX_RESIZE_IMAGE_EXACT | Точный размер: картинка масштабируется и обрезается по центру до указанных ширины и высоты. |
BX_RESIZE_IMAGE_PROPORTIONAL_ALT | Альтернативный пропорциональный алгоритм, ориентированный на заполнение области по меньшей стороне. |
Для превью и логотипов обычно используют PROPORTIONAL, для карточек товара с одинаковой сеткой — EXACT, чтобы все плитки были ровными.
Ресайз в компонентах и шаблонах
Большинство штатных комплексных компонентов умеют ресайзить изображения без ручного кода. Управление ведётся через параметры компонента.
- Откройте страницу с компонентом и включите режим правки.
- Наведите на компонент и выберите Изменить параметры компонента.
- В блоке настроек изображений (например, «Размеры изображений для списка / детального просмотра») укажите ширину и высоту.
- Выберите тип масштабирования, если параметр доступен.
- Сохраните настройки и очистите кэш компонента.
Если компонент не даёт нужной гибкости, ресайз вызывают напрямую в шаблоне template.php через CFile::ResizeImageGet(), подставляя результат в разметку.
Пример в шаблоне
В шаблоне обращаются к полю картинки элемента, передают ID в метод ресайза и выводят полученный src. Готовый путь уже указывает на файл нужного размера в кэше.
Кэш готовых копий
Все созданные на лету копии складываются в каталог /upload/resize_cache/. Имя подкаталога формируется из ID исходного файла, а имя файла — из параметров ресайза, поэтому одинаковые запросы отдаются мгновенно.
- При удалении оригинала через
CFile::Delete()связанные копии из кэша тоже очищаются; - кэш безопасно удалять целиком — копии пересоздадутся при следующем обращении;
- каталог
resize_cacheстоит исключать из бэкапа, чтобы не раздувать его размер.
Если картинка обновилась, а на сайте видна старая версия, чаще всего дело в устаревшей копии в кэше или в кэше компонента — очистите оба.
Частые ошибки
Типичные проблемы при настройке ресайза на лету:
- Картинки не уменьшаются. На сервере не установлена или отключена библиотека GD/ImageMagick. Проверьте раздел Настройки → Инструменты → Проверка системы.
- Размытые превью. Задан
EXACTдля картинок с сильно разным соотношением сторон — часть изображения обрезается. ИспользуйтеPROPORTIONALили подготовьте единый формат оригиналов. - Артефакты и «мыло» на JPEG. Слишком низкое качество сжатия в настройках главного модуля. Поднимите значение качества JPEG.
- Огромный каталог resize_cache. Слишком много уникальных комбинаций размеров. Сократите число различных размеров превью в шаблонах.
- Копия не обновляется. После замены файла осталась старая копия в кэше. Очистите
/upload/resize_cache/и кэш компонента.
Итог
Ресайз на лету в 1С-Битрикс позволяет хранить единственный оригинал и получать любые размеры превью средствами ядра. Для штатных задач достаточно параметров компонента, для нестандартной вёрстки — прямого вызова CFile::ResizeImageGet() с нужным типом масштабирования.
Следите за выбором типа ресайза, качеством JPEG и объёмом каталога resize_cache — этого достаточно, чтобы изображения на сайте были аккуратными и быстро отдавались посетителям.