Какие размеры картинок выбрать для responsive?

Ок, ваш ответ дает вопрос только насчет x1 и x2. С этим понятно - под каждый выбранный размер надо делать 2 варианта - один x1 и другой x2. А КАК ВЫБРАТЬ РАЗМЕРЫ?

pavelkunyavskiy, вы конкретные цифры ждете? =)
ну пилите 200*400 и 400*800

Вам не кажется это... странным?

Размеры зависят от содержимого. От макета. От фазы луны.
Читайте внимательнее — x1 — это тот размер, в каком картинка отображается на сайте, x2, соответственно, удвоенный. Например картинка 100х100, к ней делаем ретина-вариант 200х200.

Или поясните толком, размеры чего вам нужны.

Сергей, вы читать умеете? Я это и спрашиваю в вопросе. Как понять ЛОГИКУ ВЫБОРА размеров картинки. Фаза Луны говорите, ну ок. Понятно все. Ответа нет, сами плаваем в этом вопросе явно.

pavelkunyavskiy, смотрите, есть у меня портрет моей любимой панды в дико крутом качестве, весит он около 60 метров. Так исторически сложилось, что он имеет размеры 7260px/10940px. Если я хочу вывесить эту прекрасную фотку на свой сайт, то я делаю уменьшенный до 1200px (например) вариант для 1x плотности и вариант вчетверо объемней для 2х плотности. Получается соответственно 1200px/1808px и 2400px/3616px.

"изменение размеров экрана влечет собой изменение размеров отображения на сайте" - конечно нет, это не имеет связи с responsive версткой. Даже если речь о резиновой верстке, то всё равно этот полуофициальный термин никак не обязывает вас задавать всем изображениям относительную ширину. Это больше к дизайну. К тому же, это не о px-плотности.

"Там четко прописаны размеры картинок, которые отдает сервер под разные экраны. ... Мне важно понять руководствуясь чем делать подобный выбор, откуда эти цифры вообще." - это делает сборщик, который при сборке страницы смотрит на размеры каждого изображения и устанавливает нужные для всех требуемых плотностей.

pavelkunyavskiy,

Понятно все. Ответа нет, сами плаваем в этом вопросе явно.

Не надо грубить. если ответа ожидаете.

совершенно очевидно, что у нас с вами огромная разница в знаниях и опыте. И я с высоты своего не могу сразу понять, что вы пытаетесь узнать, используя не ту терминологию, к которой я привык.

Сделаю еще одну попытку.

Волшебное слово — responsive.
Лучше покажу — https://jsfiddle.net/hfhu7sxL/1/
одна и та же картинка 400*400 (x2) отображается в разных по размеру блоках
на ретине она не будет "мылиться"
Фоновые делаются аналогично с background-size.
Юзерские (например в тексте статьи) — отображаются как есть с max-width:100%

Никита Полевой, спасибо Кэп за такой наглядный пример))

Вопросы - откуда цифра 1200px. Почему не 1150?
А как выбрать размер под мобильные? Отчего отталкиваться? Просто какая цифра понравится?))

pavelkunyavskiy,

А как выбрать размер под мобильные? Отчего отталкиваться?

От макета же =))

Очевидно, что у иконки и у картинки-обложки для новостей будут разные размеры на одном и том же мобильном экране. Как в этом контексте понимать вопрос "А как выбрать размер под мобильные"?

Как в этом контексте понимать вопрос "А как выбрать размер под мобильные"?

Понимать так, что в мобильных могут быть разные разрешения и ориентации. Я сделаю под мобильные 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 порядком уже оскомину набили. Хочется найти решение и забыть об этом кошмаре)))

А я понял, просмотрел объяснение

Но вы должны понимать, что это не панацея. Поменяем входные данные так, что картинка должна отображаться шириной в половину экрана. Все размеры будут другими.

Все, становится понятнее. Спасибо за ответ!

Короче, резюмируя, нужно использовать оба подхода - исходит от макета и потом подгонять картинку под брейкпоинты.

pavelkunyavskiy,

В приведенных вычислениях вы же сами отталкиваетесь от брейкпоинтов, а не от макета.

Наверное мне стоило взять другие размеры, чтобы не вводить в заблуждение )
320 - это исходный размер картинки на минимальном экране, а не размер экрана. А все последующие — расчетные на его основе.
размер мог быть 160 (в полэкрана) и цифры были бы другие.
А брикпойнты расставляются уже по этим цифрам.
В идеальном мире. =)
На практике я так не заморачиваюсь. Времени нет. Для фонов секций например 640-1280-2560 и всё. Рассовываем их по заданным брикпойнтам (как правило 768-992-1200), чтоб уродливо не смотрелось и норм.