Кто нибудь адаптирует изображения под ретина x3 и аналогичные экраны?

Question

[Алексей Струков]

Посмотрел на изображения c разной плотностью пикселей. x2 еще на глаз ощутимо отличие, а вот x3 уже не наблюдаю сильной разницы на картинках среднего размера. Кто нибудь заморачивается поддержкой таких экранов в реальных проектах? Предоставляют ли вам дизайнеры по умолчанию ассеты для таких разрешений экранов, или это в основном только по прихоти клиента и не является стандартом?

Comments

[x404]

Вообще мониторы с большой плотростью пикселей становятся все более популярными.
По мне так дизайны надо делать в sketch (вектор везде одинаковый)

На практике изображения никогда не подгоняли под retina дисплеи.

[Алексей Струков]

Сергей Сыса: Скетч это просто инструмент. В том же интернет магазине никак не обойтись без растровой графики для фотографий товаров.

[x404]

Алексей Струков:
https://html.spec.whatwg.org/multipage/embedded-co...

[Алексей Струков]

Сергей Сыса: Это все понятно. Тег picture и srcset уже применяю. Вопрос в весе картинок x3 и поиске границы, где можно махнуть рукой и остановиться)

Answer 1

[Сергей Горячев]

С недавнего времени стал всё чаще использовать векторную графику, не заморачиваясь над х2 или х3 разрешением.
Хотя, конечно, х3 это еще очень и очень редкое явление, однако нужно уже смотреть в будущее.
От дизайнеров часто требую именно векторы для работы.
Самое сложное это растр, который в х3 весит много, для этого используется picture source.

Comments

[Алексей Струков]

Как я выше написал, векторную графику не всегда можно использовать. Насчет веса меня это тоже напрягает. Да и x3 думаю не предел. Скоро появится x4, а потом x5, а потом каждая картинка будет весить пару мегабайт. Рано или поздно придется искать компромисс, если не придумают новый формат хранения изображений вместо jpg, который каким нибудь образом превратит фотографии в вектор. Я хочу сделать этот компромисс уже сейчас, отказавшись от x3, но пока не достаточно уверенности, что это будет правильно.

[Сергей Горячев]

Алексей Струков: webformyself.com/ispolzovanie-tega-html5-picture-d...

[Сергей Горячев]

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

[Максим Тимофеев]

Sergey Goryachev: Интересное решение, но слишком рискованное. Тоже задумываюсь о решении данной проблемы, в одном проекте пробовал добавлять в img data-big и через js менять местами src и data-big, не знаю насколько это правильно, но работает везде кроме случаев с no-js. Плюс грузит большие фото после загрузки.

[Сергей Горячев]

Максим Тимофеев: В вашем случае, намного проще было бы сделать иначе. Положить все картинки в одну папку, задать data-атрибут, к примеру data-name="$image_name$", и точно также назвать все картинки, только с префиксом $image_name$.jpg, $image_name$[e-mail], $image_name$[e-mail]. А дальше в зависимости от плотности экрана (это на js вычисляется легко), заменять картинку в src. Но также не будет работать с noscript. Но и грузить всё сразу не будет.

[Максим Тимофеев]

Sergey Goryachev: Так и есть, я просто не расписывал.

[Сергей Горячев]

Максим Тимофеев: Тогда не должен грузить всё.

[Максим Тимофеев]

Sergey Goryachev: Я коряво написал. Имел в виду "грузит большие фото после загрузки и необходимые - это плюс"