Retina Display, или знакомимся с ретиновыми дисплеями.


Экраны с повышенной плотностью пикселей и большими разрешениями продолжают захватывать рынок. Особенно преуспели в этом товарищи из Apple с их retina дисплеями. Однако то, что является наслаждением для глаз, в то же время добавляет головной боли веб-дизайнерам и фронт-енд разработчикам. Здесь я постарался собрать побольше информации о нюансах этих дисплеев с точки зрения веба и возможные варианты решения вопросов доставки различных изображений в зависимости от экранов, на которых они будут отображаться.

Общая информация

  • Актуальные устройства с дисплеями retina:

    Model PPI (ppcm) Resolution Typical Viewing Distance Single Pixel Visual angle (arcminutes)
    iPhone 4, iPhone 4S, and iPod Touch (4th generation) 326 (128) 960×640 25 cm (10″) 1.1
    iPad (3rd generation) 264 (104) 2048×1536 38 cm (15″) 0.87
    MacBook Pro (3rd generation) 220 (87) 2880×1800 51 cm (20″) 0.78
  • Микровзгляд: сравнение дисплеев современных смартфонов под микроскопом
    Если у вас до сих пор есть проблемы с пониманием того, как отображаются пиксели на современных смартфонах и планшетах, эта статья более чем полностью восполнит этот пробел.
  • Обзор Retina Display
  • Retina-экраны и страшный сон веб-дизайнера
  • HD веб-дизайн. Эволюционируй или…
  • Прогноз на распространение дисплеев повышенной четкости в 2013ом

CSS решения

  • Tips and tricks for Retina images in responsive web design
    Рассмотрены следующие методы: Background-size: 100%, дизайн с помощью html-символов, использование иконочных шрифтов, SVG, некоторые css3 техники.
  • Website Design: How to serve high-resolution website images for retina displays
    Подробно рассмотрены техники media queries, font-face и SVG
  • Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size
    Более подробно о свойстве background-size.
  • Using CSS Sprites to optimize your website for Retina Displays
    Здесь предлагают технику с использованием пропорционально увеличенного CSS-спрайта для экранов с высокой плотностью пикселей.
  • Master CSS pixels for Retina displays
    Вгляд с точки зрения геометрии и популярные решения с помощью @media
  • Safari 6 and Chrome 21 add image-set to support retina images
    Последние версии движка webkit, который используется в Safari 6 и Chrome 21, уже научились поддерживать свойство css, позволяющее делать разветвление изображений уже при определении background-image

JS решения

  • retinajs

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

    Retina.js подразумевает, что вы должны пользоваться соответствующим модификатором от Apple (2Х).
    К примеру, на вашей странице есть какая-то картинка: <img src=/images/my_image.png />
    Данный скрипт автоматически проверит, есть ли альтернативная картинка в формате Retina: /images/[email protected]

  • jQuery-Retina
    Похожий на предыдущий скрипт, который основан на jQuery. Работает по похожему принципу, ориентируясь на суффикс 2x.
  • Retina Images
    Этот метод дополнительно требует отдельных настроек сервера, однако обладает полезными фолбеками и не привязывается только к JS. Кроме того, имеется плагин для WordPress.
  • Распознаём retina-дисплеи джаваскриптом
    Определяем ретину несколькими строчками js-кода
  • WP Retina 2x
    Плагин для WordPress, добавляющий возможность загрузки изображений повышенной четкости

Оптимизация изображений и техники работы с ними для retina дисплеев

  • Оптимизация графики для Retina-экранов, а также оригинал этой статьи
    Обстоятельная статья, в которой объясняются такие понятия, как физический пиксель, css-пиксель, растровый пиксель и плотность экрана, а также рассмотрены вопросы оптимизации изображений средствами HTML, CSS, JS и SVG.
  • Адаптируем графику под Retina экран
    Рассмотрены следующие методы: Использование SVG, CSS Media Query, Замена src у картинок, Cookies и решения на стороне сервера.
  • Resources for making your site retina-friendly
    Подборка ресурсов для тех, кто планирует использовать SVG или иконочный шрифт для решения retina-проблемы.

Retina для веб-дизайнеров

  • Разработка приложений для Retina Display на iPhone 4: Техника и рабочий процесс
  • Дизайн интерфейсов под iPhone 4 с дисплеем Retina
  • iPad GUI PSD для Retina дисплеея
  • Не забываем о фавиконках (favicons) для ретины