В 2010 году Apple изменила наше представление о дисплеях для мобильных – iPhone 4 получил экран с уникальной на тот момент технологией 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» означает, что вы не разглядите на экране пикселей , т.е. будете наслаждаться качественной картинкой при любых обстоятельствах. Многим ли нужно больше?
Более подробно о технологии
В отличие от терминов вроде HD, 4К, Retina и т.п., «True Tone» не имеет ничего общего с количеством пикселей на экране. Его сфера ответственности - цвета и контраст . Главная задача - сделать так, чтобы идеально белый цвет всегда оставался идеальном белым, при любом внешнем освещении. А чем более «белым» будет дисплей, тем он будет и более контрастным.
Вы замечали, что свет утром имеет немного красноватый оттенок, а в середине дня - желтоватый? Нет? Логично – ведь наш мозг специально «отфильтровывает» оттенки.
Современные экраны хорошо отражают свет, но наш мозг этого не замечает и по-прежнему пытается фильтровать то, чего нет. В результате страдает наше восприятие цветов на экране. True Tone компенсирует это путем добавления на дисплей теплых оттенков. Мозг с радостью фильтрует картинку – и мы получаем «настоящий» белый цвет, «как лист бумаги формата А4».
Более подробно о технологии True Tone мы рассказывали .
Сегодня мы с вами разберем, что представляет собой технология экрана Retina Display. Retina Display — это новый экран широкого разрешения. Он используется на планшетном компьютере IPad. Разрешение данного экрана составляет 2048х1536 точек. Это значительно больше, чем у некоторых мониторов. Технология Retina Display является инновацией на рынке планшетных компьютеров. Работа, проделанная инженерами Apple, достойна уважения.
Раньше люди работали с такой точной и качественной картинкой, используя только профессиональные мониторы (например, компьютерные мониторы типа hi-end от различных компаний), стоимость которых составляла в основном свыше $9.000, но на сегодняшний день вы можете насладиться отменной четкостью изображения, просто купив планшет, на котором установлена Retina Display.
В планшете IPad с дисплеем Retina работает технология IPS. Из-за данной системы мы получаем более широкий угол обзора. Благодаря данной технологии, в каком бы положении ни находился iPad, вы всегда будете видеть отличное изображение. Также контрастность дисплея Retina намного выше, чем у предыдущих. Из-за этого белый цвет намного ярче, а черный выглядит значительно темнее, и в результате целиком изображение смотрится гораздо лучше. По заявлению инженеров компании Apple, было довольно сложно сделать дисплей с 3,1 миллиона пикселей. Для достижения наивысшего качества изображения разработчики использовали разделение системной логики дисплея Retina iPad на две сферы. В верхней остались сами пиксели, а в нижней была размещена схема формирования сигналов для каждого субпикселя, который определяет зеленый, красный или синий цвет.
Если вы сделаете свой выбор в пользу Retina Display, что это вам даст? Инженеры Apple усовершенствовали и стекло.
Оно сделано из таких же материалов, что применяются в стеклах вертолетов. Оно подверглось химической обработке, за счет чего возросла его прочность, защита от различного рода царапин и его крепкость. Важная особенность данного дисплея в том, что присутствует особое олеофобное покрытие, которое помогает предотвратить появление следов от пальцев и без труда удалить их. Также среди дополнительных функций Retina выделяют внешнюю освещенность и светодиодную заднюю подсветку. Она заключается в регулировании яркости экрана, вследствие этого происходит оптимальный расход батареи без потери качества изображения.
Можно с уверенностью сказать, покупая Retina Display, что это отличная вещь, предоставляющая массу преимуществ. Экран iPad"ов последнего поколения выделяется не только высоким разрешением, но и отличной передачей цветов и оттенков — в особенности абсолютно идеальной гамма-кривой и стандартным охватом цвета.
В результате этого все ваши видео и фотографии будут выглядеть на данном планшете в точности так, как они и должны отображаться на «стационарном» устройстве. Запас яркости дисплея в основном до 407 кд/м 2 на максимуме. Недостаток ее может быть ощутимо заметен только на достаточно ярком солнце, в других случаях вполне хватает запаса батареи. Коэффициент контрастности составляет около 900:1. Данный показатель вырос по сравнению с прошлым поколением iPad (где коэффициент составлял 687:1). Антибликовый фильтр дисплея Retina Display - что это? Прибор, который хорошо справляется с внешними световыми помехами и не дает экрану блекнуть или выцветать под действием света. Углы обзора достаточно широки, оттенки практически не искажаются, картинка остается разборчивой при любом угле взгляда.
Также, если вы являетесь создателем обоев на заставки для «АйУстройств», то вас, несомненно, порадует данный дисплей. Сделать все под этот экран стало намного проще. Дисплей сам помогает убрать все пиксельные шероховатости и выдает вам отличное изображение высочайшего качества.
Но, каким бы хорошим ни был данный дисплей, он все-таки имеет несколько недостатков. Во-первых, в некоторых девайсах, имеющих экран Retina, он имеет свойство нагреваться, что оказывается неприятным. Во-вторых, что бы нам ни говорили о стойкости батареи, данный дисплей на максимальной яркости довольно быстро разряжает аккумулятор устройства. И, в-третьих, часто возникают проблемы с авто-яркостью, которая плохо подстраивается под внешнее освещение, но вы всегда можете настроить ее вручную.
Но все эти минусы Apple iPad (Retina Display - одна из лучших его характеристик) не могут испортить удовольствие от получаемого качества изображений. Да и с каждой новой моделью дисплей становится все совершеннее.
Складывая все особенности и достоинства новой технологии, можно сделать вывод о Retina Display, что это замечательный подарок. Мы видим, что полученный продукт полностью оправдывает все наши мечты и ожидания по поводу него. Качество изображения не изменяется при просмотре с разных углов, цвета не перебивают друг друга и не блекнут, а от чтения, просмотра видеофайлов и фотоизображений пользователи станут получать намного больше удовольствия. Однозначно на данный момент это лучший из всех существующих дисплеев для планшетных компьютеров.
Развитие ЖК-мониторов обусловлено, в то числе, появлением технологии под названием 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.
Известно, что человеческое зрение очень инерционно. Вот почему 24 кадра в секунду для человеческого глаза достаточно, чтобы видеть непрерывное изображение на экране телевизора. Примерно тоже можно сказать и о самом изображении. При достаточном удалении глаз человека принимает картинку из крупных мазков так, как будто это глянцевая фотография с высоким разрешением. Вообще, человек способен различать около 300 точек на дюйм. Если их меньше, то глаз видит так называемую зернистость отображения, а если больше, то картинка кажется очень четкой и яркой.
Именно эта особенность и характеризует экраны Retina, т.е. экраны с высокой плотностью пикселей. Именно такой используется в Iphone 4:
На картинке видно, что плотность в 326 точек на дюйм обеспечивает четкое изображение, в то время как обычный экран просто пугает своими пикселями.
Оставьте свой комментарий!
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 еще найдутся козыри в рукаве – как всегда.
После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?
Для начала разберемся в терминологии.
Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.
Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.
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 раза:
А таким на Retina:
Есть несколько способов реализации HTML и CSS-масштабирования:
Где использовать: на одностраничных сайтах с несколькими изображениями.
Где использовать: на сайтах с несколькими изображениями в контенте.
Можно использовать псевдоэлементы: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;
}
}
Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).
Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.
Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.
Где использовать: на любых сайтах с изображениями в контенте.
В этом примере простое 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"));
});
}
});
Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.
