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

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

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

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

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

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