Сегодня мы расскажем о том, как можно адаптировать изображения Вашего сайта под Retina-дисплеи, которые используются на современных устройствах Apple — iMac, iPad, iPhone и др. Напомним, что «Retina» — это общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся высокой плотностью пикселей. Однако, как правило, на Retina-дисплеях часть графики большинства сайтов расплывается, качество изображений падает. Причем «плывет» именно растровая графика, векторная графика отображается и масштабируется без искажений. Существует несколько способов, которые помогают решить эту проблему. В данной статье мы расскажем об одном из них.

Не секрет, что большинство сайтов имеют свой логотип. Давайте представим, что стоит задача сделать отображение логотипа на Retina, избавившись от размытия. Для этого нам понадобится изображение логотипа в 2 раза большее оригинала. К примеру, если у нас логотип «logo.png» имеет размер 200х50px, то для Retina понадобится логотип размером — 400х100px. Делаем такой логотип в графическом редакторе, например, в Photoshop и называем его — logo@2x.png.

Далее открываем в текстовом редакторе файл стилей нашего сайта, как правило, это файл «style.css» и находим место, где задан стиль отображения логотипа. Что-то в таком роде:

#logo {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    display: block;
    width: 200px;
    height: 50px;
}

Теперь просто нужно в этот файл стилей (чуть ниже) дописать медиа-запрос, чтобы для дисплеев, у которых соотношение физических и CSS-пикселей больше 1.5, загружалась картинка logo2x.png — делается это так:

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
     #logo {
          background-image: url('images/logo@2x.png');
          background-size: 200px 50px;
     }
}

Не забудьте задать такие же размеры background, что и у исходного изображения — 200х50px. Данный способ целесообразно использовать для небольшого количества изображений. Для отображения логотипа такой способ идеально подходит. А вот для адаптации большего количества изображений на сайте целесообразно использовать другие решения.