Как отличить экран ретина от обычного. Аргументы в пользу удвоения пикселей

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


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

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

    После недавнего выпуска 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")); }); } });

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

    Плюсы

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

    Минусы

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



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

    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
    • Еще, если смотреть на экран в очках, то изображение на экране будет ярче, чем на предыдущих моделях.