Современные технологии достигли небывалых высот. При этом они постоянно развиваются и совершенствуются. Так, современные матрицы отличаются высочайшим качеством изображения, которое было недоступно еще 5-10 лет назад. Ярким примером современных достижений в технологии экранов являются дисплеи Ретина. Они отличаются высокой плотностью пикселей, благодаря чему человек видит безупречную картинку. Но, несмотря на то, что такие технологии уже плотно вошли в быт современных людей, многие задают вопрос, Ретина LCD дисплей, что это такое?

1. Что такое матрица Ретина

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

Отвечая на вопрос, что такое ЖК Ретина дисплей, в первую очередь стоит отметить, что само слово «Retina» в переводе с английского означает «сетчатка». Такое название технология получила неспроста. Дело в том, что на сегодняшний день название Retina display используется в общих описаниях обычных жидкокристаллических матриц, которые имеют повышенную плотность пикселей на квадратный дюйм, и используются в устройствах Apple.

Другими словами, отвечая на вопрос, что такое ЖК экран Ретина, можно с полной уверенностью сказать, что это обычные ЖК экраны, сделанные по технологии IPS, имеющие высокую плотность пикселей от 220 ppi и выше. Существует также и неофициальное название данной технологии – Super Fine TFT (SFT). В наше время подобные матрицы используются на всех современных смартфонах, планшетах, МакБуках и другой продукции от компании Apple.

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

1.1. Устройство матриц Retina

Нет смысла долго рассказывать о том, как устроены дисплеи Ретина, ведь как вы уже знаете – это обычная IPS матрица. Единственное отличие заключается в повышенной плотности пикселей. Соответственно, устройство таких матриц абсолютно идентично устройству IPS. Можно сказать, что дисплей Ретина – это своего рода подвид матрицы IPS.

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

1.2. Преимущества экранов Retina

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

Учитывая тот факт, что фактически Retina основан на IPS матрице, не удивительно, что на сегодняшний день такие дисплеи имеют наилучшие углы обзоров. При этом скорость отзыва не уступает другим современным матрицам. Кроме этого, к преимуществам относиться высокий уровень контрастности, показатель которой равен 900:1. При этом стоит понимать, что достичь таких показателей смогли лишь некоторые виды лучших дисплеев, таких как Super Amoled и последние типы IPS матриц, одним из которых является Retina.

Современныt матрицы Ретина обладают не только высоким разрешением, которое превышает Full HD (1920x1080). Помимо этого, они отличаются превосходной цветопередачей, что делает картинку максимально реалистичной. Разработчикам удалось максимально приблизиться к тому, чтобы создать экран, который наиболее оптимально воспринимается органами зрения человека. Это означает, что изображение, отображаемое такими матрицами, наиболее легко и приятно воспринимается глазами.

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

1.3. Недостатки дисплея Ретина

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

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

2. Экраны Ретина в планшетах

Что такое экран Ретина на планшетах? Как правило, прежде чем купить планшет покупатели читают его описание. Одним из важных параметров, на который стоит обращать внимание – это экран. Очень часто, видя слово «Retina» люди не понимают, о чем идет речь. Что значит ЖК дисплей Ретина, вы уже знаете, поэтому при покупке планшетного ПК у вас не должно возникнуть трудностей. Дисплей Retina в планшете означает, что данное устройство имеет дисплей с повышенной плотностью пикселей и с высоким разрешением.

Стоит отметить, что ученым удалось еще сильнее увеличить разрешение дисплея на планшете. Теперь оно выше, чем Full HD разрешение, которое равно 1920х1080 пикселей. К примеру, iPad4 имеет размер экрана 2048х1536 пикселей. При этом плотность пикселей составляет 264 ppi (264 пикселя на квадратный дюйм). Конечно, это ведет к увеличению потребления электроэнергии. Но при этом такое разрешение означает еще более высокое качество изображения.

3. Обзор планшета iPad mini with Retina display: Видео

Конечно, сегодня это уже не самое высокое разрешение, так как наиболее крупные компании постоянно соревнуются между собой, выпуская более современные устройства, с более высокими параметрами. Так, компания Google в ответ iPad4 выпустили Nexus, который имеет разрешение 2560х1600. Конечно, это не экран ретина, хотя по параметрам он не уступает ему.

4. Экраны Ретина в мониторах

Данная технология используется не только в изготовлении экранов для мобильных устройств. Такой дисплей используется и в новых моделях ноутбуках. Первой моделью стало устройство от Apple под названием MacBook Pro. Здесь используется 15 дюймовый экран с разрешением 2880х1800 пикселей. Конечно, плотность пикселей в таких экранах составляет 220 ppi.

Благодаря этому у пользователей появляется возможность обрабатывать изображения в формате Full HD, не уменьшая при этом масштаб картинки.

Матрицы 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). Пример:

Соотношение между физическими и 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

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

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

Оптимизация

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

А таким на Retina:

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

HTML

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

Javascript

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

CSS (SCSS)

Можно использовать псевдоэлементы: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.

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

CSS

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

Плюсы

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

Минусы

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

Javascript

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

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

Плюсы

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

Минусы

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

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

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

Что такое Retina диспдей? Или, какое определение является точным для дисплеев с таким названием?

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

Retina - это собственность Apple. Другие компании могут производить экраны с такими же техническими характеристиками, но назвать их Retina, они не смогут. Это товарный знак.

Какое разрешение у Retina дисплея?

Разрешения экранов приводятся в формате "число пикселей" Х "число пикселей". Но ключевым моментом для Retina дисплеев является плотность пикселей (количество пикселей на дюйм). При одинаковых разрешениях экранов (в пикселях) но разных размерах (в дюймах) плотность пикселей будет разной.

Но, даже с точки зрения плотности пикселей, нет единой цифры, котороя квалифицировала экран как Retina, так как при определении Retina дисплеев учитывается, внимание, расстояние экрана от глаз.

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

• 326ppi - смартфоны
• 264ppi - планшеты
• 220ppi - ноутбуки

Есть ли экраны с характеристиками лучшими, чем у Retina дисплеев?

Есть. Есть экраны, которые обладают большей плотностью пикселей. Сама компания Apple, с момента запуска iPhone 6, предлагает использовать улучшенный экран Retina HD. Но многие Android устройства превосходят по данному показателю устройства Apple, например LG G3 - 534 пикселя на дюйм.

Но, если вспомнить наше предыдущее определение Retina, то увеличение плотности пикселей - довольно спорное предприятие, ведь человеческий глаз уже не видит разницы при таких высоких показателях ppi. Об этом говорили сами Apple. Но выпуск iPhone 6 можно расценивать как признание того, что все-таки разницу ощутить можно.

Разница между Retina и Retina HD.

Термин Retina HD - относится только к экранам новых смартофонов Apple. Так чем же превосходит Retina HD своего предшественника:

• Более высокое разрешение
• Больший контраст
• Более широкий угол обзора благодаря технологии dual domain pixels
• Еще, если смотреть на экран в очках, то изображение на экране будет ярче, чем на предыдущих моделях.

В 2010 году Apple изменила наше представление о дисплеях для мобильных – iPhone 4 получил экран с уникальной на тот момент технологией Retina. Шесть лет спустя купертиновцы представили еще одну совершенно новую разработку для дисплеев – . Чем они отличаются друг от друга – и что выбирать нам, обычным пользователям?

Вконтакте

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

Retina (рéтина) - маркетинговый термин Apple, в переводе с английского означает «сетчатка». Он подразумевает под собой следующее: плотность точек-пикселей на экране высока настолько, что человеческий глаз неспособен различить на картинке отдельные пиксели. При этом за названием «Retina» не скрываются конкретные характеристики – например, определенное количество пикселей или точное разрешение дисплея.

Первым смартфоном с Retina-дисплеем стал iPhone 4. Он получил разрешение 960 × 640 пикселей, чего было более чем достаточно для 3,5-дюймового дисплея - ведь на один дюйм там приходилось 326 пикселей (показатель PPI, pixel per inch).

Кстати, на самом деле дисплеи Apple разрабатывались не на основе PPI, а на основе параметра pixel-per-degree (PPD, пиксель на градус). Он лучше определяет способность человеческого глаза различать детали на определенном расстоянии. При создании этого показателя принимаются в расчет разрешение экрана и угол обзора. Показатель PPD у iPhone 4 составлял 57.

Когда в 2012 году вышел первый MacBook Pro с Retina-дисплеем, он получил рекордное по тем временам разрешение 2 880 × 1 800 пикселей на 15,4-дюймовом экране. Показатель PPI при этом оказался даже ниже, чем у iPhone 4 (220 против 326), но PPD был выше - 79.

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

Сегодня практически все устройства Apple обладают Retina-дисплеем. Потребителю это ровным счетом ничего не говорит о том, сколько именно пикселей на дюйм (или градус) он получит — ведь экран Apple Watch очень отличается от монитора iMac. Но это и не важно - ведь надпись «Retina» означает, что вы не разглядите на экране пикселей , т.е. будете наслаждаться качественной картинкой при любых обстоятельствах. Многим ли нужно больше?

Более подробно о технологии

Что такое True Tone-дисплей?

В отличие от терминов вроде HD, 4К, Retina и т.п., «True Tone» не имеет ничего общего с количеством пикселей на экране. Его сфера ответственности - цвета и контраст . Главная задача - сделать так, чтобы идеально белый цвет всегда оставался идеальном белым, при любом внешнем освещении. А чем более «белым» будет дисплей, тем он будет и более контрастным.

Вы замечали, что свет утром имеет немного красноватый оттенок, а в середине дня - желтоватый? Нет? Логично – ведь наш мозг специально «отфильтровывает» оттенки.

Современные экраны хорошо отражают свет, но наш мозг этого не замечает и по-прежнему пытается фильтровать то, чего нет. В результате страдает наше восприятие цветов на экране. True Tone компенсирует это путем добавления на дисплей теплых оттенков. Мозг с радостью фильтрует картинку – и мы получаем «настоящий» белый цвет, «как лист бумаги формата А4».

Более подробно о технологии True Tone мы рассказывали .

Значок дисплея Retina

Rétina (в переводе с лат.  -  «сетчатка ») - общее маркетинговое название ЖК и OLED дисплеев, используемых в устройствах Apple с 2010 года. Они отличаются повышенной плотностью пикселей , с тем, чтобы человеческий глаз не мог различить отдельные пиксели, из которых состоит изображение. И в то же время, название Retina запрещается использовать в продуктах других брендов для дисплеев, имеющих такую же или даже бо́льшую плотность пикселей.

Для технологии нет устоявшегося норматива по плотности пикселей: Apple определяет различную плотность для разных устройств и в соответствии с типичным расстоянием просмотра для данного класса устройств - чем больше типичное расстояние, тем меньшей плотности пикселей достаточно для их неразличимости. Опираясь на исследования, что человеческий глаз может различить не более 300 ppi при расстоянии от экрана до глаза 10-12 дюймов (примерно 25-30 см), производитель заявляет, что на таких дисплеях пикселизация изображения неразличима глазом .

Дисплеи Retina, как и другие дисплеи для устройств Apple, изготавливаются компаниями Samsung , LG Display и Sharp .

Техническая информация

В Retina дисплее используется технология IPS (кроме 4-го поколения iPod touch , которое использует технологию ), которая обеспечивает широкий угол обзора, либо OLED (Iphone X). Стекло Gorilla [ ] . Часто экран покрывается олеофобным слоем .

• Apple выпустила следующие устройства, имеющие Retina-дисплеи:

Retina в устройствах

Слова Стива Джобса : «Всё то Retina, что больше 300 ppi». Таким образом, в iPad 3/4/5(Air) используется Retina-подобный дисплей (264 ppi). Также Retina-подобный дисплей используется в MacBook Pro 13 (3-е поколение, 227 ppi), MacBook Pro 15 (3-е поколение, 220 ppi).

Полноценный Retina используется только: из iPod-ов - в iPod 4/5. Из iPhone-ов - в iPhone 4/4S/5/5C/5S/6/6s/SE - 326 ppi (во всех устройствах), а в iPhone 6 Plus и iPhone 6s Plus - 401 ppi. Из iPad-ов - в iPad mini с дисплеем Retina - 324 ppi (во всех устройствах). В iPhone 6 Plus и в iPhone 6s Plus используется Retina . С выходом iPhone 6 и 6+ Apple заявили об использовании в них дисплеев Retina HD с ещё большей плотностью пикселей. Однако на практике плотность пикселей увеличилась лишь в модели 6+, и составляет 401 ppi, в то время как плотность пикселей iPhone 6 осталась прежней - 326 ppi.

В конце 2014 года был выпущен iMac 27" с дисплеем Retina 5к, разрешение которого составляет 5120х2880 (218 ppi).