Что впервые экран retina был. С чйцх учпк рмбоыеф пфуадб: утедойе чйъхбмшоще тбууфпсойс

Разработка мобильных приложений

Перевод

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

CSS-пиксели

CSS-пиксели (CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:

Такой блок на обычных экранах будет занимать область 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:

Соотношение между физическими и CSS-пикселями можно устанавливать так:
device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … }

Или так:
device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … }

В Javascript добиться этого можно, используя
window.devicePixelRatio

Растровые пиксели

Растровые пиксели (bitmap pixels) - самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

Оптимизация

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

HTML и CSS-масштабирование

Самый простой способ подготовить графику к Retina-дисплею - это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400x600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры. Таким будет отображение на обычном экране:

А таким на Retina:

Есть несколько способов реализации HTML и CSS-масштабирования:

HTML

Самый простой способ - просто задать параметры width и height тегу img:

Где использовать: на одностраничных сайтах с несколькими изображениями.

Javascript

Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:
$(window).load(function() { var images = $("img"); images.each(function(i) { $(this).width($(this).width() / 2); }); });

Где использовать: на сайтах с несколькими изображениями в контенте.

CSS (SCSS)

Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div"а. Параметр background-size не поддерживается в IE 7 и 8.
.image { background-image: url([email protected]); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; }

Можно использовать псевдоэлементы:before или:after
.image-container:before { background-image: url([email protected]); background-size: 200px 300px; content:""; display: block; height: 300px; width: 200px; }

Техника работает и при использовании спрайтов:
.icon { background-image: url([email protected]); background-size: 200px 300px; height: 25px; width: 25px; &.trash { background-position: 25px 0; } &.edit { background-position: 25px 25px; } }

Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).

HTML и CSS-масштабирование: плюсы

Простота реализации
Кроссбраузерность

HTML и CSS-масштабирование: минусы

Устройства с обычными экранами будут скачивать лишние мегабайты
На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
Параметр background-size не поддерживается в IE 7 и 8.

Определение плотности пикселей экрана

Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.

CSS

В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:
.icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 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) { .icon { background-image: url([email protected]); } }

Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.

Плюсы

Кроссбраузерность

Минусы

Утомительно внедрять, особенно на крупных сайтах
Использование изображения контента в качестве фона семантически некорректно

Javascript

Того же результата можно добиться, используя window.devicePixelRatio:
$(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); }); } });

Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.

Где использовать: на любых сайтах с изображениями в контенте.

Плюсы

Простота внедрения
Устройства не скачивают лишние изображения
Контроль плотности пикселей на сайте

Минусы

Retina-устройства скачивают оба варианта каждого изображения
Подмена изображений заметна на retina-устройствах
Не работает в некоторых популярных браузерах (IE и Firefox)

Масштабируемая векторная графика

Вне зависимости от используемого метода растровые изображения по своей природе остаются ограниченными в масштабировании. Тут нам может помощь векторная графика. SVG (Scalable Vector Graphics) формат на основе XML поддерживается большинством браузеров. Самый простой способ использования SVG-изображений - в теге img или CSS-параметрами background-image и content:url().

В этом примере простое SVG-изображение может быть как угодно масштабировано:

То же самое получится с применением CSS:
/* Использование фонового изображения */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /* Использование content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }

Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
.image { background-image: url(example.png); background-size: 200px 300px; } .svg { .image { background-image: url(example.svg); } }

Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.

В HTML можно реализовать аналогичное с помощью нужного data в теге a:

С использованием jQuery и Modernizr:
$(document).ready(function(){ if(!Modernizr.svg) { var images = $("img"); images.each(function(i) { $(this).attr("src", $(this).data("png-fallback")); }); } });

Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

Плюсы

Единый набор изображений для всех устройств
Простота реализации
Бесконечное масштабирование

Минусы

Нет точного сглаживания «до пикселя»
Не подходит для сложной графики из-за больших размеров файла
Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android

Иконочные шрифты

Популярный благодаря

Retina Display – фирменная технология компания Apple, на базе которой создаются дисплеи для всех новых мобильных устройств. Компания продвигает эту технологию как современное чудо, равного которому не было, и обещает в этих экранах, кроме отличной передачи цветового баланса, еще и огромную плотность пикселей. В принципе, сейчас ведется интеллектуальная война между технологиями Retina и OLED от Samsung. Что более интересно, так это то, что Retina – хорошо всем знакомая технология TFT + IPS. Плюс засилие брэнда, разумеется.

TFT, или LCD – экраны, построенные на базе свойств жидких кристаллов. Эти кристаллы являются жидкостью, которая при определенном воздействии могжет превращаться в кристалл, а потом опять становиться жидкой. Эту жидкость синтезируют на предприятиях, строя на ней различные LCD экраны. Принцип работы монитора довольно прост, если описывать его на пальцах. Имеется два поляризационных фильтра, через которые проходит свет. Один из них имеет вертикальную решетку вырезов, второй – горизонтальную. Между фильтрами находится «аквариум» с жидкими кристаллами. Разумеется, он очень тонкий, закрытый, а внутри, кроме кристаллов, находятся дорожки для прохождения электрического тока. Сами кристаллы не воспроизводят цвет, но отражают его. Когда на сетку подается ток, кристалл поворачивается и меняет направления света. Для монохромных дисплеев этого уже хватает. Когда поляризирующие пластины имеют одно направление, то на выходе фильтра свет задерживается и получается черная точка, иначе – белая. Цвет создается с помощью цветных светофильтров, на каждый из которых попадает луч от кристалла.

Для LCD мониторов придуманы различные «улучшители» передачи, к примеру, IPS и TN. С помощью первой технологии организуется большой угол обзора картинки на экране, а также более естественные цвета. Вторая технология выглядит поуже и похуже, зато работает намного быстрее. Объединить их невозможно. Понятие TFT, вообще говоря, относится к транзисторной технологии на тонкой пленке, где каждый из них усиливает свойства отдельного пикселя по скорости и контрастности. В TN жидкие кристаллы расположены перпендикулярно экрану, в IPS – параллельно. Для пользователя же важно то, что глаз не видит отдельных пикселей при плотности свыше 300 dpi, а технология Retina этого уже добилась.

Осталось только немного рассказать о том, чем, в принципе, отличаются от LCD-базовых особенностей OLED технологии. В них используется рабочее тело, которое само, без инициирующего света, может создавать свечение, вследствие чего на такой технологии можно получать гораздо более тонкие мониторы. Кроме того, OLED мониторы намного экономнее используют энергию и могут дольше работать без подзарядки. Еще пока неизвестно, какая технология победит в дальнейшем, но уже сейчас размеры устройств от Samsung растут и увеличивают свою плотность на дюйм, из-за чего Retina кажется технологией позапрошлого дня. Но у Apple еще найдутся козыри в рукаве – как всегда.

Развитие ЖК-мониторов обусловлено, в то числе, появлением технологии под названием IPS (In-Plane Switching). Название было дано из-за способа размещения кристаллов в IPS-панели: кристаллы расположены в одной плоскости параллельно поверхности панели. Данный способ дал возможность получить намного большие углы обзора, что и сделало ЖК-мониторы альтернативой ЭЛТ-дисплеям.

Внедрение технологии IPS позволило убрать основные недостатки первых ЖК-дисплеев: маленький угла обзора, обусловленный разной степенью поворачиваемости молекул ЖК-вещества, что приводило к разной интенсивности излучения пучков света, после того, как они проходили второй фильтр панели.

Изменения в отрасли производства ЖК-панелей стали возможны благодаря инженерам компании Hitachi, представившим официально в 1996 году IPS-технологию. Благодаря этому прорыву новые дисплеи имели не очень большое время отклика при качестве цветопередачи, соизмеримым с мониторами, созданными на базе электронно-лучевой трубки.

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

Также особенностью IPS стало то, что при подаче напряжения на жидкий кристалл, он возвращал свою круговую поляризацию, а значит, увеличивал свою яркость.

Первые IPS-панели были неоправданно дороги, что никак не способствовало их поппулярности. К тому же, время отклика в 50 мс оставляло желать большего: время отклика было заметным даже при простом скроллинге, не говоря уж про трёхмерные .

Естественно, потребовались усовершенствования, которые и были сделаны различными производителями ЖК-панелей. Это Super-IPS, Dual Domain IPS, Advanced Coplanar Electrode и др. Доработка позволила добиться ещё больших углов обзора, вплоть до 180 (!) градусов. Через какое-то время компания NEC начинает выпускать панели, ставшие простым развитием технологии IPS, среди которых были A-SFT, A-AFT, SA-SFT и SA-AFT.

Что такое экран Retina?

Известно, что человеческое зрение очень инерционно. Вот почему 24 кадра в секунду для человеческого глаза достаточно, чтобы видеть непрерывное изображение на экране телевизора. Примерно тоже можно сказать и о самом изображении. При достаточном удалении глаз человека принимает картинку из крупных мазков так, как будто это глянцевая фотография с высоким разрешением. Вообще, человек способен различать около 300 точек на дюйм. Если их меньше, то глаз видит так называемую зернистость отображения, а если больше, то картинка кажется очень четкой и яркой.

Именно эта особенность и характеризует экраны Retina, т.е. экраны с высокой плотностью пикселей. Именно такой используется в Iphone 4:

На картинке видно, что плотность в 326 точек на дюйм обеспечивает четкое изображение, в то время как обычный экран просто пугает своими пикселями.

Оставьте свой комментарий!

Перевод

Для начала разберемся в терминологии.

Физические пиксели

CSS-пиксели

Или так:
device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … }

В Javascript добиться этого можно, используя
window.devicePixelRatio

Растровые пиксели

Оптимизация

HTML и CSS-масштабирование

А таким на Retina:

Есть несколько способов реализации HTML и CSS-масштабирования:

HTML

Самый простой способ - просто задать параметры width и height тегу img:

Где использовать: на одностраничных сайтах с несколькими изображениями.

Javascript

Где использовать: на сайтах с несколькими изображениями в контенте.

CSS (SCSS)

HTML и CSS-масштабирование: плюсы

Простота реализации
Кроссбраузерность

HTML и CSS-масштабирование: минусы

Устройства с обычными экранами будут скачивать лишние мегабайты
На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
Параметр background-size не поддерживается в IE 7 и 8.

Определение плотности пикселей экрана

Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.

CSS

Плюсы

Кроссбраузерность

Минусы

Утомительно внедрять, особенно на крупных сайтах
Использование изображения контента в качестве фона семантически некорректно

Javascript

Где использовать: на любых сайтах с изображениями в контенте.

Плюсы

Простота внедрения
Устройства не скачивают лишние изображения
Контроль плотности пикселей на сайте

Минусы

Retina-устройства скачивают оба варианта каждого изображения
Подмена изображений заметна на retina-устройствах
Не работает в некоторых популярных браузерах (IE и Firefox)

Масштабируемая векторная графика

В этом примере простое SVG-изображение может быть как угодно масштабировано:

В HTML можно реализовать аналогичное с помощью нужного data в теге a:

Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

Плюсы

Единый набор изображений для всех устройств
Простота реализации
Бесконечное масштабирование

Минусы

Нет точного сглаживания «до пикселя»
Не подходит для сложной графики из-за больших размеров файла
Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android

Иконочные шрифты

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

Итак, что такое Retina? В чем заключается преимущество этой технологии перед конкурентами? И вообще, как работает эта Retina? Давайте разбираться.

Что такое Retina дисплей

Когда Стив Джобс на презентации нового iPhone 4 впервые показал миру дисплей Retina – весь мир просто ахнул от удивления и взорвался волной неподдельного восторга. После iPhone 4 этот дисплей появился в новых моделях iPad, MacBook и iMac. Но что такое Retina дисплей и почему люди так им восторгаются?

Самое главное, что вам стоит знать, так это то, что Retina является запатентованным брендом компании Apple. Кроме того, в этих дисплеях нет никаких технических откровений. По сути, компания Apple может давать любому дисплею приставку Retina, но с одним условием. Сам Джобс на памятной презентации iPhone 4 говорил, что новый дисплей смартфона настолько четкий, что никто в мире не сможет разглядеть отдельные пиксели с расстояния 25 дюймов. В самом же iPhone 4 плотность пикселей составляет 326 точек на дюйм.

С момента презентации iPhone 4 много воды утекло, и компания Стива Джобса представила целый ряд устройств, в которых установлен экран Retina. Но если вы посмотрите, например, на плотность пикселей в iPad и сравните это значение с плотность в iPhone, тогда у вас может возникнуть некоторое сомнение. Все дело в том, что в планшетах Apple плотность пикселей на экране всего-то 256 точек на дюйм. Так почему же такие экраны также имеет приставку Retina? Неужели компания Apple нас нагло обманывает?

Нет, Apple нас не обманывает. Все дело в том, что для получения приставки Retina дисплею достаточно того, чтобы отдельный пиксель был незаметен людскому глазу. То есть, у нас есть два прямых критерия, которые влияют на то, видим ли мы отдельный пиксель, или нет: плотность и расстояние от экрана до глаз. Поэтому, чем дальше от глаз мы держим экран, тем меньшая плотность пикселей нужна для «исчезновения» пикселей. Иными слова, чем большая диагональ экрана, тем дальше вы его держите от глаз, и тем ниже значения плотности пикселей нужно для получения титула Retina. Вот так, ловкость рук и никакого мошенничества.

В чем разница между обычным дисплеем и дисплеем Retina?

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

Но Apple была бы не Apple, если не исправила бы эту проблему. Итак, проблемы с миниатюризацией инженеры решили с помощью создания специальной системы HiDPI. Работа системы максимально простая: она занимается масштабированием элементов интерфейса до приемлемого для наших глаз размера. Главная задача Retina дисплеев – это сделать все на экране более четким. Особенно дисплеи Retina хорошо отображают текст. Благодаря большому количеству пикселей буквы выглядят плавными и складывается впечатление, что читаешь реальный качественный журнал, а не какую-то его версию в pdf.

Что такое Retina HD и Retina 4K / 5K?

Если дисплеи Retina такие классные, тогда куда уже дальше их улучшать? Но это же Apple, а значит инновациям нет конца 🙂 Все знают, что Apple не только умеет создавать самые лучшие в мире устройства, но и умеет их удачно продавать. И когда в мире все начали говорить сначала о HD, а потом о Full HD и 4К, парни из Купертино просто не могли оставаться в стороне от всего этого. И как результат, в 2014 году выходит новый iPhone 6 с HD разрешением экрана. В iPhone 6 Plus разрешение экрана уже было Full HD. А как именно Apple назвали эти дисплеи в iPhone? Правильно, Retina HD и Retina Full HD.

Когда мир начал сходить с ума по поводу разрешения 4К (экраны с 4 000 пикселей по горизонтали), компания Стива Джобса также выпустила свое устройство с экраном 4К — Retina 4K. Таким устройством стал iMac с диагональю дисплея 21 дюйм и плотностью пикселей 218 точек на дюйм. Но разрешение 4К есть у всех, а Apple ведь должна быть лучше всех. Поэтому, в 2014 году на рынок вышел iMac с диагональю 27 дюймов и впечатляющем разрешением по горизонтали 5120 точек. Как вы уже догадались, в компании этот дисплей назвали Retina 5K. Как видите, для Retina нет преград с точки зрения разрешения. Главное высокая плотность пикселей.

Используют ли другие производители термин Retina?

Поскольку компания Apple бережет свои патенты как зеницу ока, никто в мире кроме них не может воспользоваться в названиях дисплеев термином «Retina». В противном случае, юристы компании просто затаскаю неосмотрительного производителя по судам. Но запрет на использования термина Retina вовсе не означает, что производители не могут делать дисплеи с большей плотностью пикселей чем в Apple.

Так, например, одной из первых моделей смартфонов на рынке, в которой плотность пикселей дисплея была значительно больше, чем в iPhone, был Sony Xperia Z5 Premium. Только представьте себе, при разрешении 4К и диагонали дисплея 5,5 дюймов, плотность пикселей составляла 806 точек на дюйм. Также компания Samsung не могла стоять осторонь этих гонок за плотностью пикселей. Первый ее смартфон с действительно высокой плотностью пикселей на дюйм – это Galaxy S6. При разрешении 1440 x 2560 (Quad HD или QHD) и диагонали дисплея 5,1 дюйм плотность пикселей составляет 5,1 дюйм.

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

Резюме

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