Что такое ретина на айфоне. Ретина LCD дисплей, что это такое, его устройство и преимущества

Разработчики разных компаний стараются уделять больше внимания дисплею, пытаясь привлечь новых пользователей к своей продукции. Так чем же удивил в этот раз Apple, и что такое дисплей Retina? Его преимущества перед другими и недостатки. Именно об этом и расскажет данная статья.

Дисплей – это неотъемлемая часть каждого устройства. Будь то планшет, компьютер или телефон. Ведь именно через него осуществляется связь человека с «железом».

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

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

Раньше такой чёткостью дисплея можно было насладиться только на профессиональных компьютерах, но теперь доступно и на устройствах от Apple. Чаще всего Retina используется на планшетах iPad , разрешение составляет 2048х1536 точек. Это даже больше, чем у некоторых компьютерных мониторов.

Фото: Наглядное сравнение разрешения iPhone 3Gs (обычный дисплей) и iPhone 4s (ретина-дисплей)

Retina использует только Apple?

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

Стив Джобс (основатель Apple) как-то сказал, что 300 точек на дюйм – это золотая середина для телефонов.

Преимущества и недостатки дисплеев Retina

Retina дисплей содержит в себе ряд преимуществ, которые отличают его от дисплеев других компаний:

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

Но все дисплеи имеют свои недостатки. И Retina не стал исключением. При использовании на максимально возможных настройках батарея быстро нагревается и разряжается.

Краткие выводы

Retina дисплей – является разработкой корпорации Apple. На сегодняшний день является лучшим в соотношении цена-качество.
Картинка на таком дисплее очень чёткая, цвета соответствуют реальности. На таких планшетах очень удобно рисовать.
Одним из главных плюсов является угол обзора, который позволяет оставаться картинке чёткой и «правильной» относительно цветов, независимо от того, под каким углом смотреть.
Учитывая преимущества и недостатки, 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 еще найдутся козыри в рукаве – как всегда.

, мобильной операционной системе . Сегодня мы дальше продолжим знакомить вас с особенностями продукции от этой купертинской компании. В нашей сегодняшней статье мы расскажем вам об одном моменте, который заставляет пользователей восторженно вздыхать от взгляда на экран смартфона / ноутбука / планшета / моноблока от 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. До новых встреч в наших следующих материалах.

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

Перевод

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

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

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.