Создание изображений, приспособленных под экраны Retina

В последнее время наблюдается резкое увеличение интереса к разработке дизайна сайтов с учетом специфики экранов Retina, - это объясняется тем, что нередко обычный дизайн не учитывает особенности данной технологии. По сути, данная технология базируется на размещении максимального числа пикселей на определенном физическом пространстве, в результате чего различить частицы, из которых формируется картинка, для человека нереально. Следует отметить, что плотность пикселей варьируется в различных устройствах в зависимости от параметров расстояния обзора, характерного данному типу девайсов.

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

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

При работе с адаптивными дизайнами имеет смысл использовать такой инструмент как retina.js, представляющий собой JS-библиотеку с опцией автоматического распознавания специфический копий, применяемых при отображении на гаджетах производства Apple. Благодаря отображению @2x retina-копий, изображение сохраняет четкость на всех устройствах, где установлен Retina экран. Единственным минусом стоит назвать отсутствие функции распознавания фоновой картинки, хотя в остальном retina.js. на порядок удобнее, чем альтернативные инструменты.