Как подготовить сайт для дисплеев Retina высокого разрешения

Mac OS X, Tips & Tricks

После появления устройств с дисплеями высокого разрешения, например, iPhone, iPad, Samsung Galaxy Note II и, конечно же, MacBook Pro с Retina дисплеем, перед веб-разработчиками и просто блогерами встал вопрос о нормальном отображении их сайтов на этих устройствах. Ниже я расскажу, как я добавил поддержку дисплеев высокого разрешения на своих сайтах.
Как подготовить сайт для Retina дисплеев высокого разрешения: Пример для сравнения изображений готовых и неготовых для отображения на Retina дисплее

Retina дисплеи высокого разрешения

Сначала надо уточнить, что такое дисплеи высокого разрешения (Retina — это маркетинговое название для high-resolution дисплеев, используемых в технике Apple). У обычных дисплеев, например, на ноутбуке с диагональю в 15 дюймов, разрешение экрана составляет 1440×900. Это значит — матрица монитора состоит из пикселей (точек) и по длине эта матрица имеет 1440 точек, а по высоте 900 точек.

Всё просто, но с появлением hi-res дисплеев всё стало чуть сложней. Для того, чтобы человеческий глаз видел не пиксели, а изображения, как на страницах журнала или на настоящей фотографии, появились дисплеи, у которых для тех же 15 дюймов физическое разрешение экрана равно 2880×1800 точек. Ровно в два раза больше, чем у обычного монитора. При отображении векторной графики, например, элементов интерфейса, шрифтов, рамок, сделанных при помощи CSS на веб-страницах, всё выглядит красиво и замечательно, а вот при отображении растровой графики, то есть картинок, не всё так гладко.

Проблема с отображением растровой графики

На обычных мониторах картинка 300 на 200 точек также и отобразится на мониторе — 300×200, конечно же, если её не масштабировать. На hi-res же матрицах картинку 300 на 200 можно отобразить двумя способами.

  • Как картинку с разрешением 600×400 пикселей, тогда она будет занимать на экране ровно столько же места, как и на обычном мониторе.
  • Как картинку с разрешением 300×200, но тогда она будет на hi-res мониторе занимать в два раза меньше места, чем на обычном. То есть она будет в два раза меньше по размеру, потому что hi-res дисплеи, имея в два раза большее разрешение, по размеру совпадают с обычными дисплеями.

Вариантом по умолчанию при отображении веб-сайтов является первый — все изображения увеличиваются в два раза. Из-за чего все изображения на сайте: фотографии, а особенно иконки и логотипы — становятся размытыми, пример чего я привёл в начале статьи.

Для того, чтобы ваш сайт отображался идеально на всех устройствах, в том числе и с hi-res дисплеем, достаточно все изображения хранить в два раза большем размере, а в html указывать актуальный размер отображения:
<img src="/image-600x400.png" width="300" height="200" />
или в CSS:

.image-class {
	background-image: url(/image-600x400.png);
	background-size: 300px 200px;
}

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

Решение

Чтобы пользователям с обычными дисплеями отдавать обычные изображения, а с hi-res — изображения в два раза большего размера, я использую JavaScript retina.js. Исходный скрипт находится по адресу retinajs.com, но там в некоторых местах нужны были правки, которые уже присутствуют в моей версии скрипта.

Этот скрипт во время загрузки страницы проверяет, имеет ли ваше устройство дисплей высокого разрешения, и в случае положительного результата – есть ли на вашем сервере эти же изображения, но с именем, оканчивающимся на @2x (это стандартное обозначение изображения в два раза большего размера, для Retina устройств). То есть для изображения src="http://site.com/images-directory/image.png" скрипт проверит наличие http://site.com/images-directory/image@2x.png, и если это изображение найдено, отобразит его на странице, задав необходимые значения ширины и высоты (width и height).

Чтобы использовать скрипт, загрузите его к себе на сервер и укажите как можно ближе к закрывающему тэгу </body>:
<script type="text/javascript" src="/js/retina.js"></script>

В WordPress это можно сделать в файле wp-content/themes/your-theme/footer.php.

Для того чтобы подгружать изображения, подходящие для hi-res дисплеев, которые заданы через CSS, используются медиа-запросы:

.class-image {
  background-image: url('/image.png');
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
       only screen and (min-resolution: 1.5dppx), 
       only screen and (-o-min-device-pixel-ratio: 3/2) {
  .class-image {
    background-image: url('/image@2x.png');
    background-size: 300px 200px;
  }
}

Полезный инструмент, чтобы определить какие значения отдаёт ваш браузер на CSS медиа запросы, http://bjango.com/articles/min-device-pixel-ratio/.

Для тех, кто использует CSS препроцессор {less}, может пригодиться миксин, чтобы лишний раз не копипастить.

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

8 комментариев к записи “Как подготовить сайт для дисплеев Retina высокого разрешения”

  1. Еще вопросик, что вы отредактировали в файле retina.js и где можно загрузить вашу версию файла? Чем она лучше оригинала?

    1. Загрузить можно с github’а.

      Отредактировал я там две строчки, вместо:

      that.el.setAttribute('width', that.el.offsetWidth);
      that.el.setAttribute('height', that.el.offsetHeight);
      

      я сделал:

      that.el.setAttribute('width', that.el.width);
      that.el.setAttribute('height', that.el.height);
      

      , что решило проблему с изображениями, у которых был задан border — в оригинальном варианте скрипт задавал ширину и высоту для изображения приплюсовывая к ним удвоенную ширину border’а.

      А вообще, мне скрипт retinajs видится сейчас слишком overengineered (перемудрённый), надеюсь, что в ближайшее время у меня дойдут до него руки и я его перепешу.

  2. Александр!
    Очень занимательная статья!
    Позвольте несколько ламерских вопросов:
    1) На сайте должны храниться оба изображения, обычное и для hi-res. Так я понял?
    2) У меня куча кнопок-ссылок в виде спрайтов, как быть с ними? В css прописывать еще один блок?

    Спасибо!

    1. Здравствуйте, Алексей!

      1. Да, вы верно всё поняли. Одно изображение обычное и второе с суффиксом @2x для hi-res.
      2. Для спрайтов тоже две версии изображения и при помощи media query прописывать для hi-res. Со спрайтами это может быть немного заморочено, правда, потому что кроме координат надо ещё указывать размер, чтобы картинка в два раза сжималась. А в идеале спрайты заменить svg иконками, конечно, или шрифт с иконками.

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