Как умно ресайзить фотографию под разные разрешения экранов и пропорции (десктоп, смартфон)?

Question

[Павел]

Размер оригинальной фотографии: max 1600x500
Если фото больше, то делаю cropping and resizing до 1600x500 библиотекой Intervention Image image.intervention.io/api/fit

Главный объект на разных фотографиях может быть в разных частях (слева, справа, по центру, внизу, вверху и так далее ).

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

Как бы вы решили задачу адаптации фото под разные устройства и пропорции? Можно ли это сделать автоматически?

Мне пока в голову пришел только вариант, когда закачиваем 2 фото: для десктопа и версию кропнутую человеком для мобилы.

Как это выглядит на устройствах:
Desktop


iPad


iPhone

Comments

[Rustam Bainazarov]

Посмотрите, как это решено на сайте Apple. Для разных разрешений — разные картинки. Там для удобства вообще через background-image сделано. Всё равно будет грузится только та картинка, которая нужна в данный момент, а не все пути из CSS.

Answer 1

[WapSter]

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

браузер не грузит лишнии изображения. Это самый правильный и быстрый вариант

Comments

[Павел]

Супер! Это то, что нужно.

А возможно ли делать такую динамическую подстановку если изображение задается через стиль?

style="background-image:url({{ $course->picture() }});"

[SuperToster]

Павел, Учтите, что ie11, mobile и ещё некоторые динозавры элемент не поддерживает. Подробней: caniuse.com/#search=picture

[Rustam Bainazarov]

Павел, нет. Картинки же разные должны быть. У вас одна генерируется. И то — на фон.

[WapSter]

SuperToster, я не уверен, что ie его отрендерит проверить не могу. Но по идее должен сработать внутри picture img с картинкой по умолчанию.

Answer 2

[Антон Усачев]

Тебе в голову пришел совершенно правильный вариант.
Вообще, в каждой ситуации нужно отталкиваться от того, что должно получиться в результате. Если речь о визуальной составляющей, то на нее и нужно смотреть, подгонять и т.д.
Автоматически можно только только задать object-fit и object-position, но зато с этими параметрами и размерами (width, height) изображения потом можно "играть" через медиа-запросы, подгоняя под нужный вариант.