Так сколько изображений надо готовить для адаптивного сайта (+ retina)?
Всем привет.
Допустим, у меня картинка 100% ширины. Мне нужно качественное отображение на популярных экранах. Как это организовать?
Напрашивается примерно такой список размеров(по ширине):
1920px - для больших экранов и ретины с двойным разрешением
2560 - ретина с тройным разрешением
1280 - обычные экраны, ретина
Ну и, допустим,
1080 и 720 (Или 1024? и 768? Или все вместе?)
Итого пять-шесть вариантов одного изображения (это много или мало?)
И как их подключать? Использовать медиа запросы или picture c включением img для старых браузеров?
Если устройство меняет ориентацию после загрузки сайта - сразу же будет загружаться новое изображение или можно как-то приостановить этот процесс (и нужно ли?)
В общем, куча вопросов и никакой ясности в голове. Пытаюсь найти какую-то систематизированную информацию на эту тему, но что-то запутываюсь еще больше.
Я всегда делал 2 разрешения.
Допустим ширина блока 400px, для обычных мониторов вставлял 400px картинку, а для ретина - 600-800px.
Не думаю что есть смысл делать по 5 вариантов... Все эти картинки будут занимать место, а если представить интернет магазин с 20к товарами, то картинок будет не мало.
Бери одну картинку, размером "требуемая максимальная ширина экрана помноженная на два" и делай ее. Это самый простой вариант. Если хочется немного пооптимизировать, то бери две картинки - одна большая как в первом случае, а вторая - в два раза меньше. Оптимизировать отдельно для каждого устройства не обязательно - на скорость загрузки это особо не влияет. Картинки только не забудь сжать оптимизатором)
Судя по всему, ты хочешь первый экран сделать с большой картинкой на всю ширину. Тогда ставь ее через background-image и медиа-запросы. В общем все)
Первый совет, возможно, был сформулирован не так, как предполагал автор.
Берешь картинку 50х50 и делаешь ее вариацию(без потери качества) размером 100х100 и этот размер(100х100) ставишь на ретине в 2 раза меньше, т.е. 50х50. Суть ясна??)
heducose: Алексей Струков:
Спасибо за ответы! Вообще, действительно, будет и background, и img, так что оба совета пригодятся. Но с srcset непонятно, как делать запрос для условия, в котором максимальная ширина сайта (1200px) практически совпадает с ретиной 1280px. Было бы логично загружать одну картинку, а это видимо возможно только с использованием тега picture. Или для очень широких экранов и опять-таки ретина 1920. То есть, хотелось бы совместить в одном запросе и ретину, и обычный экран, в зависимости от их размеров.
nomta: там все просто с srcset и тегом img. Если у тебя максимальная ширина экрана 1200 и картинка должна быть на всю ширину, то либо грузи одну картинку шириною 2400 (в два раза больше чем требуется - это для ретины и для простых экранов одновременно), либо через srcset грузи две картинки (1200 для простых экранов и 2400 для ретины) или если хочешь чтобы картинка менялась на разных устройствах, то грузи через picture.
А у меня картинки с увеличенным в два раза разрешением весят (и грузятся соответственно) гораздо больше и при ресайзе браузером отображаются смазанными в сравнению с картинками с родным разрешением (на том же декстопе). Какой смысл упарыватьсяя по ретине и при этом одновременно пороть качество на других экранах таким подходом?
Дмитрий Евграфович: по идее большие картинки не должны выглядеть хуже на простых экранах. У меня нет под рукой обычного монитора, чтобы это проверить, но чисто теоретически, когда делаешь фотографию размером 1000 на 1000, а потом 500 на 500 и затем уменьшаешь первую в редакторе до размера второй, то они становятся визуально не отличимы практически. Не представляю что там может смазываться.
Алексей Струков: В редакторе в отличие от браузера и метод интерполяции при резайсе можно выбрать (хотя фотошоп и с установленным по умолчанию методом дает менее смазанный результат, чем тот же хром)
Ну, вообще, достаточно сделать обычный размер x 1.5 и даунскейл через html этой картинки до 75%. На обычных дисплеях будет отлично, на ретине чуть хуже, но вполне.
Вообще-то нет. Вопрос о том — как получить качественное изображение на разных мониторах. И для этого не нужно загружать 50 картинок и подставлять свою под каждое разрешение. Есть просто одна картинка в 1.5x или 2x и свойство cover у bg size.
