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

Question

[Alan]

Работаю и на ретине дисплее, и на обычном. Никогда не замечал проблемы с размытием обычных картинок на экранах с ретина.
Также и в работе (верстка) еще не заморачивался этим вопросом. Все нормально отображается.

Может быть я что то упустил и браузеры сейчас сами как-то оптимизируют отображение обычных изображений чтобы они не размывались? И соответственно данная проблема уже отпала?
И если не отпала, тогда вы всегда в верстке используете изображения разных разрешений или только выборочно (по требованию клиента например)?

Спасибо!

Answer 1

[Anton Filippov]

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

Answer 2

[Александр Таратин]

Используйте svg или шрифты для иконок.
Svg для логотипов по возможности.
Остальное пусть мылится.

Answer 3

[V_Holmow]

Оптимизирую под 4к, это не обязательно, но желательно, т.к. fullhd на 4к выглядит не очень. Ну и конечно не всегда, банально может не быть изображения в 4к. Это скорее фича, чем требование.

Answer 4

[dom1n1k]

Иконки - крайне желательно.

С фотографиями вопрос спорный, поскольку уже давно неактуальна практика подгонять размер картинки пиксель-в-пиксель под её место на сайте. Когда-то в незапамятные так делали и тому был ряд причин:
- популярность фиксированной и "полуфиксированной" верстки;
- очень строгая экономия трафика;
- некачественные алгоритмы масштабирования в браузерах.
Сейчас должно тянуться (почти) всё и всегда, поэтому зачастую фотографии просто берутся несколько больше, чем нужно (в разумных пределах, конечно), чтобы запас по разрешению покрывал растяжение на большие экраны и ретину.

Но вообще, если заморочиться и через srcset/picture сделать 2-3 версии картинок разного размера - это будет хорошо. Но гемору больше. И выбирать размеры нужно вдумчиво, а то иногда можно получить обратный эффект - траф будет не экономиться, а тратиться наоборот больше.

Comments

[triggerfinger]

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

[dom1n1k]

Единого четкого рецепта нет. Нужно смотреть верстку, размер картинок, какие девайсы используются. В общем, творческая часть работы :)

Answer 5

[Данияр Кудайбергенов]

С чего вдруг это стало обязательным? Если ваш ресурс посещает 2% ретина дисплеев (что на большинстве так и есть) то запары с оптимизацией картинок, тем более если их много не окупают себя. А те 2% не получат сердечный приступ если увидят чуть замыленную картинку

Comments

[Дмитрий Энтелис]

Мне вот интересно - откуда взялась цифра в 2%?
17.8% по статистике liveinternet это ios телефоны которые априори с ретиной.
+ топовые андроиды.
+ остальные маки
+ люди с 4к мониторами

[Alan]

Тоже удивился этой цифре))) Сегодня наверно большинство пользователей уже ретинщики)

[Данияр Кудайбергенов]

Вы наверное никогда не смотрели метрики сколько-нибудь крупных ресурсов. 1920х1080 все еще fullhd разрешение и уникальной оптимизации не требует, и то на ios телефонах начинается только с 6+. Считаете 100% иос телефонов выше версии выше 6? Зайдите в любой офис и найдите хоть один ретина монитор. И я не про стартаперов и их друзей

[DevMan]

Данияр Кудайбергенов, даладна? а какое по твоему разрешение у 4к-монитора в hidpi-режиме (он же ретина)?