Простой способ оптимизировать сайт для работы с Retina изображениями

особенности компоновки спрайтов (sprites)

| Категории: FAQ
Виталий Аминев

Макбук про с дисплеем ретина

Ни для кого не секрет, что количество устройств, поддерживающих высокое разрешение, aka retina постоянно растет.
Планшеты, макбуки с ретиной, телефоны - у всех сверхчеткое разрешение, а ваш сайт все еще покрыт огромным количеством
пикселей. Не грустим, все что нам нужно сделать - создать новые картинки. И их размер должен быть ровно в 2 раза больше.

Простого способа переделать все графические элементы не существует. Я, конечно, надеюсь что для начала у вас все
еще есть оригинальные векторные изображения. Тем не менее, проблема кроется не в том, что вам придется создавать все
графические элементы заново. Проблема заключается в том, что вам потребуется поддерживать и старые устройства, для которых
не требуются детальные изображения. Более того, вы не можете изменять ширину или высоту div контейнеров, содержащих
фоновые графические элементы, так как вы всего лишь получите большое изображение, пестрящее “огромными” пикселями.

Преобразуем ваши спрайты для работы с ретиной

Первая и самая важная вещь - графические элементы должны быть ровно в 2 раза больше в размере, для того, чтобы данный
способ сработал.

Пример верстки иконок.

1
2
3
<a href="#" class="icon icon-youtube">youtube</a>
<a href="#" class="icon icon-facebook">facebook</a>
<a href="#" class="icon icon-googleplus">google plus</a>

Сопутствующие стили, которые потребуется добавить. Мы используем less, о нем много информации в гугле ;)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.icon {
		background-image: url(icons.png); // спрайт с картинками
		width: 28px; // ширина блока
		height: 29px; // высота блока
		line-height: 29px;
		background-repeat: no-repeat;
		background-position: top left;
		padding: 0;
		margin-right: 2px;
		display: inline-block;
		text-indent: -9999px; // прячем текст
}
.icon:hover {
		background-image: url(hover.png); // спрайт с теми же картинками, но при наведении. 
		// можно оптимизировать и склеить два спрайта, плюс добавить отступ по вертикали
}

Позиционируем иконки

1
2
3
4
5
6
7
8
9
.icon-youtube {
    background-position: 0 0;
}
.icon-facebook {
    background-position: -28px 0px;
}
.icon-googleplus {
    background-position: -56px 0px;
}

Но все это базовые вещи. Теперь перейдем к интересному

Мы добавим @media запрос, который будет ориентироваться только на экраны с retina дисплеем. Для них мы изменим
background-image для другого, который будет в 2 раза больше. Мы добавим суффикс @2x, чтобы организовать наши изображения.
После этого мы установим параметр background-size, чтобы размер картинки совпал с размером спрайта для обычных машин или
половина ширины спрайта для ретины. Именно на этом этапе очень важно, что спрайт с ретиной ровно в 2 раза больше, чем
обычный спрайт. Иначе, картинки не будут отображаться правильно.

1
2
3
4
5
6
7
8
9
10
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
		.icon {
				background-image: url('icons@2x.png');
				background-size: 84px;
		}
		.icon:hover {
		    // не оптимальное решение, лучше склеить спрайты
				background-image: url('hover@2x.png');
		}
}

Вуаля, все готово

Теперь ваш сайт готов обслуживать девайсы с ретиной. Заметьте, что вы совершенно не использовали Javascript, да и
вообще никакой магии.