Какие размеры картинок выбрать для responsive?
Все дополнительно осложнено тем, что я взялся еще делать свой серверный велосипед - CDN-сервер, пережимающий картинки как мне надо и складывающих их в нужную папочку.
Вроде все подготовил для имплементации, но встал вступор - не могу понять логику выбора самих размеров картинок в пикселях.
Есть ли какие-то распространенные решения, практики? От чего вообще отталкиваться? От статистики размеров устройств, от дизайна верстки или еще от чего-то? И присыпте это еще dpi, плотностью пикселей. Мозг опухает.
Как вы вибираете какие размеры отавать клиенту.
- Вопрос задан более трёх лет назад
- 770 просмотров
- Вконтакте
- Вконтакте
pavelkunyavskiy, вы конкретные цифры ждете? =) ну пилите 200*400 и 400*800
Вам не кажется это. странным?
Размеры зависят от содержимого. От макета. От фазы луны. Читайте внимательнее — x1 — это тот размер, в каком картинка отображается на сайте, x2, соответственно, удвоенный. Например картинка 100х100, к ней делаем ретина-вариант 200х200.
Или поясните толком, размеры чего вам нужны.
pavelkunyavskiy, смотрите, есть у меня портрет моей любимой панды в дико крутом качестве, весит он около 60 метров. Так исторически сложилось, что он имеет размеры 7260px/10940px. Если я хочу вывесить эту прекрасную фотку на свой сайт, то я делаю уменьшенный до 1200px (например) вариант для 1x плотности и вариант вчетверо объемней для 2х плотности. Получается соответственно 1200px/1808px и 2400px/3616px.
"изменение размеров экрана влечет собой изменение размеров отображения на сайте" - конечно нет, это не имеет связи с responsive версткой. Даже если речь о резиновой верстке, то всё равно этот полуофициальный термин никак не обязывает вас задавать всем изображениям относительную ширину. Это больше к дизайну. К тому же, это не о px-плотности.
"Там четко прописаны размеры картинок, которые отдает сервер под разные экраны. . Мне важно понять руководствуясь чем делать подобный выбор, откуда эти цифры вообще." - это делает сборщик, который при сборке страницы смотрит на размеры каждого изображения и устанавливает нужные для всех требуемых плотностей.
Не надо грубить. если ответа ожидаете.
совершенно очевидно, что у нас с вами огромная разница в знаниях и опыте. И я с высоты своего не могу сразу понять, что вы пытаетесь узнать, используя не ту терминологию, к которой я привык.
Сделаю еще одну попытку.
Волшебное слово — responsive. Лучше покажу — https://jsfiddle.net/hfhu7sxL/1/ одна и та же картинка 400*400 (x2) отображается в разных по размеру блоках на ретине она не будет "мылиться" Фоновые делаются аналогично с background-size. Юзерские (например в тексте статьи) — отображаются как есть с max-width:100%
Никита Полевой, спасибо Кэп за такой наглядный пример))
Вопросы - откуда цифра 1200px. Почему не 1150? А как выбрать размер под мобильные? Отчего отталкиваться? Просто какая цифра понравится?))
Очевидно, что у иконки и у картинки-обложки для новостей будут разные размеры на одном и том же мобильном экране. Как в этом контексте понимать вопрос "А как выбрать размер под мобильные"?
Понимать так, что в мобильных могут быть разные разрешения и ориентации. Я сделаю под мобильные 250пкс картинку, а там будет размер экрана 500. А dpi тот же, просто разрешение выше.
pavelkunyavskiy, "Вопросы - откуда цифра 1200px. Почему не 1150?" - мне было бы приятно, если бы мой пользователь видел изображения в максимально возможном качестве. А 1200px это просто максимальная ширина удобная для просмотра такого контента как изображения. Можно сделать и больше, но я никогда не видел чтобы ширина блоков с контентом была больше 1000-1200 пикселей. Разве что какие-нибудь дизайнерские сайты. Почему 1200 - потому что я у себя на сайте сделал чтобы для основного блока это была максимальная ширина, потому что мне показалось что это удобно. И не только мне. Но об этом вы уже можете почитать в интернетах, есть много статеек о таких исторически сложившихся значениях.
"А как выбрать размер под мобильные? Отчего отталкиваться? Просто какая цифра понравится?))" - а это уже совсем другая история не имеющая отношений к плотности пикселей. Но чаще всего для подобного существует некая таблица поддерживаемых устройств/платформ. Из этой таблицы экстрагируют усреднённые значения разрешений, в итоге получается небольшой список брейкпоинтов типа как здесь. Для каждой картинки генерируются соответствующие варианты в каждом диапазоне. Ну а если нужна ещё и плотность, то соответственно ещё и по варианту для каждой поддерживаемой плотности. То есть если вы поддерживаете только устройства с разрешениями 640x480 и 1920x1080 и плотностями x1 и x2, то для картинки cat.png нужны будут такие варианты: cat-640x460-x1.png, cat-640x460-x2.png, cat-1920x1080-x1.png и cat-1920x1080-x2.png, где варианты для устройств с разрешениями большими 1200 пикселей будут иметь максимальную ширину в 1200 пикселей.
По теме читайте гугловые гайды, они дают вполне сносный уровень понимания о чем стоит заботиться при разработке responsive. Ну и само собой даже их гайды это просто истории о том как сделали они, а не императив, грааля не существует, все делают по-разному.
К тому же существует множество материалов, в которых разбираются всевозможные подходы к организации responsive: mozilla, cloudfour, css-tricks.
Никита Полевой, спасибо за развернутый ответ и объяснение своей логики принятия решения.
Насчет брейкпоинтов я понял (выше тоже уже предлагали). Но по моим наблюдениям часто я не вижу связи между например вашими цифрами брейкопоинтов и реальными практическими имплементациями. Вот например с одного мега популярного сайта, я залез в srcset и обнаружил что сервер отдает 2 размера 349x233 и 960x640. Ниодин из них не подпадает под категорию брейкпоинта, значит я делаю вывод что авторы принимали решения исходя от каких-то иных требований. Вот мне и интересно понять логику принятия подобных решений.
Пока два варианта - брейкпоинты и макет.
pavelkunyavskiy, опять у вас про какие-то мифические размеры. Ориентируйтесь на макет и на контент. Что здесь может быть не понятного?
Окей, возьмём частный случай.Картинка должна отображаться без мыла на обычном дисплее и ретине с удвоенной плотностью пикселей во вcю ширину экрана. Будем отталкиваться от минимального экрана в 320 и максимального 1280.
на минималке для ретины нужен удвоенный размер. значит имеем две картинки 320 и 640. <=320 — 320 и 640 320—480 мы можем использовать ту же картинку 640 для обоих типов экрана. 480-640 - для обычного 640 480-920 - для ретины 1280 640-1280 - для обычного 1280 920-1280 - для ретины 2560
Итого получаем набор картинок 320-640-1280-2560, которые не будут замылены при озвученных входных условиях.
Но вы должны понимать, что это не панацея. Поменяем входные данные так, что картинка должна отображаться шириной в половину экрана. Все размеры будут другими.
Поэтому я повторяю — ориентироваться нужно на макет и контент.
PS если непонятно, откуда взялась цифра 480, то это 320*1,5, компромисс, при котором картинка ещё не выглядит так уродливо
Сергей, спс за ответ. Но мне кажется или вы противоречите сами себе? В приведенных вычислениях вы же сами отталкиваетесь от брейкпоинтов, а не от макета.
Сорри за грубость, но мне эти responsive images порядком уже оскомину набили. Хочется найти решение и забыть об этом кошмаре)))