Изображения для retina

Для того, чтобы изображения на retina дисплеях не расплывались нужно загружать под них отдельную версию картинки, увеличенную в 2 раза. Для примера изображение имеет разрешение 200х100. Для retina дисплеев необходимо разрешение 400х200. После того, как подготовлены 2 варианта изображений необходимо указать их в документе.

<img
    src="<?=$path?>images/_index/task_clicks.png"  
    srcset="<?=$path?>images/_index/task_clicks-x2.png"
    width="108" height="86"
>

где, src="images/_index/task_time.png" - это путь до обычной картинки, отображаемой на обычных экранах/мониторах, а srcset="images/_index/task_time-x2.png" - путь до картинки с увеличенным размером. В параметре srcset="" может быть указано несколько путей для разных типов дисплеев, размеров экрана.

Пример.

<img
    src="<?=$path?>images/_index/task_clicks.png"  
    srcset="<?=$path?>images/_index/task_clicks-x2.png 2x, <?=$path?>images/_index/task_clicks-x2.png 3x"
    width="108" height="86"
>

где, 2х и 3х степень увеличения плотности пикселей.