Сайт фотографа: как подготовить обложки, которые сохраняют главный сюжет

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

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

Начните с проверки одного неудобного снимка

В учебном примере оригинал имеет размер 6000 × 4000 пикселей, а карточка — пропорции 350 × 500. Чтобы заполнить её без искажения пропорций, придётся оставить область шириной 2800 пикселей при полной высоте 4000. В центральном положении видимый участок начинается с координаты X=1600.

Предположим, важная область занимает прямоугольник от X=800 до X=2400 и от Y=500 до Y=3000. При центральном кадрировании половина её ширины окажется за левым краем. Увеличивать разрешение файла бесполезно: проблема здесь в геометрии выбранной обложки, а не в количестве пикселей.

Не путайте заполнение карточки и просмотр оригинала

CSS-свойство object-fit позволяет задавать способ размещения изображения. Режим cover заполняет область с сохранением пропорций и при необходимости обрезает лишнее; contain сохраняет изображение целиком, оставляя свободное пространство при несовпадении пропорций. Положение содержимого задаётся отдельно через object-position. Это описано в документации MDN.

У обложки и полноэкранной галереи могут быть разные задачи. Первая помогает выбрать серию, вторая показывает сами работы. Не стоит автоматически переносить правила тесной карточки на большой просмотр. И наоборот, удачный полный кадр не гарантирует хорошую миниатюру в списке.

Что означает важная область

В инструменте это прямоугольник в координатах оригинала: левый верхний угол, ширина и высота. Он задаётся вручную и не обнаруживает лица. Если сюжет включает несколько удалённых деталей, прямоугольник должен охватить их вместе. Иногда такой участок шире доступной обложки, и никакой сдвиг не сохранит его целиком.

Процент видимости относится к площади введённого прямоугольника. Он не является оценкой качества фотографии. Потерять небольшую долю этого прямоугольника можно и вместе с самым важным жестом. Поэтому геометрический расчёт помогает исключить невозможное, а окончательное композиционное решение принимает фотограф.

Проверьте сдвиг, прежде чем менять весь дизайн

1. Введите размеры оригинала после учёта его ориентации.
2. Укажите пропорции карточки без рамок и внешних отступов.
3. Задайте координаты важной области внутри оригинала.
4. Сравните центральное положение с другим процентом по горизонтали или вертикали.
5. Если подходящего диапазона нет, измените пропорции карточки либо подготовьте отдельную обложку.

Для учебного снимка допустимое начало видимой области по X лежит от 0 до 800. При ширине скрываемого остатка 3200 это соответствует положению от 0% до 25%. Значение 20% даёт начало X=640 и сохраняет важный прямоугольник целиком. По Y изображение не обрезается, поэтому вертикальное положение ничего не меняет.

Проценты в этой модели относятся к свободе сдвига между краями, а не напрямую к координатам интересующей точки. Инструмент показывает оба представления. Вводимое положение ограничено диапазоном 0–100%; более сложные CSS-выражения, повороты и трансформации здесь не моделируются.

Как оформить требования к галерее на сайте

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

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

Что передать разработчику

Вместе с файлами передайте назначения изображений: обложка серии, фон первого экрана, работа внутри галереи. Укажите, где редактор должен иметь возможность менять кадрирование, и кто утверждает результат. Это практическая часть задания на сайт фотографа, а не отдельное обещание, что система сама поймёт художественный замысел.

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