Как определить когда показывать картинку для ретины а когда нет?

Question

[nluparev]

Есть потребность определять смотрить ли сейчас юзер с ретина экрана или нет и как следствие показыват некоторые элементы (иконки/картинки) более высокого разрешения.

Как определить с ретины ли он смотрит или нет?

Answer 1

[Rustam Bainazarov]

Тег picture или img + атрибут srcset:
https://developer.mozilla.org/ru/docs/Learn/HTML/M...
https://webdesign.tutsplus.com/ru/tutorials/quick-...

Update. Есть и другой подход (не через media, а через x2, x3 и так далее), если так нужна именно Retina:
https://webkit.org/demos/srcset/.
Особого смысла не вижу, т. к. сейчас все телефоны имеют retina-экраны (300 DPI) или очень близки к ней.

Update #2. Вот ещё интересная ссылка для размышления с дополнительной информацией:
https://m.habr.com/post/422531/

P. S. Если будет поддержка IE11, то лучше (проще) использовать img с фолбэком (обычный src):

Comments

[nluparev]

SmthTo а в чем отличие от media query и как это поможет с ретиной?

[Rustam Bainazarov]

nluparev, сейчас уже 99.9% экранов мобильных — Retina (больше или близко к 300 DPI), поэтому можно спокойно по ширине экрана определять телефоны и грузить retina-картинки для всех телефонов.

Есть и другой подход через x2, x3 и так далее, если так нужна именно Retina:
https://webkit.org/demos/srcset/

[Rustam Bainazarov]

SmthTo, если, говоря о media-query, вы имеете в виду CSS media-query, то тут вам лучше прочитать, как браузеры обрабатывают их. Встраивая media-запросы прямо в разметку в случае с img и picture мы упрощаем себя и браузеру жизнь, а также кучу проблем.

Более того, контролируя через CSS показ конкретных img, мы идём против общепринятых web-технологий, а также можем встретиться с проблемой загрузки браузером ненужных в конкретном случае картинок (плюс, не все браузеры игнорируют картинки, которые в display: none). Такие вещи не должны зависеть от CSS