№21 (13-01-2016). Адаптация сайта к экранам Retina

Экраны высокого разрешения впервые появились у iPhone 4, а теперь практически все мобильные устройства имеют такие дисплеи. Многие современные ноутбуки тоже имеют экраны с разрешением больше 1920 на 1080 точек. Такие экраны отлично отображают сайты, которые были специально подготовлены для них. Но при этом очень многие веб-страницы выглядят на них просто ужасно. Особенно часто эта проблема возникает у владельцев старых сайтов, созданных еще до того, как Стив Джобс представил публике первое устройство с Retina-экраном. 

Проблема в том, что растровые изображения (то есть обычные картинки, фотографии, иконки и т.п.) плохо масштабируются. Если отобразить картинку 100 на 100 физических пикселей на экране высокой четкости, то она будет растянута на область 200 на 200 пикселей. Потому для экрана высокого разрешения 100 на 100 логических пикселей (CSS-пикселей) — это 200 на 200 физических пикселей. Физически у картинки будет тот же размер (скажем, 1 квадратный сантиметр), но каждый пиксель исходного изображения займет четыре пикселя. 


Картинки и иконки сразу же станут мутными и расплывчатыми — особенно по контрасту с четко отрисованными шрифтами, векторными элементами и все же адаптированными под Retina изображениями.


Если хотите теории, почитайте статьи про понятие PPI (pixel per inch, количество пикселей на дюйм) — их в интернете очень много. Мы ограничимся тем, что приведем некоторые опорные показатели: 

  • Стив Джобс утверждал, что экран, на котором глаз не может отличить друг от друга отдельные пиксели — конечно, на типичном расстоянии использования — должен иметь плотность пикселей не менее 300 ppi. 
  • Сейчас стандарты для ноутбуков и 4K-мониторов несколько ниже: экраном высокого разрешение считается любой дисплей с количеством пикселей на дюйм больше 200. 
  • У самого типичного ноутбука с диагональю экрана 15 дюймов и разрешением 1366 на 786 точек плотность пикселей на дюйм — почти ровно 100 PPI, а при такой же диагонали и разрешении FullHD (1920 на 1080) — 140 PPI.

На этом месте у вас, возможно, возникнет вопрос: ну и что? Два человека с излишне крутыми ноутбуками погоды не сделают, а с мобильных на сайт вообще никто не ходит. Тут есть два момента. Первый: с мобильных устройств с хорошими экранами на ваш сайт наверняка уже заходят толпы народу. Второй: владельцев топовых ноутбуков еще немного, но это самые состоятельные и плажеспособные люди — вы правда хотите потерять их из-за размытых картинок? Но если вы хотите убедиться, что овчинка стоит выделки, то вам помогут Яндекс.Метрика и Google Analytics. У них есть отчеты по разрешениям экранов устройств посетителей, и вы сможете легко понять, стоит ли проводить оптимизацию сайта под Retina.

Как проверить ваш сайт?

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

Как оптимизировать сайт под экраны Retina?

Если короче и проще, наша цель такова: заменить все картинки на увеличенные в два раза. Безусловно, их не нужно просто растягивать в фотошопе: это ничем не лучше масштабирования браузера. Картинки должны быть реально в два раза больше по высоте и ширине, чем нужно для отображения на обычном экране в масштабе 1:1. Тогда браузер сможет сжать их без потерь качества для показа владельцам обычных экранов, а вот обладатели Retina увидят полные версии — но не растянутые, а как раз без масштабирования. Кстати, современные мобильные устройства имеют настолько высокое разрешение, что для них не помешает подготовить картинки утроенного размера.

Шаг №1: подготовьте картинки
На этом этапе вы поймете, почему рекомендуется не делать оформление сайта на базе растровых изображений, а использовать картинки именно как картинки. Рамочки, менюшки и прочее нужно делать с помощью CSS и векторной графики, а растровым картинкам оставить роль иллюстраций. Иначе вам придется подготовить все элементы в трех размерах: обычном, удвоенном и утроенном (ну или хотя бы в двух). Тут у вас может возникнуть вполне правильное желание переделать сайт с нуля. Но если вам повезло и замены требуют только картинки, для которых вы можете найти оригинальные большие версии, то следуйте следующему алгоритму: 

  • Узнайте с помощью Chrome Developer Tools или аналогичных инструментов других браузеров отображаемые размеры каждой картинки. 
  • Возьмите оригинальные большие изображения и отмасштабируйте их в сторону уменьшения (!) до нужных размеров: установленных на первом шаге, а также удвоенных и утроенных. В принципе, вы можете ограничиться только удвоенным размером. Обязательно давайте картинками имена такого типа: image.jpg, image@2x.jpg, image@3x.jpg.

Шаг №2: поместите картинки в папку с ассетами (assets)
Подготовленные картинки нужно залить в папку с ассетами (ресурсами) вашего сайта. Это та самая папка, в которой лежат картинки сейчас.

Шаг №3: вставьте картинки на сайт с учетом логических и физических размеров
Проще всего напрямую указывать размер в логических пикселях в HTML или через CSS. Например, вот так: <img src="image@2x.jpg" width="300" height="600" /> Вы прописываете путь к картинке в папке на вашем сервере, а также указываете размеры. При этом физические размеры изображения image@2x.jpg должны быть СТРОГО 600 на 1200 пикселей. И, повторимся, нельзя взять картинку 300 на 600 и растянуть ее в фотошопе. Оригиналом должна быть картинка размером 600 на 1200 или больше (в этом случае ее нужно обрезать или отмасштабировать в сторону уменьшения до 600 на 1200).

Есть и более продвинутый способ: использование библиотеки типа retina.js или самописного скрипта с похожим функционалом. 


С их помощью ваш сайт сможет определить, с какого именно устройства зашел посетитель: обычный у него экран или высокого разрешения. В зависимости от этого ему будут отданы картинки обычного или удвоенного разрешения (если вы их подготовите и сложите в папку рядом, правильно обозначив их именами типа image.jpg, image@2x.jpg). Более того, можно указать в атрибутах сведения о наличии альтернативной картинки высокого разрешения: <img src="/images/my_image.png" /> В этом случае скрипт retina.js (который вам нужно скачать и подключить по инструкции на сайте, это делается путем добавления одной строчки в код страницы) сразу отдаст посетителю с экраном высокого разрешения большую картинку, а не будет делать дополнительный запрос к серверу и проверять, есть ли эта картинка в наличии.

Векторные изображения
Векторные изображения (SVG, иконочные шрифты) отлично выглядят на любых разрешениях — они ничуть не потеряют в качестве, даже если в будущем выпустят какую-нибудь Retina32K. Поэтому все элементы сайта, не являющиеся иллюстрациями и фотографиями, лучше всего делать именно векторными. Однако это не очень полезный совет, если вы не делаете сайт с нуля, а пытаетесь модернизировать старый. Но вы должны держать эту мысль в голове, чтобы при заказе нового сайта включить это в требования к подрядчику.

Вывод
В общем, как вы видите, технически в «ретинизации» сайта нет ничего сложного. Однако вам понадобятся картинки высокого разрешения, которых у вас, скорее всего, нет — особенно если ваш сайт достаточно старый. Лучше всего не опираться на цифры, а ориентироваться на внешний вид сайта в сравнении с конкурентами. Помогут и показатели систем статистики — если у вас уже достаточно много посетителей с экранами Retina и 4K, а сайт выглядит на них плохо, то какие-то меры придется принимать обязательно. В будущем доля таких посетителей будет только расти. А сейчас, как мы уже писали выше, это ваши самые платежеспособные потенциальные клиенты.

Версия для печати

Вернуться ко всем статьям