Плюсы и минусы использования retina js. Как адаптировать изображения для веб-дизайна на дисплеях Retina. Photoshop плагин Retinize It

С каждым новым гаджетом от компании Apple, все больше появляется экранов с технологией Retina Display. Сегодня экраны Retina установлены на iPhone, iPod, iPad и различных моделях MacBook, а их общее число пользователей впечатляет. Давайте узнаем, как создавать специальные изображения retina для вашего сайта, чтобы он смотрелся более навороченным, ярким и четким на мощных экранах такого типа.

Зачем нужна поддержка экранов retina?

Вначале я не ожидал, что число пользователей девайсов с экранами retina будет таким внушительным, ведь эту технологию стали использовать относительно недавно. Но потом, через свой аккаунт на Analytics, я просмотрел статистику по мобильным гаджетам и пришел к выводу, что продукты компании Apple лидировали по всем показателям, и в первую очередь среди них iPhone, iPod и iPad- а все они работают на технологии retina. Что касается 13″ или 15″ MacBook Pro с экраном Retina, то самые популярные пользовательские браузеры- это Chrome, Firefox, Safari и Internet Explorer. Поэтому, если вы работаете в Opera, то, скорее всего, число потенциальных посетителей вашего сайта меньше, чем число пользователей девайсов с Retina в целом (если смотреть по статистике моего собственного сайта, по крайней мере).

Как создавать изображения retina

Вы можете предположить, что изображения Retina сохраняются с более высоким разрешением PPI, но суть не в этом. Все, что нужно сделать - это сохранить несколько копий ваших изображений Retina в увеличенном вдвое размере, чтобы, к примеру, картинка с разрешением 200x200px стала 400x400px. Эти увеличенные изображения затем отображаются в первоначальном размере, что позволяет добиться этой четкой, чистой графики на экранах с высокой плотностью пикселей.

Звучит просто, но как вы собираетесь получить эти увеличенные изображения?

Создавайте логотипы и иконки в Illustrator

Идеальное решение для создания изображений retina- это векторная графика. Если ваш логотип или иконка сделаны в формате EPS или Ai file, то его параметры можно изменять перед тем, как переносить или копировать его в Photoshop. Отметьте элемент как Smart Object, и он сохранит свою векторную форму, так что его можно будет увеличить вдвое и сохранить отдельно как специальное изображение retina.

Используйте функции для векторной графики в Photoshop

В основе приложения Photoshop, прежде всего, лежит пиксельная графика, но это не значит, что в нем нет функций для векторных изображений. Любой инструмент изменения формы может создавать векторной слой вместо пикселей, а масштабы всех ваших эффектов для разметки Layer Style по-прежнему можно будет изменять. Когда вы увеличите масштабы элементов в два раза, все эффекты нужно будет масштабировать для создания почти точной, увеличенной вдвое, копии.

Схитрите, чтобы масштабировать свои изображения

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

Как насчет дизайна в масштабе 200%, а потом уменьшения в обратную сторону?

Вы можете подумать «А почему бы мне просто не создать полностью свою собственную разметку в двойном масштабе, а потом я могу уменьшить объекты до стандартных размеров?». В теории печатного дизайна это бы сработало, но что касается веб-дизайна, мы работаем на уровне пикселей, и создаем идеальные формы и линии. Даже сжатие картинок в Photoshop приведет к размытому изображению, в особенности если речь идет об иконках маленького размера.

Как кодировать графику Retina

После того, как вы создали и перенесли копии всех ваших стандартных изображений в двойном размере, вы можете начать добавлять их на ваш сайт различными способами. Пару слов о названии файла: сохраняйте ваши изображения retina прямо в вашу папку с изображениями с тем же именем файла, но добавляя of@2x в конце. К примеру, snarf.jpg изменится на [email protected].

Простое решение при помощи Javascript

Самый простой способ сделать так, чтобы ваши картинки retina работали- это использовать скрипт retina.js. Retina.js выберет все изображения @2x в вашем списке изображений и автоматически изменит их.

Ручной способ, используя CSS@

header h1 a {
background-image: url(images/[email protected]);
background-size: 164px 148px;
}

Еще один вариант - вы можете добавить ваши изображения retina вручную, чтобы сохранить все стилистическое оформление вашей странички в формате CSS. Промежуточный запрос содержит min-device-pixel-ratio: 2, для объектов с двойной плотностью пикселей. Таким образом, вы замените каждое изображение на его увеличенную вдвое @2x копию, но не забывайте вернуть исходный размер изображения, используя параметр background-size.

HTML для встроенных изображений

Метод CSS отлично подходит для фоновых изображений, но для встроенных в HTML-страничку изображений вам придется изменять теги . Просто добавьте изображение @2x к исходным атрибутам, потом используйте width и height , чтобы вернуть первоначальные параметры.

После появления устройств с дисплеями высокого разрешения, например, iPhone, iPad, Samsung Galaxy Note II и, конечно же, MacBook Pro с 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 указывать актуальный размер отображения:

или в 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/[email protected] , и если это изображение найдено, отобразит его на странице, задав необходимые значения ширины и высоты (width и height).

Чтобы использовать скрипт, загрузите его к себе на сервер и укажите как можно ближе к закрывающему тэгу :

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

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

Сегодня мы расставим все точки над i в отношении Retina дисплеев. Самое простое объяснение: Retina — это дисплей высокого разрешения. Однако, не только продукты Apple обладают такими дисплеями. «Retina дисплей» это только термин придуманный Apple, телефоны, планшеты и мониторы тоже используют технологию высокой четкости. Сегодня, такие дисплеи становятся все более распространенными, поэтому важно создавать сайты и приложения способные качественно их поддерживать.

С учетом вышесказанного, позвольте мне объяснить что же такое Retina ready изображения, и почему они идут рука об руку с адаптивным дизайном, а также как создать такие изображения для этого самого адаптивного дизайна.

Что означает Retina дисплей?

Retina дисплей это бре н д Apple, означающий жидкокристаллические дисплеи с высокой плотностью пикселей. Изображение ниже упрощенно иллюстрирует как различается расположение пикселей на дисплее с обычным разрешением и дисплее Retina. В Retina дисплеях Вы получите вдвое больше пикселей на пространстве того же размера, по сравнению с обычным дисплеем. Вот почему иконки или текст на iPad 2 выглядят хуже, чем на iPad 3.

iPad 3/4 имеет разрешающую способность в 264 пиксела на дюйм, а iPhone 4/5 326, в то время как обычный монитор порядка 100 пикселей на дюйм, что дает разницу в 2,6 и 3,2 раза соответственно. 2 раза было сказано для упрощения.

Дилемма

Дизайнеры и разработчики теперь имеют несколько типов дисплеев для отображения. Это означает следующие 2 вещи: пользователи с Retina дисплеями придется довольствоваться плохо отображаемыми изображениями на сайтах не поддерживающих Ratina, с другой стороны, на сайтах обладающих такой поддержкой все будет выглядеть очень качественно, четко, именно так как мы любим и ожидаем этого.

Почему Retina важна для адаптивного дизайна?

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

Как же создать Retina ready изображения для адаптивного дизайна?

Здесь есть несколько способов и инструментов для этого. Мы рассмотрим только основные, поскольку они лучшим образом решают поставленную задачу.

SVG

Я уверен, что Вы уже знакомы с форматом SVG. Стыдно если нет. Но в любом случае повторимся. SVG это формат изображения в векторной графике, который за счет использования векторов можно увеличивать без потери качества до любых размеров. Поскольку векторы образуют определенную фигуру а не набор пикселей, то ими можно всячески манипулировать и они по прежнему будут выглядеть нетронутыми и четкими. К сожалению, растровые форматы, такие как JPG, PNG, или GIF этим похвастаться не могут.

За счет своей уникальной возможности безупречно изменять размер, SVG является отличным форматом для адаптивного дизайна. Не важно какого размера дисплей, изображения будет выглядеть безупречно как на телефоне или планшете, так и на мониторе. Это работает и для Retina дисплеев, SVG изображения после изменения под плотность пикселей будут выглядеть так же. Поэтому следует использовать SVG во всех возможных случаях.

Фотографии и растровые изображения

Конечно, не все изображения могет быть в формате SVG, особенно если это фотография или уже готовое растровое изображение. Для этого случая тоже есть решение, и оно заключается в показе изображения с размерами сторон в 50%. Что я имею в виду? Допустим Вам нужно разместить фото размером 150×150, а вы для этого используете изображение размером 300×300 но отображаете его как 150×150. В таком случае, на Retina дисплее изображение будет выглядеть резко и качественно.

Есть несколько способов использовать двукратные изображения на Вашем сайте: через HTML, CSS или JS. Не будем особо углубляться в детали, а просто рассмотрим базовые методы.

Первый способ. У Вас есть изображение размером 300×300 и Вы вставляете его в HTML и указываете ширину и высоту в 150 пикселей.

Второй способ. Изменить высоту и ширину изображения можно через CSS, либо указать 50% если Вы уверены что Вам нужно вдвое уменьшенное изображение.

Img{ width: 50%; height: 50%; } .box img{ width: 150px; height: 150px; }

Третий способ. Если Вам нужно использовать такое изображение в качестве фонового, то потребуется следующий стиль:

Box{ background-image: url(myIMG.png); background-size: 150px 150px; }

Но у этого метода есть и свои минусы. Во-первых Вы не можете взять из воздуха увеличенное в 2 раза изображение. Очевидно, что взять и просто увеличить изображение а потом использовать его не пойдет! Кроме того, если на Вашем сайте много изображений, или некоторые изображение просто очень большие, то с этим методом время загрузки сайта может сильно увеличиться. Особенно если учитывать что большинство мобильных устройств имею весьма посредственное соединение с Интернетом с небольшой пропускной способностью.

Но есть способы избежать и этого.

Media Queries

При написании CSS media query позволяют Вам использовать не только высоту и ширину экрана устройства. Следующий код позволяет уверенно определять имеет ли устройство дисплей типа Retina. Этот способ лучше всего подходит для случаев, когда Вы используете фоновые изображения для div’ов, media query может просто заменить его большим изображением. В таком случае, большие изображения будут загружаться только для устройств с Retina дисплеями.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* CSS для Retina устройств */ }

Retina.js

Если Вас по какой-либо причине не устраивает media query решение, то рассмотрите JS вариант. Здесь мы рассмотрим JavaScript плагин для решения нашей задачи. «Retina.js is это open source скрипт, позволяющий легко обслуживать изображения с высоким разрешением, для Retina дисплеев». Этот плагин работает следующим образом: если у Вас есть 2 изображения, одно обычного размера, а второе в два раза увеличенное, retina.js определяет использование Retina дисплея и использует соответствующее изображение. Это работает очень просто, так что обязательно попробуйте. Все что нужно сделать для работы плагина, это правильно назвать изображения.

Иконки

Благодаря @font-face и шрифтам использующим иконки вместо букв, Вы можете легко использовать их вместо изображений. Мне очень нравится этот метод по следующим причинам: Во-первых, шрифты отлично масштабируются, как и SVG, поэтому они подходят не только для различных размеров экрана, но и для разных разрешений, как в случае с Retina.

Рассказываю, как быстро оптимизировать изображения сайта под качественное отображение на дисплеях Retina, используемых на новых MacBook, iMac, iPhone, iPad и т.д. Как обычно, перед этим немного теории и моих практических советов.

Начнем с определения:

Rétina (от лат. retina - сетчатка) - общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся настолько высокой плотностью пикселей, что человеческий глаз не способен заметить, что изображение состоит из них.

Пожалуй, на этом теоретическую часть закончим. Кому интересно устройство Ретина-дисплеев, могут без особого труда найти более глубокие сведения на специализированных ресурсах.

Итак, вы наверняка замечали, что на Ретине часть графики большинства сайтов расплывается. Правильнее сказать, выглядит не очень четко по-сравнению с другими элементами интерфейса. Что бывает заметно даже невооруженным взглядом. Не сложно понять - плывет растровая графика. С вектором все в порядке, он отлично масштабируется на любом разрешении и с любой плотностью пикселей. Существуют ряд способов борьбы с этой проблемой, разработаны целые библиотеки, с помощью которых вы можете полностью адаптировать свой сайт под Ретину. Но сегодня речь пойдет немного о другом.

На мой взгляд, адаптация растра - это не совсем разумный подход. Я считаю, что уже давно пришло время избавляться от него в интерфейсе и полностью переводить его элементы в векторную графику. Например, в SVG . Кроме того, с помощью новых стилей CSS3 можно избавиться от растровой мазни в градиентах, тенях на кнопках и других элементах интерфейса. Некогда популярные на рубеже столетий растровые иконки тоже уже давно умерли и используются разве что отсталыми любителями. На смену им пришел все тот же векторный SVG и столь любимые веб-разработчиками библиотеки шрифтовых иконок. Вы удивитесь, но интерфейс практически любого сайта можно без особых хлопот избавить от растра. Тем самым навсегда избавив его от проблем с отображением на дисплеях высокой четкости.

Если вам не удалось избавиться от растра полностью, не расстраивайтесь! Пара-тройка растровых изображений в интерфейсе сайта - это не беда и вовсе не проблема. Я вам расскажу как просто и грамотно с помощью нескольких строк CSS адаптировать ваше растровое изображение для корректного отображения на Retina-дисплее.

Не вдаваясь в подробности ситуации, возьмем простой пример. У вашего сайта графически-сложный логотип, который невозможно или затруднительно конвертировать в векторный формат. Давайте опустим логичные вопросы: как так получилось, что нет векторного логотипа и что это за такой логотип, который невозможно отобразить в векторе. Наша задача сделать отображение логотипа на Ретине четким, избавившись от мыла.

Вам понадобится изображение логотипа в два раза большее оригинала. Например, у вас имеется логотип logo.png размером 300х100 px. Следовательно, вам нужно создать аналогичное изображение, но размером в два раза больше, т.е 600х200 px. Разумеется, не простым масштабированием в Фотошопе старого маленького логотипа. Создаем новую качественную четкую картинку, желательно из вектора, называем ее, например, [email protected] и сохраняем рядом с основным логотипом.

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

#logo { background-image: url("images/logo.png"); background-repeat: no-repeat; display: block; width: 300px; height: 100px; }

Нам нужно лишь дописать медиа-запрос, чтобы для дисплеев у которых соотношение физических и CSS-пикселей больше 1.5, загружалась наша новая картинка logo2x.png

Делается это очень просто:

@media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url("images/[email protected]"); background-size: 300px 100px; } }

Не забудьте задать размеры бэкграунда такие же как у исходного изображения. В нашем случае 300х100 px .

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

Подпишитесь на мой телеграм и первыми получайте новые материалы, в т.ч. которых нет на сайте.

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

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

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

Решение 1 средствами html

используйте изображение в 2 раза больше, жестко указав параметры width и height

изображение example2x.png должен иметь размер 200x400

Решение 1 средствами JavaScript

Способ аналогичен первому, но немного автоматизирован

$(window).load(function() { var images = $("img"); images.each(function(i) { $(this).width($(this).width() / 2); }); });

Решение 1 средствами CSS

Если необходимо прописать размеры для фона, а не изображения, то это можно сделать следующим образом:

Image { background-image: url(example2x.png); background-size: 100px 200px; /* Alternatively background-size: contain; */ width: 100px; height: 200px; }

Но параметр background-size не поддерживается в IE 7 и 8.

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

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

Решение 2 средствами CSS

Это относится, в первую очередь, к фоновым изображениям

Icon { background-image: url(example.png); width: 100px; height: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx){ .icon { background-image: url(example2x.png); } }

где изображение example.png имеет размеры 100х200, а изображение example2x.png - 200х400

Решение 2 средствами JavaSctipt

Подменяем картинки на большие, если это нужно:

$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $("img"); images.each(function(i) { var lowres = $(this).attr("src"); var highres = lowres.replace(".", "@2x."); $(this).attr("src", highres); }); } });

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