region23
@region23
веб-разработчик

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

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

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

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

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

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

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

iPad
5d80a07c9bf8e472757564.png

iPhone
5d80a08a74c1e749193417.png
  • Вопрос задан
  • 246 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега Вёрстка
<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>

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы