Так сколько изображений надо готовить для адаптивного сайта (+ retina)?

Всем привет.
Допустим, у меня картинка 100% ширины. Мне нужно качественное отображение на популярных экранах. Как это организовать?
Напрашивается примерно такой список размеров(по ширине):
1920px - для больших экранов и ретины с двойным разрешением
2560 - ретина с тройным разрешением
1280 - обычные экраны, ретина
Ну и, допустим,
1080 и 720 (Или 1024? и 768? Или все вместе?)
Итого пять-шесть вариантов одного изображения (это много или мало?)

И как их подключать? Использовать медиа запросы или picture c включением img для старых браузеров?
Если устройство меняет ориентацию после загрузки сайта - сразу же будет загружаться новое изображение или можно как-то приостановить этот процесс (и нужно ли?)

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

Спасибо всем за ответы!
  • Вопрос задан
  • 4529 просмотров
Решения вопроса 2
pm_wanderer
@pm_wanderer
junior-HTML
Бери одну картинку, размером "требуемая максимальная ширина экрана помноженная на два" и делай ее. Это самый простой вариант. Если хочется немного пооптимизировать, то бери две картинки - одна большая как в первом случае, а вторая - в два раза меньше. Оптимизировать отдельно для каждого устройства не обязательно - на скорость загрузки это особо не влияет. Картинки только не забудь сжать оптимизатором)

Судя по всему, ты хочешь первый экран сделать с большой картинкой на всю ширину. Тогда ставь ее через background-image и медиа-запросы. В общем все)
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
fruity4pie
@fruity4pie
A
Как подключать - у img есть атрибут srcset и sizes.

Как правильно подключать под ретину хорошо и наглядно показано тут
Ответ написан
@McBernar
Ну, вообще, достаточно сделать обычный размер x 1.5 и даунскейл через html этой картинки до 75%. На обычных дисплеях будет отлично, на ретине чуть хуже, но вполне.
Ответ написан
Ваш ответ на вопрос

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

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