Адаптируем графику под Retina экран

Очень часто мне встречаются сайты которые отвратительно выглядят на iPhone4, и дело даже не в том, что большинство из них не адаптированы под маленький экран, а в том, что разработчики не учитывают новый тип экранов. На иконки не хочется смотреть, на кнопки не хочется нажимать, а от картинок вообще хочется… закрыть сайт. То, что призвано завлечь пользователя на сайт, вникнуть в его суть, а не покинуть его тут же — теперь работает совершенно наоборот. Но пользователи iPhone в целом привыкли к такой ситуации, т.к. телефон не может заменить полноценного браузинга.

Однако, совсем недавно Apple дала нам iPad 3 небольшую фору, для того, чтобы привести дела впорядок. iPad'ом уже пользуются вполне себе полноценно, поэтому сайты должны выглядеть на нем ничуть не хуже, чем на ноутбуке или стационарном компьютере. И я считаю, что iPad 3 — это лишь первый шаг к полноценному внедрению Retina экранов в те же ноутбуки, а за ними и в стационарные мониторы. Apple уже готовит свою OS для Retina, у Windows 8 скорее всего с этим тоже проблем не будет, с их новым подходом в дизайне интерфейсов.

Теперь, когда вы тут, перейдем непосредственно к самим методам адаптации графики под экраны с высокой плотностью пикселей.

Метод 1. Использование SVG

.selector { background: url(../path_to_png/apple.png) no-repeat; }
html.svg .selector { background-image: url(../path_to_svg/apple.svg); }

Идеально подходит для логотипов, иконок, а также любой векторной графики.

Это метод дает самый качественный результат, т.к. графика будет выглядеть одинаково четко при любом приближении. Однако SVG — это векторный формат, и ваша графика должна быть соответственно в векторе. Чтобы подготовить SVG файл можно воспользоваться Adobe Illustrator, или другим аналогом (Inkscape, CorelDRAW).

Дальше все очень просто. Достаточно указать путь до SVG файла в CSS свойстве background-image. Однако есть браузеры, которые не поддерживают SVG. В этом случае я рекомендую использовать Modernizr, в составе шаблона HTML5 Boilerplate, это позволит определять непосредственно поддерживаемые функции, а не версии браузеров.

Метод 2. CSS Media Query и свойство background-size

.selector { background: url(../path_to_png/apple.png) no-repeat; }
  
@media (-webkit-min-device-pixel-ratio: 2) {
  .selector { background-image: url(../path_to_png/apple@2x.png); background-size: cover; }
}

С помощью селектора «min-device-pixel-ratio» определяются устройства с плотностью пикселей 2 и выше, для них подключается картинка в 2 раза больше, а свойство «background-size: cover» сообщает браузеру, что имеющуюся эту картинку необходимо отмасштабировать до размеров блока сохранив пропорции. Почитать о свойстве «background-size» и о значениях, которые оно может принимать

Метод 3. Замена src у картинок

jQuery( document ).ready(function(){
  if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
    var img_to_replace = jQuery( 'img.replace-2x' ).get();
 
    for (var i=0,l=img_to_replace.length; i<l; i++) {
      var src = img_to_replace[i].src;
      src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1');
      img_to_replace[i].src = src;
    };
  }
});

В HTML коде прописываем тегу <img> необходимый класс, ширину или высоту, чтобы увеличенная картинка не испортила дизайн.

<img src="../path_to_png/apple.png"
     width="200" height="200"
     class="replace-2x" />

Этот метод использует свойство window.devicePixelRatio для определения экрана с увеличенной плотностью, находит все картинки, которые необходимо адаптировать и заменяет их src на аналогичный, но с дополнением в «@2x». Если не хочется каждой картинке писать класс, то довольно просто модифицировать код выше, чтобы он находил любые картинки. На мой взгляд данный метод не самый лучший и я бы использовал его с особой осторожностью.

Метод 4. Cookies и решение не сервере

(function(){
  if( document.cookie.indexOf('device_pixel_ratio') == -1
      && 'devicePixelRatio' in window
      && window.devicePixelRatio == 2 ){
        
    document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';';
    window.location.reload();
  }
})();

Используя JavaScript, этот метод позволяет один раз установить куку и перезагрузить страницу. Далее на основе этой куки сервер может принять решение сразу выдать адаптированную картинку для экранов с увеличенной плотностью.

 
И наконец ссылка на демо, разницу заметят только владельцы устройств с Retina экраном.
 

Напоследок

Старайтесь максимально использовать возможности CSS для создания кнопок, теней, градиентов и других элементов на вашей странице. Такие элементы выглядят отлично при любом масштабе и плотности пикселей, однако не стоит забывать и про graceful degradation для устаревших браузеров.

Буду рад услышать от вас о проблемах, с которыми вы сталкивались при адаптации под Retina экраны и решения, которые я упустил.

Автор: hmelyoff