В системе Битрикс настройка разрешения изображений в компоненте more photos напрямую влияет на скорость загрузки страниц и качество отображаемых фотографий. По умолчанию платформа использует стандартные параметры, которые часто не подходят для специфических задач по оптимизации или дизайну. Для корректного изменения разрешения необходимо работать с настройками визуального компонента и шаблона, а также с параметрами модуля Информационных блоков.
Изменение разрешения происходит в основном через вызов метода CFile::ResizeImageGet, который позволяет задать ширину и высоту итогового изображения, а также режим масштабирования. Важно учитывать, что неправильные параметры могут привести к искажению или ухудшению качества фотографий. Рекомендуется устанавливать размеры, ориентируясь на реальные размеры блоков сайта, чтобы избежать лишней нагрузки на сервер и избыточного трафика.
Настройка разрешения более надежна, если выполнять ее не в шаблоне компонента, а через параметры визуального редактора в административной панели. При этом необходимо проверить, что кеширование обновлено, иначе изменения не отобразятся. Рекомендуется использовать значения ширины и высоты, кратные 2 или 4, для оптимальной работы алгоритмов сжатия. Кроме того, стоит обратить внимание на формат изображений – современные сайты выигрывают от использования WebP с fallback на JPEG или PNG.
Где находятся настройки качества изображений в модуле more photos
Настройки качества изображений в модуле «Дополнительные фотографии» (more photos) в Битрикс зависят от параметров инфоблока и компонентов, использующих этот модуль. Основное управление осуществляется через параметры масштабирования и обработки изображений при загрузке и отображении.
Для изменения качества изображений необходимо выполнить следующие действия:
1. Перейдите в административную часть Битрикс: Контент → Инфоблоки → Тип инфоблока → Инфоблок.
2. Откройте нужный инфоблок, где используется свойство типа «Файл» с множественным выбором (именно оно задействовано в more photos).
3. Найдите свойство, отвечающее за дополнительные фотографии (обычно называется «MORE_PHOTO»), и убедитесь, что для него установлены допустимые форматы изображений (JPEG, PNG) и ограничения по размеру.
Пример настройки:
$arFile = CFile::ResizeImageGet($arResult["MORE_PHOTO"][$i], array(
"width" => 800,
"height" => 800
), BX_RESIZE_IMAGE_PROPORTIONAL, true);
Параметры width и height задают разрешение, BX_RESIZE_IMAGE_PROPORTIONAL – тип масштабирования. Качество JPEG устанавливается через глобальные настройки:
1. Перейдите в Настройки → Настройки продукта → Настройки модулей → Главный модуль.
2. В разделе «Обработка изображений» задайте нужное значение параметра «Качество JPEG» (по умолчанию – 75).
Также можно задать качество непосредственно в коде с помощью ключа quality:
$arFile = CFile::ResizeImageGet($arResult["MORE_PHOTO"][$i], array(
"width" => 800,
"height" => 800
), BX_RESIZE_IMAGE_PROPORTIONAL, true, array("quality" => 90));
Изменения в шаблоне компонента требуют последующего сохранения и кэширования. После правок рекомендуется очистить кеш сайта.
Как изменить параметры ширины и высоты для загружаемых фото
В Битрикс параметры ширины и высоты изображений задаются на этапе обработки файлов при загрузке. Для изменения этих параметров необходимо внести правки в компонент или модуль, обрабатывающий изображения. Например, если используется компонент catalog.element, откройте шаблон компонента в папке /local/templates/ваш_шаблон/components/bitrix/catalog.element/.
Найдите участок кода, отвечающий за обработку картинок. Обычно используется функция CFile::ResizeImageGet. Пример вызова:
$arFileTmp = CFile::ResizeImageGet($arResult["MORE_PHOTO"][$i], array("width" => 800, "height" => 600), BX_RESIZE_IMAGE_PROPORTIONAL, true);
Замените значения width и height на требуемые. Тип масштабирования можно изменить, передав вместо BX_RESIZE_IMAGE_PROPORTIONAL другие значения, например:
BX_RESIZE_IMAGE_EXACT– жесткая обрезка под заданные размеры;BX_RESIZE_IMAGE_PROPORTIONAL_ALT– пропорциональное масштабирование с учетом оптимального качества.
После внесения изменений очистите кеш сайта, чтобы новые параметры вступили в силу. Если используется модуль инфоблоков, аналогичная настройка возможна через API при загрузке элементов или через события OnBeforeIBlockElementAdd и OnBeforeIBlockElementUpdate.
Настройка пропорций и обрезки при изменении разрешения
При изменении разрешения изображений в компоненте «more photos» в Битрикс важно учитывать соотношение сторон и метод обрезки. Неправильная настройка может привести к искажению контента или некорректному отображению на витрине.
- Для контроля пропорций используйте метод
ResizeImageGetс параметромBX_RESIZE_IMAGE_PROPORTIONAL, чтобы избежать деформации. Пример:
$arFileTmp = CFile::ResizeImageGet(
$arItem["DETAIL_PICTURE"],
array("width" => 800, "height" => 800),
BX_RESIZE_IMAGE_PROPORTIONAL,
true
);
- Если требуется строгое соответствие заданным размерам, применяйте
BX_RESIZE_IMAGE_EXACT. Это приведёт к обрезке изображения по центру:
$arFileTmp = CFile::ResizeImageGet(
$arItem["DETAIL_PICTURE"],
array("width" => 600, "height" => 600),
BX_RESIZE_IMAGE_EXACT,
true
);
- Обрезка по центру может некорректно кадрировать изображения с важными элементами по краям. В этом случае создайте собственную логику обрезки через
imagecopyresampledи определение фокуса вручную. - Оптимальное соотношение сторон для галерей – 4:3 или 1:1. Избегайте широких панорам, они теряют информативность при обрезке.
- Проверяйте визуальный результат на мобильных устройствах: неправильная обрезка особенно заметна на узких экранах.
- Храните оригиналы в высоком разрешении, а версии для отображения – в оптимизированном виде. Это ускоряет загрузку и снижает нагрузку на сервер.
Влияние настроек разрешения на скорость загрузки страниц
Разрешение изображений в компоненте more photos напрямую влияет на объём передаваемых данных. Например, фотография с разрешением 2000×1500 пикселей в формате JPEG может весить до 1,5 МБ, тогда как уменьшение до 800×600 снижает размер до 150–300 КБ без значимой потери качества на экране пользователя.
Высокое разрешение увеличивает время загрузки, особенно на мобильных устройствах с медленным соединением. Задержка даже в 1 секунду способна снизить конверсию на 7%. При 10 изображениях это критично: страница может загружаться 5–8 секунд вместо 1–2, что превышает допустимый порог для комфортного взаимодействия.
В настройках компонента catalog.element следует задавать параметры MORE_PHOTO_WIDTH и MORE_PHOTO_HEIGHT в диапазоне 600–1000 пикселей. Это обеспечивает баланс между качеством и производительностью.
Оптимально использовать прогрессивный JPEG и сжатие без потерь через php-imagick или внешние сервисы (например, TinyPNG через API). Это дополнительно снижает вес изображений до 70% без визуальных искажений.
Использование lazy load (ленивая загрузка) для блока more photos – обязательное условие. Загрузка происходит по мере прокрутки, что резко сокращает initial load и улучшает показатели Largest Contentful Paint.
Контроль за размерами и форматом изображений – ключ к быстрой загрузке страниц и улучшению показателей Core Web Vitals в Битрикс-сайтах.
Как обновить уже загруженные изображения после изменения разрешения
После изменения параметров разрешения в настройках компонента more photos (например, DETAIL_PICTURE_WIDTH и DETAIL_PICTURE_HEIGHT), старые изображения автоматически не пересоздаются. Чтобы применить новые размеры, необходимо вручную инициировать перерасчет картинок.
Откройте административную панель и перейдите в раздел «Настройки» → «Инструменты» → «Генерация изображений». Выберите типы изображений, которые были изменены, и запустите пересоздание. Если такой раздел отсутствует, используйте скрипт php_interface/resize_images.php с вызовом метода CFile::ResizeImageGet для каждого изображения в каталоге.
Другой способ – очистить директорию с кешем миниатюр /upload/resize_cache/. После этого при первом запросе к товару изображения будут пересозданы с новыми параметрами. Убедитесь, что права на запись в папку /upload установлены корректно.
Для массового обновления изображений можно написать агент или запустить консольный скрипт, проходящий по всем элементам инфоблока и пересохраняющий детальные и дополнительные фотографии с новым разрешением, используя CIBlockElement::GetList и CIBlockElement::Update.
Проверку результата проводите не через админку, а непосредственно в публичной части сайта, чтобы убедиться, что кеш действительно обновился.
Использование дополнительных инструментов для сжатия и оптимизации фото
Для минимизации нагрузки на сервер и ускорения загрузки страниц в Битрикс рекомендуется использовать внешние утилиты, такие как TinyPNG, ImageOptim или Squoosh. Эти сервисы позволяют сжимать изображения без заметной потери качества, особенно актуально для форматов JPEG и PNG, которые часто применяются в галереях more photos.
Перед загрузкой изображений в административную панель следует привести их разрешение к оптимальному значению – не выше 1920 по ширине для полноэкранного просмотра и 800–1200 пикселей для стандартных галерей. Избыточные размеры не только увеличивают вес файла, но и замедляют рендеринг на клиентской стороне.
Для пакетной обработки большого количества изображений целесообразно использовать инструменты вроде FileOptimizer или Caesium. Они позволяют задать уровень сжатия, автоматизировать переименование и сохранить структуру папок, что удобно при обновлении фотогалерей через FTP или API.
Дополнительно рекомендуется конвертировать изображения в формат WebP. Он обеспечивает лучшую компрессию и поддерживается большинством современных браузеров. Интеграция в Битрикс возможна с помощью модуля для автоматической генерации WebP-копий, например, с использованием скрипта на стороне сервера с вызовом cwebp.
После оптимизации важно провести тестирование с помощью инструментов PageSpeed Insights или Lighthouse. Это позволяет оценить влияние изменений на производительность и корректно адаптировать политику загрузки изображений (lazy load, srcset).
Ошибки при изменении разрешения и способы их устранения
Частая ошибка – изменение размеров изображений без пересоздания превью. После изменения параметров в init.php или компоненте catalog.element, необходимо полностью сбросить кэш и удалить старые превью-файлы из директории /upload/resize_cache/. Без этого новые размеры не применяются.
Неверные параметры функции CFile::ResizeImageGet приводят к искажённым изображениям или обрезке важных фрагментов. Убедитесь, что задан правильный тип масштабирования: BX_RESIZE_IMAGE_PROPORTIONAL, EXACT или PROPORTIONAL_ALT в зависимости от задачи. Ошибочный выбор нарушает пропорции или не учитывает прозрачность PNG-файлов.
Изменения в шаблоне компонента без очистки композитного кэша часто остаются незаметными. Отключите композитный режим на время разработки или очищайте его через административную панель вручную, иначе браузер продолжит загружать старую версию DOM.
Нарушение прав на папку /upload приводит к тому, что новые превью не записываются. Проверьте разрешения: веб-сервер должен иметь права на запись и изменение файлов. Ошибки записи отображаются в логах bitrix/logs/.
Некорректно настроенные параметры в административной панели инфоблока, особенно для свойства типа «Файл» (multiple file), могут блокировать генерацию нужных размеров. Убедитесь, что для свойства «MORE_PHOTO» установлены правильные ограничения по размеру и типу загружаемых файлов.
При использовании сторонних шаблонов или решений из маркетплейса возможны конфликты с системной логикой формирования изображений. В таких случаях просмотрите шаблон компонента и при необходимости вручную добавьте вызов CFile::ResizeImageGet с нужными параметрами.
Вопрос-ответ:
Как изменить максимальное разрешение изображений в галерее «More Photos» в Битрикс?
Чтобы изменить разрешение изображений в дополнительной фотогалерее «More Photos», нужно отредактировать параметры компонента или шаблона, который выводит детальную страницу товара. Обычно используется компонент catalog.element. В его параметрах можно задать размеры превью и детального изображения, например: `DETAIL_PICTURE_WIDTH`, `DETAIL_PICTURE_HEIGHT`, `MORE_PHOTO_WIDTH`, `MORE_PHOTO_HEIGHT`. Также важно проверить, не задаются ли ограничения на уровне шаблона верстки или стилей CSS. После изменений стоит очистить кеш сайта, чтобы обновления вступили в силу.
Можно ли загрузить фото с нестандартным разрешением и не потерять качество в «More Photos»?
Да, можно, но нужно учитывать настройки автоматической обработки изображений. Битрикс при загрузке может создавать уменьшенные копии в соответствии с заданными параметрами. Чтобы сохранить оригинальное качество, нужно отключить автосжатие в настройках компонента или изменить параметры функции CFile::ResizeImageGet, если она используется в шаблоне для вывода изображений. Также важно проверить настройки PHP на сервере, так как они могут ограничивать максимально допустимые размеры изображений.
Почему загруженные изображения в «More Photos» выглядят размытыми?
Причина может быть в том, что изображения автоматически сжимаются до заданных размеров при загрузке или выводе. Часто это происходит из-за использования устаревших значений в resize-массивах или ограничений в CSS. Проверьте, какие размеры указаны в шаблоне компонента и не превышают ли они реальные размеры сгенерированных копий. Также проверьте качество сжатия — в параметрах функции обработки изображений можно указать уровень качества (по умолчанию он может быть ниже 80%).
Где найти настройки, которые отвечают за размеры фото в «More Photos»?
Настройки находятся либо в параметрах компонента `catalog.element`, либо непосредственно в шаблоне компонента. Обычно там используется функция `CFile::ResizeImageGet`, в которой задаются размеры итоговых изображений. Поищите участки кода вида `$arFile = CFile::ResizeImageGet(…)`, а также проверьте массив параметров компонента. Кроме того, размеры могут задаваться в шаблоне через HTML или CSS, особенно если используется сторонний слайдер или галерея.
Нужно ли пересоздавать уже загруженные изображения после изменения разрешения?
Да, если вы изменили параметры вывода изображений, то для уже загруженных фото потребуется пересоздание превью. Иначе изменения будут применяться только к новым изображениям. Это можно сделать с помощью встроенного инструмента в административной панели — «Пресеты изображений» или через консольный скрипт, использующий `CFile::ResizeImageGet` с новыми параметрами. Также можно воспользоваться сторонними модулями оптимизации изображений, если они поддерживают массовую обработку файлов.
Загрузка...
