Иванов Андрей

Технический директор

2386

Одна из частых задач, которая (по неясной нам причине) вызывает вопросы у заказчиков — наполнение блоков изображениями.

Как правило, речь идёт о каком-то блоке с фиксированной шириной и высотой (акционный слайдер, галерея, анонс новости и так далее).

Для примера, рассмотрим случай, когда нам необходимо вставить горизонтальное изображение шириной 924px и высотой 462px (соотношение сторон ровно 2:1).

Какие возможные варианты развития событий:

  • Заказчик подбирает изображение ровно в том же разрешении (924х462 или больше) и ровно той пропорции (2:1), что нужны.

  • Заказчик подбирает изображение в той же пропорции (2:1), но в другом разрешении — либо больше, допустим, 1800х900. Либо в меньшем, допустим, 300х150.

  • Заказчик пытается вставить изображение не в той пропорции. Например, квадратное изображение.

  • Как и предыдущий вариант, пропорция не соблюдена, заказчик пытается вставить вертикальное изображение.

Есть всего 3 варианта метода обрезания изображения:

  • Непропорциональное изменение изображения
  • Пропорциональное изменение изображения
  • Автоматическая обрезка по большей стороне

Рассмотрим, что у нас получится во всех трёх случаях

Вариант №1. Непропорциональное изменение изображения

Заполнить необходимую область, не обращая внимания на пропорции изображения. Модуль просто растягивает/сжимает картинку до искомых 924х462px.

Изображение нужного разрешения и пропорции

В данном случае, при таком методе обрезки, никаких проблем не происходит

Изображение той же пропорции, но в другом разрешении. Сначала в бОльшем, затем — в меньшем.

В данном случае, при бОльшем разрешении нет никаких проблем, модуль автоматически кадрирует изображение до нужного разрешения. Но в случае с меньшим разрешением, изображение начинает пикселить, т.к. растровую картинку невозможно увеличить без потери качества.

Изображение не в той пропорции — квадратная версия

Вот тут у нас начинаются проблемы, т.к. нельзя изменить пропорции картинки, оставив при этом её адекватное изображение.

Изображение не в той пропорции — вертикальная версия

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

Вариант №2. Пропорциональное изменение изображения

Следующий вариант — модуль получает изображение и начинает пропорционально его увеличивать/уменьшать, пока по одной из нужных сторон (имеется в виду, по вертикали или горизонтали), изображение не заполнит нужный размер.

Изображение нужного разрешения и пропорции

В данном случае, при таком методе обрезки, никаких проблем не происходит

Изображение той же пропорции, но в другом разрешении. Сначала в бОльшем, затем — в меньшем.

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

Изображение не в той пропорции — квадратная версия

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

Изображение не в той пропорции — вертикальная версия

Аналогичная картина, что и в предыдущем варианте: предел высоты наступает раньше, чем ширины.

Вариант №3. Пропорциональное изменение изображения

Следующий вариант — модуль получает изображение и начинает пропорционально его увеличивать/уменьшать, пока по одной из нужных сторон (имеется в виду, по вертикали или горизонтали), изображение не заполнит нужный размер.

Изображение нужного разрешения и пропорции

Как вы уже поняли, в данном случае нет проблем никаких снова.

Изображение той же пропорции, но в другом разрешении. Сначала в бОльшем, затем — в меньшем.

В данном случае, ситуация повторяет вариант №1. В бОльшем разрешении нет никаких проблем, в меньшем — изображение начинает пикселить.

Изображение не в той пропорции — квадратная версия

Так как изображение квадратное и метод обрезки от центра, конкретно в данном случае результат довольно приемлемый, т.к. сама изначальная картинка ориентирована к центру изображения.

Но если бы изображение было смещено к одной из сторон, то результат вряд ли устроил бы кого-то:

Изображение не в той пропорции — вертикальная версия

Ровно та же ситуация. Чисто геометрически невозможно из вертикального изображения получить адекватное отображение в горизонтальном контейнере:

Вот и всё, больше нет ни одного вариант (чисто геометрически), как мы могли бы настроить метод кадрирования фотографии в ситуации, когда изображение должно полностью заполнить контейнер

Выводы

По факту, есть единственный способ добиться красивого результата: потратить немного времени и привести изображение к нужном формату. Пропорция пусть даже не соблюдается на 100%, но загружаемое изображение должно хотя бы примерно быть в пропорциях контейнера.

Не существует магии, существует геометрия и алгоритмы. Никакой модуль не сможет красиво вставить любое изображение в любой контейнер. Вам всё равно придётся «играть по правилам», чтобы получить хороший результат.

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

Поделиться в: