Сьогодні я розповім як швидко оптимізувати зображення вашого сайту під якісне відображення на дисплеях Retina, використовуваних на нових MacBook, iMac, iPhone, iPad і т.д. Як завжди, перед цим трохи теорії і моїх практичних порад.
Почнемо з визначення:
Rétina (від лат. Retina - сітківка) - загальне маркетингове назву ЖК-дисплеїв, використовуваних в пристроях Apple і відрізняються настільки високою щільністю пікселів, що людське око не здатне помітити, що зображення складається з них.
Мабуть, на цьому теоретичну частину закінчимо. Кому цікаво пристрій РЕТІНА-дисплеїв, можуть без особливих зусиль знайти більш глибокі відомості на спеціалізованих ресурсах.
Отже, ви напевно помічали, що на ретиніт частина графіки більшості сайтів розпливається. Правильніше сказати, виглядає не дуже чітко по-порівнянні з іншими елементами інтерфейсу. Що буває помітно навіть неозброєним поглядом. Чи не складно зрозуміти - пливе растрова графіка. З вектором все в порядку, він відмінно масштабується на будь-якому дозволі і з будь-якою щільністю пікселів. Існують ряд способів боротьби з цією проблемою, розроблені цілі бібліотеки, за допомогою яких ви можете повністю адаптувати свій сайт під ретиніт. Але сьогодні мова піде трохи про інше.
На мій погляд, адаптація растра - це не зовсім розумний підхід. Я вважаю, що вже давно настав час позбавлятися від нього в інтерфейсі і повністю переводити його елементи в векторну графіку. Наприклад, в SVG. Крім того, за допомогою нових стилів CSS3 можна позбутися від растрової мазні в градієнтах, тінях на кнопках і інших елементах інтерфейсу. Колись популярні на рубежі століть растрові іконки теж вже давно померли і використовуються хіба що відсталими любителями. На зміну їм прийшов все той же векторний SVG і настільки улюблені веб-розробниками бібліотеки шрифтових іконок. Ви здивуєтеся, але інтерфейс практично будь-якого сайту можна без особливого клопоту позбавити від растра. Тим самим назавжди позбавивши його від проблем з відображенням на дисплеях високої чіткості.
Якщо вам не вдалося позбутися від растра повністю, не турбуйтеся! Пара-трійка растрових зображень в інтерфейсі сайту - це не біда і зовсім не проблема. Я вам розповім як просто і грамотно за допомогою кількох рядків CSS адаптувати ваше растрове зображення для коректного відображення на Retina-дисплеї.
Не вдаючись в подробиці ситуації, візьмемо простий приклад. У вашого сайту графічно-складний логотип, який неможливо або важко конвертувати в векторний формат. Давайте опустимо логічні запитання: як так вийшло, що немає векторного логотипу і що це за такий логотип, який можна виводити на екран у векторі. Наше завдання зробити щоб відображати логотип на ретиніт чітким, позбувшись від мила.
Нам потрібно лише дописати медіа-запит, щоб для дисплеїв у яких співвідношення фізичних і CSS-пікселів більше 1.5, завантажувалася наша нова картинка logo2x.png
Робиться це дуже просто:
Не забудьте поставити розміри бекграунду такі ж як у вихідного зображення. У нашому випадку 300х100 px.
Зрозуміло, що даний спосіб доцільно використовувати для невеликої кількості конкретних зображень. Якщо ви хочете мати підтримку ретиніт в тому числі і в контенті - використовуйте інші способи. Про них ми поговоримо іншим разом.