Ресайз изображений и WebP

Правильный размер фотографий влияет одновременно на скорость загрузки и качество сравнения. Модуль позволяет автоматически подготовить рабочие размеры изображений из инфоблока и файлов, указанных по ID.

[Скриншот 1: параметры ресайза в компоненте]

Готовые пресеты

920×520

Универсальный горизонтальный вариант. Подходит для большинства кейсов, где основная область страницы имеет ширину около 900 пикселей.

920×920

Квадратная область. Удобна для портретов, бьюти-кейсов и изображений, где важна высота.

1200×675

Широкоформатный вариант 16:9 для больших контентных блоков.

CUSTOM

Позволяет задать собственную ширину и высоту.

Без ресайза

Основные изображения используются без подготовки уменьшенной копии. Выбирайте этот вариант только если исходные файлы уже оптимизированы по размеру.

PROPORTIONAL

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

EXACT

Формирует изображение точного заданного размера с кадрированием. Удобно, когда все карточки должны иметь строго одинаковую геометрию.

Проверьте важные детали у краёв кадра: при точном ресайзе часть исходной фотографии может не попасть в итоговую копию.

CSS aspect-ratio

Это соотношение сторон контейнера, в котором показываются обе картинки. Оно не является отдельным размером файла, а определяет форму блока на странице.

Если поле пустое:

при выбранном пресете используется его отношение ширины к высоте;
при отключённом ресайзе компонент использует резервную пропорцию.

Если нужно жёстко сохранить форму независимо от выбранного размера, задайте значение вручную, например 16/9, 1/1 или 920/520.

Почему изображение может обрезаться

Стандартный шаблон растягивает фотографию на всю область с заполнением контейнера. Если пропорции файла и контейнера отличаются, края могут быть обрезаны. Это нормальное поведение для ровного наложения «До» и «После».

Чтобы избежать нежелательного кадрирования, подготовьте обе фотографии с тем же соотношением сторон, что и блок.

WebP

Для локальных JPEG, PNG и GIF модуль пытается создать WebP-копию, если сервер поддерживает формирование WebP. Браузеру сначала предлагается WebP, а исходный файл остаётся запасным вариантом.

Если WebP на сервере недоступен, блок продолжает работать с оригинальными изображениями.

Качество WebP

Значение задаётся от 0 до 100. По умолчанию используется 82.

70–80 — меньший файл, может быть заметнее сжатие;
80–88 — хороший универсальный диапазон;
90 и выше — больше размер файла, имеет смысл для фотографий с мелкими деталями.

Файлы по ID и по пути

Если ручной компонент получает ID файла, для него доступен штатный ресайз. Если передан обычный путь или внешний URL, компонент использует его напрямую и не может выполнить такой же ресайз по ID.

WebP для пути создаётся только когда это локальный файл сайта, доступный серверу. Для внешнего URL используется исходный адрес.

Иконки

Иконки подготавливаются отдельно от основных фотографий. Их рабочий размер рассчитывается как отображаемый размер, умноженный на Retina-множитель. Например, 56 × 2 даёт увеличенную миниатюру, которая затем отображается в круге 56 px.

[Скриншот 2: визуальное сравнение пресетов и методов PROPORTIONAL/EXACT]

Проверка качества

Откройте страницу на обычном и Retina-экране, проверьте мелкий текст или детали на фотографиях и убедитесь, что кадрирование одинаково воспринимается у «До» и «После».

[Скриншот 3: пример одного изображения в обычном и увеличенном фрагменте после оптимизации]