Выбрать страницу

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

Всем известная продукция Apple подкинула еще одну работу для разработчиков. А именно адаптация изображения под Retina.

В двух словах о Retina — это ЖК дисплеи с повышенной плотностью пикселей, на которых изображения отображаются более качественно и сочно.

Но для того чтобы это работало, нужно правильно подготовить графику. Есть несколько вариантов.  Первый — это использовать масштабируемую векторною графику SVG. Но это подойдет больше для небольших иконок или логотипов.

Второй способ — использовать скрипт, который определит какой тип дисплея используется, и используя полученную информацию подставит нужное изображения. Перед этим нужно подготовить картинки, для дисплеев Retina нужно картинка в 2 раза больше, добавить в конце названия @2x.

 

Добавляем изображения:

 

Для того чтобы все нормально работало, нужно добавить к изображения класс replace-2x и указать исходный размер картинки как показано выше, это нужно чтобы на дисплеях Retina не испортился дизайн.

Немного иным способом можно оптимизировать спрайты. Для этого вставте код у ваш файл стилей, и пропишите пути в новым спрайтам.

 

И также не забудьте задать исходный размер вашему спрайту с помощью background-size.

Спасибо за внимание.