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

Question

[pavelkunyavskiy]

Добрались руки до responsive картинок. Адски запутанная и непонятная вещь. Все эти picture и srcset

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

Вроде все подготовил для имплементации, но встал вступор - не могу понять логику выбора самих размеров картинок в пикселях.

Есть ли какие-то распространенные решения, практики? От чего вообще отталкиваться? От статистики размеров устройств, от дизайна верстки или еще от чего-то? И присыпте это еще dpi, плотностью пикселей. Мозг опухает.

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

Answer 1

[Сергей delphinpro]

В современной верстке должен по максимуму использоваться вектор. Это снимает кучу проблем.
Разумеется, не все картинки можно/нужно перегонять в вектор. При использовании растра, в общем случае, достаточно две картинки — x1 и x2. X1 — это тот размер, в каком картинка отображается на сайте, x2, соответственно, удвоенный. Например картинка 100х100, к ней делаем ретина-вариант 200х200.
Всё остальное зависит от бюджета проекта.
Есть время/деньги — заморачиваемся. Пилим третий вариант x3, подключаем полифилы для srcset, делаем дополнительные наборы для брикпойнтов в медиазапросах.
Нет времени/денег — тупо грузим везде удвоенные размеры, и указываем реальные в css.

Comments

[pavelkunyavskiy]

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

[Сергей delphinpro]

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

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

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

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

[pavelkunyavskiy]

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

[Kovalsky]

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

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

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

[Сергей delphinpro]

pavelkunyavskiy,

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

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

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

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

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

[pavelkunyavskiy]

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

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

[Сергей delphinpro]

pavelkunyavskiy,

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

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

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

[pavelkunyavskiy]

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

Понимать так, что в мобильных могут быть разные разрешения и ориентации. Я сделаю под мобильные 250пкс картинку, а там будет размер экрана 500. А dpi тот же, просто разрешение выше.

[Kovalsky]

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.

[pavelkunyavskiy]

Никита Полевой, спасибо за развернутый ответ и объяснение своей логики принятия решения.

Насчет брейкпоинтов я понял (выше тоже уже предлагали). Но по моим наблюдениям часто я не вижу связи между например вашими цифрами брейкопоинтов и реальными практическими имплементациями. Вот например с одного мега популярного сайта, я залез в srcset и обнаружил что сервер отдает 2 размера 349x233 и 960x640. Ниодин из них не подпадает под категорию брейкпоинта, значит я делаю вывод что авторы принимали решения исходя от каких-то иных требований. Вот мне и интересно понять логику принятия подобных решений.

Пока два варианта - брейкпоинты и макет.

[Сергей delphinpro]

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, компромисс, при котором картинка ещё не выглядит так уродливо

[pavelkunyavskiy]

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

Сорри за грубость, но мне эти responsive images порядком уже оскомину набили. Хочется найти решение и забыть об этом кошмаре)))

[pavelkunyavskiy]

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

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

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

[pavelkunyavskiy]

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

[Сергей delphinpro]

pavelkunyavskiy,

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

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

Answer 2

[Андрей]

По большому счёту особого смысла сильно оптимизировать картинку нет. Они просто должны быть разумного разрешения и размера.
Но если очень хочется, то посмотрите какие разрешения выбирают различные библиотеки вроде бутстрапа и других.
По моему опыту, могу сказать что оптимальнее всего для критичных (крупных, наполненных деталями итд) картинок лучше всего делать три размера - для самых маленьких экранов (для мобильных, с размером viewport до 600 включительно), для средних экранов (с размерами до 1920 включительно) и для крупных. И, соответственно делаете картинки нужного размера, ориентируясь на каждый из размеров экрана.
Для некритичных - заниматься смысла нет, много не выйграете. Но если у вас само пережимается под нужные размеры, можете и их пережимать по тем же правилась.

Да, еще для оптимизации - используйте ленивую загрузку картинок (загрузка при прокрутке). Заглушки для картинок (чтобы контент не прыгал пока картинки нет) можно делать с помощью генерируемого svg нужного размера, такая картинка будет весить около 500 байт. Например, по адресу site.ru/svg?x=826&y=800 возвращать svg указанного размера.

Далее, чтобы загружать картинки не по мере прокручивания, а сразу после того как загрузилась вся страница, можно использовать link rel="prefetch". Тогда вся страница загрузится разу, а "ленивые" картинки загрузятся после и положатся в кеш. И пока человек будет крутить, загружаться они будут уже из кеша а не по сети.

Comments

[pavelkunyavskiy]

На самый главный вопрос ответа так и нет. Какие разрешения выбрать-то???

По моему опыту, могу сказать что оптимальнее всего для критичных (крупных, наполненных деталями итд) картинок лучше всего делать три размера - для самых маленьких экранов (для мобильных, с размером viewport до 600 включительно), для средних экранов (с размерами до 1920 включительно) и для крупных.

[Андрей]

pavelkunyavskiy, размеры ставят не фиксированными для каждой картинки, а зависят от того, какого размера отображается картинка. Смотрите сколько места занимает картинка при каждом размере окна (в хроме и фаерфоксе ctrl+shift+m и выставляете нужный размер). И сжимаете эту картинку до этого размера. Универсального размера для всех картинок нет, для каждой свой.

[Андрей]

pavelkunyavskiy, в вашем вопросе говорится не о размерах файла (в мегабайтах), а о размерах изображений в пикселях

не могу понять логику выбора самих размеров картинок в пикселях.

Разумеется нет никаких стандартных универсальных размеров картинок. Размеры экранов я вам предложил, и там не для каждого пикселя а для трёх стандартных размеров. Размеры картинок для каждого экрана не универсально а зависит от дизайна, от отображаемого размера картинки на этом экране.

[Андрей]

pavelkunyavskiy, еще раз берёте свой сайт, открываете в браузере на 600х1000, смотрите видимый размер каждой картинки в пикселях - для каждой картинки будет свой размер, и до видимого размера каждой картинки уменьшите её для экранов шириной меньше 600. Потом увеличиваете браузер до 1920х1200, повторяете процесс. И в конце смотрите в браузере развёрнутом до 4к. И всё.

[pavelkunyavskiy]

Андрей, ок, ваш совет фактически отталкиваться от техники брейкпоинтов. Т.е. выбрать несколько размеров и исходя из них подобрать разрешения картинок. Ок, это пока самый реальный вариант, но все равно хочется более универсального решения.

[Андрей]

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

spoiler

[pavelkunyavskiy]

Андрей, ну я скорее веду речь о макетах динамических страниц. Т.е., например, главная картинка к новостной статье будет одинакового размера на 1000 страниц. Мне надо знать под какие размеры сказать серверу пережимать картинку (я же не вручную буду это делать).

[Андрей]

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

[pavelkunyavskiy]

на вашей динамической странице размеры картинок вовсе не динамические

Шта?))) Странички динамически гененируется по шаблону, вы вообще о чем тут расказываете? Какие нахер динамические картинки, што вы несете?

[pavelkunyavskiy]

Похоже человек не знает разницу между статической страницей и динамической. Динамические картинки - это пять баллов

[Андрей]

pavelkunyavskiy, всё что вы написали - исключительно плод ваших фантазий, я писал совсем другое. Похоже вы так ничего и не поняли. Динамичность содержимого страниц ни к вопросу ни к решению не относится никак.
Впрочем, что-то объяснять вам с вашим хамством в ответ желания нет.

[pavelkunyavskiy]

Андрей, какая нафиг динамичность содержания страниц? Что это аткое по вашему?)) Еще раз - вы разницу между статической страницей и страницей динамической осознаете, или мы разговариваем на разных языках?

Answer 3

[bro-dev]

Очевидно что такого же какого они и на сайте, если у вас картинка на всю ширину страницы значит должна быть 4к.

Comments

[pavelkunyavskiy]

У меня 50 сайтов, вы мне предлагаете перебрать каждую картинку на каждом сайте?

[Сергей delphinpro]

pavelkunyavskiy, а вы хотите все их пережать в один размер? O_o

[pavelkunyavskiy]

Сергей, какой-то испорченный телефон. Я не знаю что я хочу и как надо - я создал ЭТУ ТЕМУ для этого. Человек выше советует мне "Очевидно что такого же какого они и на сайте". У меня при каждом измнении размеров экрана на пиксель может менятся размер картинки, епта. Кроме того, в каждой статье могут быть РАЗНЫЕ размеры картинок. Так и что. я еще раз спрашиваю, вы мне предлагаете сохранять 1000 картинок?

[bro-dev]

pavelkunyavskiy, нет сохраняете 1 максимальный, но не больше чем необходимо. Если у вас картинка максимум может быть 200 пикселей значит нужна 400, как выше вам написали почему.