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


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

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

CSS решения

JS решения

  • retinajs

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

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

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

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

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

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

  1. Спасибо, отличная статья!

    Правда некоторые из приведенных ссылок-примеров не работают, но и без этого все понятно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *