Алгоритмы кадрирования изображений на сайте
Одна из частых задач, которая (по неясной нам причине) вызывает вопросы у заказчиков — наполнение блоков изображениями.
Как правило, речь идёт о каком-то блоке с фиксированной шириной и высотой (акционный слайдер, галерея, анонс новости и так далее).
Для примера, рассмотрим случай, когда нам необходимо вставить горизонтальное изображение шириной 924px и высотой 462px (соотношение сторон ровно 2:1).
Какие возможные варианты развития событий:
- Заказчик подбирает изображение ровно в том же разрешении (924х462 или больше) и ровно той пропорции (2:1), что нужны.
- Заказчик подбирает изображение в той же пропорции (2:1), но в другом разрешении — либо больше, допустим, 1800х900. Либо в меньшем, допустим, 300х150.
- Заказчик пытается вставить изображение не в той пропорции. Например, квадратное изображение.
- Как и предыдущий вариант, пропорция не соблюдена, заказчик пытается вставить вертикальное изображение.
Есть всего 3 варианта метода обрезания изображения:
- Непропорциональное изменение изображения
- Пропорциональное изменение изображения
- Автоматическая обрезка по большей стороне
Рассмотрим, что у нас получится во всех трёх случаях
Вариант №1. Непропорциональное изменение изображения
Заполнить необходимую область, не обращая внимания на пропорции изображения. Модуль просто растягивает/сжимает картинку до искомых 924х462px.
Изображение нужного разрешения и пропорции
В данном случае, при таком методе обрезки, никаких проблем не происходит
Изображение той же пропорции, но в другом разрешении. Сначала в бОльшем, затем — в меньшем.
В данном случае, при бОльшем разрешении нет никаких проблем, модуль автоматически кадрирует изображение до нужного разрешения. Но в случае с меньшим разрешением, изображение начинает пикселить, т.к. растровую картинку невозможно увеличить без потери качества.
Изображение не в той пропорции — квадратная версия
Вот тут у нас начинаются проблемы, т.к. нельзя изменить пропорции картинки, оставив при этом её адекватное изображение.
Изображение не в той пропорции — вертикальная версия
Аналогичная проблема, но в масштабах ещё хуже, т.к. квадрат более близок к пропорции 2:1, чем вертикальное изображение
Вариант №2. Пропорциональное изменение изображения
Следующий вариант — модуль получает изображение и начинает пропорционально его увеличивать/уменьшать, пока по одной из нужных сторон (имеется в виду, по вертикали или горизонтали), изображение не заполнит нужный размер.
Изображение нужного разрешения и пропорции
В данном случае, при таком методе обрезки, никаких проблем не происходит
Изображение той же пропорции, но в другом разрешении. Сначала в бОльшем, затем — в меньшем.
В данном случае, при бОльшем разрешении нет никаких проблем, модуль автоматически уменьшает изображение до момента, пока оно не заполнит контейнер. Но в случае с меньшим разрешеним, модуль не растягивает его (т.к. изначально изображение уже полностью помещается в контейнере). И модуль лишь заполняет указанным цветом всё вокруг.
Изображение не в той пропорции — квадратная версия
Так как у исходного контейнера высота меньше ширины, а у исходного изображения обе стороны одинаковы (квадрат), то нужная сторона в данном случае - высота, которая наступает по алгоримту раньше. Поэтому изображение полностью входит в контейнер по высоте, а всё остальное заливает указанным цветом.
Изображение не в той пропорции — вертикальная версия
Аналогичная картина, что и в предыдущем варианте: предел высоты наступает раньше, чем ширины.
Вариант №3. Пропорциональное изменение изображения
Следующий вариант — модуль получает изображение и начинает пропорционально его увеличивать/уменьшать, пока по одной из нужных сторон (имеется в виду, по вертикали или горизонтали), изображение не заполнит нужный размер.
Изображение нужного разрешения и пропорции
Как вы уже поняли, в данном случае нет проблем никаких снова.
Изображение той же пропорции, но в другом разрешении. Сначала в бОльшем, затем — в меньшем.
В данном случае, ситуация повторяет вариант №1. В бОльшем разрешении нет никаких проблем, в меньшем — изображение начинает пикселить.
Изображение не в той пропорции — квадратная версия
Так как изображение квадратное и метод обрезки от центра, конкретно в данном случае результат довольно приемлемый, т.к. сама изначальная картинка ориентирована к центру изображения.
Но если бы изображение было смещено к одной из сторон, то результат вряд ли устроил бы кого-то:
Изображение не в той пропорции — вертикальная версия
Ровно та же ситуация. Чисто геометрически невозможно из вертикального изображения получить адекватное отображение в горизонтальном контейнере:
Вот и всё, больше нет ни одного вариант (чисто геометрически), как мы могли бы настроить метод кадрирования фотографии в ситуации, когда изображение должно полностью заполнить контейнер
Выводы
По факту, есть единственный способ добиться красивого результата: потратить немного времени и привести изображение к нужном формату. Пропорция пусть даже не соблюдается на 100%, но загружаемое изображение должно хотя бы примерно быть в пропорциях контейнера.
Не существует магии, существует геометрия и алгоритмы. Никакой модуль не сможет красиво вставить любое изображение в любой контейнер. Вам всё равно придётся «играть по правилам», чтобы получить хороший результат.
Надеюсь, эта статья немного наведёт порядок в понимании, почему в финальном результате, на сайте, изображение выглядит не так, как вы представляли у себя в голове. Поменять метод обрезки на продакшен-версии — дело одной минуты. Вам лишь нужно выбрать для себя единый алгоритм, по которому в будущем вы будете готовить все изображения для вашего сайта.