Изображения для 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х степень увеличения протности пикселей.


Оставить комментарий