Что такое Retina Ready, или же — пора делать сайты с поддержкой HiDPI

Да, времена меняются и прогресс не стоит на месте. В продолжение статьи о том, что пора использовать SVG графику, сегодня мы затронем другое проявление прогресса, а именно HiDPI дисплеи.

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

Ах да, есть еще Retina — это маркетинговое название для того же HiDPI от компании Apple. Ну а у них сейчас все устройства с такими экранами выпускаются, что очень хорошо, поскольку глаза скажут спасибо, за использование такого дисплея. Ну а Retina Ready — значит готовность чего-либо к нормальному отображению на таких экранах, в нашем случае речь пойдет о сайтах.

Если сайт обычный, какими они сейчас и есть, то вся графика на нем выглядит — размытой. Смотрит на нее человек с 4k экрана на виндовсе, или же с макбука с ретиной, или с планшета с экраном full hd и более, или же с телефона, без разницы. У всех них графика — размытая.

Как же решить проблему размытой графики на дисплеях с повышенной четкостью?

А очень просто, не забывать о их существовании при разработке сайта. Вся беда в графике, следовательно ее мы и будем оптимизировать. Это касается как обычных фотографий, так и иконок и даже разных фонов/подложек для блоков. Проще говоря всех картинок которые есть на сайте.

Их проблема в том, что они маленького расширения, в следствии чего увеличиваются до нужных размеров, и выглядят как если бы вы обычную иконку 100 на 100 пикселей увеличили в 2 раза, что бы ее расширение стало 200 на 200 пикселей. Вот попробуйте так сделать, размытая картинка получилась?

Вот и на экранах с повышенной плотностью пикселей такая же беда. Тут ответ напрашивается сам — надо использовать картинки большего расширения, чем пиксель в пиксель, как обычно делается разработчиками с мониторами у которых 96ppi, именно на них зачастую и ведется разработка сайтов и такие дизайнеры/верстальщики попросту не видят проблемы, а когда проверяют адаптивку или просто смотрят свои творения на планшетах/телефонах, попросту игнорят проблему с размытыми картинками.

Если еще кто не понял, какая разница между всеми этими экранами, то вот для наглядности иллюстрация:

(слева показана плотность обычного монитора, справа того, который с повышенной плотностью пикселей)

Судя по ней, становится ясно, что картинки на сайте нужно использовать как минимум в 2 раза большего размера, если фотография была в расширении 300 на 300 пикселей, то надо вместо нее ставить 600 на 600 пикселей и в стилях ее прописать размер 300 на 300. Тогда она сожмется и будет четкая как на «устаревших» мониторах, так и на сверх четких.

Вот собственно и ответ, все крайне просто. Да, страницы будут грузится немного дольше, но come on, уже скоро 2018й. Даже в глуши ловит 3G, я уже молчу о проводных скоростях, если думать о тех, кто использует gprs, то может вообще будем на белом фоне просто текст верстать, полностью без картинок, что бы у них загружалось нормально? Раньше да, я сам сидел с телефона у которого не было EDGE, а был только GPRS (сейчас таких телефонов практически нет), там да, мне нравились сайты которые вообще без картинок 🙂 Но суть в том, что те времена бесследно ушли и пора жить современностью.

Тут мы выяснили, картинки надо большие, можно конечно делать хитрость, что бы грузило сначала обычного расширения графику, а потом если нужно (скрипт определяет, что за экран у посетителя) грузить поверх картинку в большем расширении, но тут есть минус, картинки то все равно по началу показываются размытыми и только потом перезагружаются, что раздражает и посетителям кажется, что сайт поломался.

Есть еще иконки, они так же размываются если не готовы к отображению на хороших мониторах:

Но к ним применим альтернативный способ спасения от нечеткости — svg графика. По ссылке есть целая статья посвящена этому вопросу, так что повторятся не вижу смысла.

Что мы имеем в итоге — пора делать сайты, которые одинаково хорошо отображаются на всех дисплеях. Для этого используем там где это возможно SVG (векторную) графику, а если нужно именно растровое изображение — тогда оно должно быть минимум в 2 раза больше, чем его расширение показываемое на обычном мониторе. И тогда сайты будут четкие, и нравится всем вашим посетителям.

А вы делаете сайты с поддержкой HiDPI?

Апдейт в 2021 году: видео по теме, как ощутить преимущества ретина дисплея: