Scott
Адаптивное кадрирование помогает сохранить главный объект, когда изображение используется в широком баннере, карточке и на узком экране. Сначала определите, что именно должна передавать фотография, затем — пропорции каждого блока. Единая фокусная точка подходит, если композиция выдерживает разные форматы. Если смысл при обрезке теряется, подготовьте отдельный кадр.
Принимайте эти решения рядом с тем текстом, который поддерживает изображение. В Pixso для веб-дизайна широкий и узкий макеты можно расположить рядом и сравнить фотографию, заголовок и действие вместе. Уменьшение готового файла не вернёт объект, который уже срезан границами блока.
Определите, что обязательно должно остаться в кадре
Представьте страницу мастер-класса по приготовлению кофе. Слева на исходной фотографии рука держит чайник, в центре видна струя воды, справа — воронка для заваривания. Важно взаимодействие этих элементов: человек учится заваривать кофе. Кадр, в котором осталась только рука или только воронка, передаёт уже не весь смысл.
Отметьте минимальную область, сохраняющую действие: носик чайника, видимую струю и верхний край воронки. Рука целиком и интерьер кофейни могут давать полезный контекст, но для небольшой карточки они менее важны. Тогда у каждого варианта кадрирования появится понятная задача помимо размещения объекта по центру.
Состав обязательной области зависит от страницы. На карточке товара может понадобиться весь предмет, чтобы показать его форму. На скриншоте инструкции — конкретный элемент управления. Портрет допустимо обрезать плотнее, только если лицо остаётся узнаваемым. Прежде чем выбирать фокусную точку, решите, что должен понять читатель.
Задайте пропорции блоков до экспорта
Запишите формат каждого размещения. Для мастер-класса возьмём баннер 1200 × 480, квадратную карточку 480 × 480 и изображение 360 × 240 над заголовком мобильной страницы. Это размеры для нашего примера, а не универсальные размеры устройств. Именно их соотношения определят, какая часть исходника останется видимой.
| Размещение | Пропорции | Что важно в композиции |
|---|---|---|
| Широкий баннер мастер-класса | 5:2 | Сохранить процесс наливания и спокойную область, если заголовок лежит поверх фотографии |
| Карточка мастер-класса | 1:1 | Оставить вместе носик, струю и воронку; вынести название за пределы изображения |
| Мобильная страница | 3:2 | Показать достаточно контекста, не уменьшая наложенный текст до нечитаемого размера |
Если исходник 3:2 заполняет блок 5:2 без искажения, часть изображения сверху и снизу исчезнет. Фотография 1800 × 1200 при уменьшении до ширины 1200 пикселей становится 1200 × 800. Блок 1200 × 480 скрывает 320 пикселей полученной высоты. При центрировании обрезается по 160 пикселей сверху и снизу; другое выравнивание изменит расположение скрытой области.
Этот расчёт объясняет, почему даже просторный исходник может не подойти. Потеря содержимого связана с пропорциями блока, а не с качеством экспорта. Растягивать фотографию под нужную форму нельзя: это исказит предметы.
Решите, достаточно ли одной фокусной точки
Фокусная точка указывает, какая часть исходника должна оставаться заметной при изменении видимой области. Подход удобен, если главное сосредоточено в небольшом участке, а окружающее пространство можно убрать. Он хуже работает, когда важные элементы находятся далеко друг от друга или заголовку требуется свободное место с разных сторон.
В сцене с кофе квадратный кадр стоит центрировать между носиком и воронкой, а не на самой воронке. Если ради сохранения обоих элементов действие становится слишком мелким, выберите более крупный исходный план или отдельную композицию для карточки. Кадрированием невозможно создать пространство, которого не было на фотографии.
MDN разделяет изменение композиции и выбор разрешения. В первом случае, называемом art direction, для макета подбирается другая видимая область. Во втором меняется число пикселей при той же композиции. Поэтому мобильный кадр и уменьшенный файл для настольной версии — разные результаты работы.
Обсудите с разработчиком, как будет управляться обрезка на готовой странице. Фокусная точка в CMS, позиционирование через CSS и отдельный мобильный файл не обязательно дадут одинаковый результат. Покажите нужную видимую область, не рассчитывая, что один процент позиционирования сохранит её в любом контейнере.
Не заставляйте заголовок конкурировать с фотографией
Фотография, подходящая для короткого английского заголовка, может перестать работать, когда перевод занимает три строки. Проверяйте её с настоящим названием, кнопкой и самым длинным ожидаемым переводом. Свободное пространство — свойство всей композиции, а не только исходного снимка.
В широком баннере заголовок может занимать левую треть, только если ему не мешают чайник и рука. Если действие уже заполняет эту область, поставьте текст рядом с фотографией или под ней. Перенести надпись часто эффективнее, чем раз за разом затемнять изображение.
На телефоне разместите «Научитесь готовить пуровер» и кнопку записи под фотографией. Так действие останется целиком в кадре, а текст — нормального читаемого размера. Будущее изменение заголовка тоже не потребует нового кадрирования.
Если наложение необходимо, градиент или однотонная подложка могут помочь, но проверять нужно сами буквы на фоне во всех вариантах обрезки. При изменении ширины светлый участок может оказаться прямо за словом. Текст внутри растровой фотографии сложнее переносить и переводить, чем обычный текст страницы.
Соберите три композиции рядом в Pixso
Разместите исходную фотографию рядом с широким, квадратным и мобильным фреймами в Pixso. Оставьте доступной необрезанную копию: последующие изменения не должны начинаться с уже кадрированного экспорта. До оценки результата добавьте настоящие заголовки страницы и карточки возле соответствующих изображений.
Во всех трёх фреймах проверяйте одни и те же детали: носик чайника, струю и верхний край воронки. Если что-то исчезло, сдвиньте видимую область или измените композицию. Воронка должна оставаться с той же стороны, если вы сознательно не выбрали другой снимок. Зеркальное отражение может исказить асимметричный товар, надписи или расположение элементов управления.
Назовите фреймы по назначению: «Баннер мастер-класса — широкий», «Карточка — квадрат», «Страница мастер-класса — мобильная». Рядом укажите обязательный объект и важные условия размещения. Коллеги должны понимать, намеренно ли сделано отличие, без просмотра каждого экспортированного файла.
Оценивайте композиции в размере, в котором их увидит посетитель. Красивая увеличенная карточка в настоящем списке может превратить струю воды в неразличимую линию. Если эта деталь важна, укрупните действие или выберите более понятную фотографию: дополнительное разрешение само по себе проблему не решит.
Разделяйте композицию и размеры файла
Когда кадр выбран, определите размеры экспорта и форматы доставки. Для блока шириной 360 CSS-пикселей можно подготовить растровый вариант шириной 720 пикселей для экрана с плотностью 2×. Это пример расчёта: полезный набор вариантов зависит от настоящих размеров блока и поддерживаемой плотности экранов.
Дайте каждой композиции отдельное имя и различайте её версии по разрешению. Квадратная карточка и изображение мобильной страницы не должны называться одинаково неопределённо — например, «small». Разработчику важно понимать, изменено ли содержимое кадра или только количество пикселей.
Укажите пропорции отображения, главный объект, размеры экспорта и место использования. Альтернативный текст должен описывать вклад изображения именно в этом месте страницы. Если соседний заголовок уже сообщает всё нужное, а фото только украшает блок, при реализации может подойти пустой alt. Если важна техника наливания, кратко опишите её.
В руководстве по форматам изображений разобраны растровые и векторные форматы. Выбор формата и сжатия следует за выбором кадра: резкое и лёгкое изображение всё равно может передавать не тот смысл.
Проверьте промежуточные размеры
Настольный и мобильный макеты показывают только две точки меняющейся страницы. Попросите разработчика проверить реализацию между ними, особенно там, где заголовок получает дополнительную строку или меняется количество колонок. Кадр, удачный на обоих крайних размерах, может стать неудачным в более узкой настольной колонке.
Для нашего мастер-класса пройдите путь от карточки к подробной странице. Карточка должна достаточно ясно показывать действие и формировать верное ожидание, а страница — помогать узнать ту же сцену. Убедитесь, что опубликованная версия использует выбранный кадр, а не автоматически обрезанный по центру вариант из CMS.
Если изображение не работает, определите, что потерялось: объект, связь между объектами или место для текста. Затем меняйте форму блока, композицию или размещение надписи. Адаптивное кадрирование выполнено удачно, когда изменение макета не меняет смысл фотографии.
