Янв
26
2013

Готовим адаптивный сайт к Retina дисплеям

images

Сегодня мы расставим все точки над 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 раза было сказано для упрощения.

standard

retinaCo

Дилемма

Дизайнеры и разработчики теперь имеют несколько типов дисплеев для отображения. Это означает следующие 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 пикселей.

<img src="myIMG.png" height="150" width="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

retinsjs

 

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

Иконки

 

svg-icon

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

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

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)

  • http://ruskweb.ru/ Сергей

    «Retina дисплей это бред Apple» :-D четкая опечатка)

    • http://belyan.in/ Belyan

      упс, не подчеркнулся я и пропустил)) ну коли правда, то н хоть и верну, но зачеркну xD

  • Евгений

    Retina это будущее

    • Александр Старков

      4к теперючи