Что такое дисплей IPS и Retina? Технология экранов Retina.

Инструмент 03.08.2019
Инструмент

В 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 мы рассказывали .

ьФХ УФБФША С ТЕЫЙМ ОБРЙУБФШ РПУМЕ ВХТОПЗП ПВЭЕОЙС ЧП НОПЗЙИ ВМПЗБИ УП НОПЦЕУФЧПН РПМШЪПЧБФЕМЕК. уМЩЫБ ФП ФХФ, ФП ФБН "Х iPad"Б ВХДЕФ ХМХЮЫЕООЩК ДЙУРМЕК" ЙМЙ "ЕУМЙ ОЕ Retina, ЪОБЮЙФ, ПФУФПК!" С ТЕЫЙМ, ЮФП РПТБ РТЕЛТБФЙФШ ЬФХ ДЙУЛХУУЙА Й ТБЪПВМБЮЙФШ НЙЖЩ П ДЙУРМЕЕ "Retina".

пУОПЧЩ: ЮФП ФБЛПЕ "Retina"?

оБЮОЈН У ФПЗП, ЛБЛПЕ ПРТЕДЕМЕОЙЕ Apple ДБЈФ ДЙУРМЕА "Retina".

йЪ ПРЙУБОЙС iPhone: "вМБЗПДБТС ДЙУРМЕА Retina ЧУЕ ЮФП ЧЩ ЧЙДЙФЕ Й ДЕМБЕФЕ ОБ ЧБЫЕН iPhone 4S ЧЩЗМСДЙФ РТЕЧПУИПДОП. рМПФОПУФШ РЙЛУЕМЕК УФПМШ ЧЩУПЛБ, ЮФП ЗМБЪ ОЕ НПЦЕФ ТБЪМЙЮЙФШ ПФДЕМШОЩИ РЙЛУЕМЕК." -- Apple.com

йЪ ПРЙУБОЙС iPad: "рЙЛУЕМЙ ОБИПДСФУС ФБЛ ВМЙЪЛП ДТХЗ ПФ ДТХЗБ, ЮФП РТЙ ТБУУНПФТЕОЙЙ У ПВЩЮОПЗП ТБУУФПСОЙС ОБЫЙ ЗМБЪБ ОЕ Ч УПУФПСОЙЙ ПФМЙЮЙФШ ЙОДЙЧЙДХБМШОЩЕ РЙЛУЕМЙ." -- Apple.com

йЪ ЧУФХРЙФЕМШОПК ТЕЮЙ РП РПЧПДХ ДЙУРМЕС Retina: "пЛБЪЩЧБЕФУС, ЕУФШ НБЗЙЮЕУЛПЕ ЮЙУМП - 300 РЙЛУЕМЕК ОБ ДАКН - РТЙ ЬФПК РМПФОПУФЙ ЗМБЪ ОЕ НПЦЕФ ЧЩДЕМЙФШ ПФДЕМШОЩЕ РЙЛУЕМЙ ЕУМЙ УНПФТЕФШ У ТБУУФПСОЙС 10 ЙМЙ 12 ДАКНПЧ (ПЛПМП 25,5 ЙМЙ 30,5 УН - РТЙН. РЕТЕЧ.)." -- уФЙЧ дЦПВУ (Steve Jobs) ОБ WWDC

йЪ ЬФЙИ УМПЧ НПЦОП УДЕМБФШ ЧЩЧПД, ЮФП ДБООПЕ Apple ПРТЕДЕМЕОЙЕ ДЙУРМЕА "Retina" УЧПДЙФУС Л ОЕУРПУПВОПУФЙ ТБЪМЙЮЙФШ ЙОДЙЧЙДХБМШОЩЕ РЙЛУЕМЙ У ОЕЛПФПТЩИ "ОПТНБМШОЩИ" ТБУУФПСОЙК. лПОЕЮОП, ЬФП ЪЧХЮЙФ ЧРЕЮБФМСАЭЕ, ОП, ПУОПЧЩЧБСУШ ОБ ТБЪНЕТЕ ЬЛТБОБ, ТБЪТЕЫЕОЙЙ Й ТБУУФПСОЙЙ, РПДПВОПЕ НПЦОП ХФЧЕТЦДБФШ П МАВПН ДЙУРМЕЕ. оБРТЙНЕТ, 50-ДАКНПЧЩК 720P (1280x720) ФЕМЕЧЙЪПТ ОЕ ХУФХРБЕФ ДЙУРМЕА "Retina" РТЙ ТБУУНПФТЕОЙЙ У ТБУУФПСОЙС РТЙНЕТОП ФТЈИ НЕФТПЧ, ИПФС РМПФОПУФШ РЙЛУЕМЕК УПУФБЧМСЕФ ЧУЕЗП 29.4 PPI. рПДТПВОЕЕ ПВ ЬФПН ОЙЦЕ.

оЕНОПЗП ФЕПТЙЙ: ЙЭЕН ЪПОХ ОБЙМХЮЫЕЗП ЧПУРТЙСФЙС ДМС ДЙУРМЕС "Retina"

фЕРЕТШ, ЛПЗДБ НЩ РПОЙНБЕН ЮФП РТЕДУФБЧМСЕФ УПВПК ДЙУРМЕК "Retina", ЛБЛ ОБКФЙ ОХЦОПЕ ДМС ДПУФЙЦЕОЙС РПДПВОПЗП ЬЖЖЕЛФБ ТБЪТЕЫЕОЙЕ?

пФЧЕФ ЛТПЕФУС Ч ФПН ХЗМЕ ЪТЕОЙС, ОБ ЛПФПТПН ЗМБЪ НПЦЕФ ТБЪМЙЮБФШ ЙЪПВТБЦЕОЙС Й ОЕЛПФПТЩИ НБФЕНБФЙЮЕУЛЙИ ТБУЮЈФБИ. дМС ОПТНБМШОПЗП ЪТЕОЙС ФБЛПК ХЗПМ УППФЧЕФУФЧХЕФ ПДОПК НЙОХФЕ ХЗМБ ЙМЙ ЙМЙ НЙОЙНБМШОПНХ ХЗМХ ТБЪТЕЫЕОЙС ПДОПК НЙОХФЩ. оБ РТБЛФЙЛЕ ЬФП ПЪОБЮБЕФ УМЕДХАЭЕЕ: ЕУМЙ ОБ ЪБДБООПН ТБУУФПСОЙЙ ДЧБ ПВЯЕЛФБ ОБИПДСФУС Ч НЕОЕЕ ЮЕН ПДОПК ХЗМПЧПК НЙОХФЕ ДТХЗ ПФ ДТХЗБ, НЩ ХЧЙДЙН ЙИ ЛБЛ ПДЙО ПВЯЕЛФ. дМС ДЙУРМЕЕЧ ТБУУФПСОЙЕ НЕЦДХ РЙЛУЕМСНЙ ОБЪЩЧБЕФУС ЫБЗПН ТБУРПМПЦЕОЙС ФПЮЕЛ. уЕКЮБУ ЬФПФ РБТБНЕФТ ОЕ ЙУРПМШЪХЕФУС Ч ТЕЛМБНОП-НБТЛЕФПМПЗЙЮЕУЛЙИ ГЕМСИ, ОП ЧП ЧТЕНЕОБ ьмф-НПОЙФПТПЧ ЬФПФ РБТБНЕФТ УПУФБЧМСМ 0,28. йФБЛ, РПМХЮЙЧ ЧУЕ РБТБНЕФТЩ, НЩ НПЦЕН ПРТЕДЕМЙФШ ЪОБЮЕОЙЕ ПУФТПФЩ ЪТЕОЙС, ЙМЙ ТБУУФПСОЙЕ, ОБ ЛПФПТПН РЙЛУЕМЙ ХЦЕ ОЕ ТБЪМЙЮБАФУС ДТХЗ ПФ ДТХЗБ. оЕ УФБОХ ХФПНМСФШ ЧБУ ЧУЕНЙ ТБУЮЈФБНЙ, ОП ЧПФ ЬФБ ЖПТНХМБ РТЕДУФБЧМСЕФУС ЧБЦОПК: VA=dot pitch/(2*tangent(rad(((1/60)(20/20))/2)).

дБЧБКФЕ РПУНПФТЙН ОБ ЬФПФ РБТБНЕФТ ДМС РПРХМСТОЩИ ТБЪТЕЫЕОЙК ОБ ЬЛТБОБИ РМБОЫЕФОЩИ ЛПНРШАФЕТПЧ.

хУФТПКУФЧП (ТБЪНЕТ ЬЛТБОБ) тБЪТЕЫЕОЙЕ ыБЗ ТБУРПМПЦЕОЙС ФПЮЕЛ рЙЛУЕМЕК рМПФОПУФШ РЙЛУЕМЕК пУФТПФБ ЪТЕОЙС
iPad 2 (9.7") 1024x768 0.008 786K 132 26.1"
оПЧЩК iPad (9.7") 2084x1536 0.004 3.15M 264 13"
Lenovo Tablet 2(10.1") 1366x768 0.006 1.05M 155 22.2"
Surface Pro (10.6") 1920x1080 0.005 2.1M 207 16.5"

ьФБ ФБВМЙГБ ПЪОБЮБЕФ УМЕДХАЭЕЕ: У ТБУУФПСОЙС ВПМЕЕ 61 УН чуе ЬФЙ ТБЪТЕЫЕОЙС УППФЧЕФУФЧХАФ ПРТЕДЕМЕОЙА "Retina" ДМС ЮЕМПЧЕЛБ У ОПТНБМШОЩН ЪТЕОЙЕН. чДХНБКФЕУШ ЕЭЈ ТБЪ: чуе! фЕРЕТШ ОБН ПУФБЈФУС ОБКФЙ ЕЭЈ ПДЙО РБТБНЕФТ: ЖБЛФЙЮЕУЛПЕ ЧЙЪХБМШОПЕ ТБУУФПСОЙЕ.

с ЧЙЦХ УЧПК РМБОЫЕФ ПФУАДБ: УТЕДОЙЕ ЧЙЪХБМШОЩЕ ТБУУФПСОЙС

нПЦОП ВЩМП ВЩ РТЙЧЕУФЙ РТЙНЕТЩ У ХЮЈФПН УТЕДОЕЗП ТПУФБ, ДМЙООЩ ЛПОЕЮОПУФЕК, Б ФБЛЦЕ ФЙРЙЮОЩИ ХУМПЧЙК РТЙНЕОЕОЙС, ОП ПФ ЬФПЗП УФБФШС ХЧЕМЙЮЙМБУШ ВЩ Ч ОЕУЛПМШЛП ТБЪ. дПУФБФПЮОП УЛБЪБФШ, ЮФП НПЙ ТБУЮЈФЩ ЧРПМОЕ УПЧРБДБАФ УП УТЕДОЙНЙ ЪОБЮЕОЙСНЙ, ЛПФПТЩЕ НПЦОП ОБКФЙ Ч УЕФЙ. Display Mate, TAUW Й бНЕТЙЛБОУЛБС ПРФПНЕФТЙЮЕУЛБС БЛБДЕНЙС РТЙЫМЙ Л ЕДЙОПНХ НОЕОЙА П ЪОБЮЕОЙЙ Ч 15"-22". йУИПДС ЙЪ УПВУФЧЕООПЗП ПРЩФБ, НОЕ ЛБЦЕФУС ЮФП 15" - УМЙЫЛПН ВМЙЪЛПЕ ТБУУФПСОЙЕ, ЮФП С ОБДЕАУШ РТПЙММАУФТЙТПЧБФШ ОЙЦЕ.

еУМЙ ЧЩ ЙУРПМШЪХЕФЕ УЧПК РМБОЫЕФ РПДПВОЩН ПВТБЪПН, ДБКФЕ ЪОБФШ.

дБЧБКФЕ ПВТБФЙН ЧОЙНБОЙЕ ОБ ЪОБЮЕОЙС ПУФТПФЩ ЪТЕОЙС ЕЭЈ ТБЪ Й РПУНПФТЙН, ЛБЛЙЕ ХУФТПКУФЧБ УППФЧЕФУФЧХАФ ПРТЕДЕМЕОЙА "Retina" У ЬФПЗП ТБУУФПСОЙС.

рМБОЫЕФ тБЪТЕЫЕОЙЕ пУФТПФБ ЪТЕОЙС Retina?
iPad 2 1024x768 26.1" оЕФ
Lenovo Tablet 2 1366x768 22.2" дБ
Surface Pro 1920x1080 16.5" дБ
оПЧЩК iPad 2084x1536 13.0" дБ

дЕКУФЧЙФЕМШОП, ДБЦЕ "ОЙЪЛПЕ" ТБЪТЕЫЕОЙЕ 1366x768 УППФЧЕФУФЧХЕФ ПРТЕДЕМЕОЙА "Retina" РТЙ ВПМЕЕ ЮЕН 22". еДЙОУФЧЕООПЕ ХУФТПКУФЧП, ЛПФПТПЕ ЧЩВЙЧБЕФУС ЙЪ ЬФПЗП ТСДБ - iPad 2. ьФП ПДОБ ЙЪ ЗМБЧОЩИ РТЙЮЙО ЧПУФПТЗБ РПМШЪПЧБФЕМЕК iPad РП РПЧПДХ ДЙУРМЕС "Retina". пОЙ ПДОЙ ЙЪ ОЕНОПЗЙИ ЧЙДСФ РТЕЙНХЭЕУФЧП ХЧЕМЙЮЕОЙС ТБЪТЕЫЕОЙС, ЮФП ЗПЧПТЙФ УЛПТЕЕ П ОЕДПУФБФЛБИ УФБТПЗП ДЙУРМЕС, ЮЕН П ДПУФПЙОУФЧБИ ОПЧПЗП. оЕ РПКНЙФЕ НЕОС ОЕРТБЧЙМШОП, ДЙУРМЕК ОПЧПЗП iPad"Б РТЕЧПУИПДЕО, ОП ЬФП ДПУФЙЗБЕФУС ЪБ УЮЈФ ХЧЕМЙЮЕОЙС ЛПОФТБУФБ Й ГЧЕФПЧПК ЗБННЩ, Б ОЕ PPI. ьФЙ ДЧБ ХМХЮЫЕОЙС ХНЕАФ ЛХДБ ВПМШЫЕЕ ЪОБЮЕОЙЕ ДМС ТБВПФЩ (ЧРТПЮЕН, ЬФП ХЦЕ ФЕНБ ДМС ДТХЗПК УФБФШЙ).

еУМЙ ЧЩ ДЕТЦЙФЕ РМБОЫЕФ ОБ ТБУУФПСОЙЙ 12"-18", ЬФП НПЦЕФ ЧЩЗМСДЕФШ ФБЛ:

рПЦБМХК, 22" - ЬФП НОПЗПЧБФП, ОП ТБЪТЕЫЕОЙЕ 1366x768 ДЕКУФЧЙФЕМШОП ОЕ ФБЛ ХЦ РМПИП, ЛБЛ НПЦЕФ РПЛБЪБФШУС. чПЪНПЦОП, ОБ 15-ДАКНПЧПН ОПХФВХЛЕ, ОП ОЕ ОБ 10-ДАКНПЧПН РМБОЫЕФЕ. с ДХНБА, ЮФП ЧУЕ НЩ УПЗМБУЙНУС У ФЕН, ЮФП ТБЪТЕЫЕОЙЕ 1920x1080 ЙМЙ 1080p ОБ ЬЛТБОЕ У ДЙБЗПОБМША 10-11 ДАКНПЧ РПМОПУФША УППФЧЕФУФЧХЕФ РПОСФЙА "Retina" Ф. Л. ПУФТПФБ ЪТЕОЙС ДМС ЬФПЗП ТБЪТЕЫЕОЙС УПУФБЧМСЕФ 16".


оЕ ВХДШ ФБЛЙН ЦЕ ЛБЛ ЬФПФ РБТЕОШ 		ч Apple ОБЮБМЙ "ЧПКОХ ЪБ РМПФОПУФШ РЙЛУЕМЕК", РПДПВОХА "ЧПКОЕ ЪБ НЕЗБРЙЛУЕМЙ", ЛПФПТБС УЧЙТЕРУФЧПЧБМБ ОБ ТЩОЛЕ ГЙЖТПЧЩИ ЛБНЕТ ОЕУЛПМШЛП МЕФ ОБЪБД. оП НЩ-ФП ЪОБЕН, ЮФП ОЕЛПФПТЩЕ 9-НЕЗБРЙЛУЕМШОЩЕ ЛБНЕТЩ ДЕМБАФ ЖПФПЗТБЖЙЙ МХЮЫЕЗП ЛБЮЕУФЧБ, ЮЕН 21-НЕЗБРЙЛУЕМШОЩЕ. чУЕ РПДПВОП. ч Apple УДЕМБМЙ ФП, ЮФП ПВЩЮОП ДЕМБАФ: РПЫМЙ РП РХФЙ ОБЙНЕОШЫЕЗП УПРТПФЙЧМЕОЙС Й УФБМЙ РТПДБЧБФШ ЬФП ЛБЛ "ПУПВЕООПУФШ". тБЪТЕЫЕОЙЕ 2048x1536 ВЩМП ЧЩВТБОП ЙЪ-ЪБ ФПЗП, ЮФП ФЕРЕТШ РТПЭЕ НБУЫФБВЙТПЧБФШ РТЙМПЦЕОЙС - ЧУЕ УФБМП Ч ДЧБ ТБЪБ ВПМШЫЕ. чЩВПТ ВЩМ УДЕМБО ПФОАДШ ОЕ РПФПНХ, ЮФП ФБЛПЕ ТБЪТЕЫЕОЙЕ МХЮЫЕ РПДИПДЙФ ДМС ФБЛЙИ ХУФТПКУФЧ, ФБЛЦЕ ЬФП ОЕ УБНЩК МХЮЫЙК ЧЩВПТ ДМС РПФТЕВЙФЕМС. рПДТПВОЕЕ ПВ ЬФПН ОЙЦЕ.

вПМШЫЕ РЙЛУЕМЕК: ОЕГЕМЕУППВТБЪОПЕ УОЙЦЕОЙЕ РТПЙЪЧПДЙФЕМШОПУФЙ

юЙФБФЕМШ НПЦЕФ ЪБДБФШУС ЧПРТПУПН: "дПРХУФЙН, 1080p УППФЧЕФУФЧХЕФ ДЙУРМЕА "Retina" ОБ РМБОЫЕФОПН ЛПНРШАФЕТЕ. оП ЮФП РМПИПЗП Ч ВПМШЫЕК РМПФОПУФЙ РЙЛУЕМЕК?"

пФЧЕФ РТПУФ. ъБ ЛБЦДЩК ОБИПДСЭЙКУС ЧЩЫЕ ЧПЪНПЦОПУФЕК ОБЫЕЗП ЧПУРТЙСФЙС "ОЕОХЦОЩК" РЙЛУЕМШ РТЙИПДЙФУС РМБФЙФШ УОЙЦЕОЙЕН УЛПТПУФЙ ТБВПФЩ, РПЧЩЫЕООЩН ФЕРМПЧЩДЕМЕОЙЕН Й НЕОШЫЙН УТПЛПН ТБВПФЩ ПФ БЛЛХНХМСФПТПЧ.

мАВПК ЗЕКНЕТ УЛБЦЕФ, ЮФП ЮЕН ЧЩЫЕ ТБЪТЕЫЕОЙЕ, ФЕН НЕОШЫЕ ЛБДТПЧ Ч УЕЛХОДХ (FPS) ЧЩ РПМХЮЙФЕ. пФУАДБ Й РПФТЕВОПУФШ Ч ОБЧПТПЮЕООЩИ ЙЗТПЧЩИ ЛПНРШАФЕТБИ УП НОПЦЕУФЧПН ЧЙДЕПЛБТФ. чУС ЬФБ ЧЩЮЙУМЙФЕМШОБС НПЭШ, ОБРТБЧМЕООБС ОБ РТПУЮЈФ ЛБТФЙОЛЙ, РТЙЧПДЙФ Л ЧЩДЕМЕОЙА ФЕРМБ, Б ЮЕН ЧЩЫЕ ФЕНРЕТБФХТБ ЮЙРБ, ФЕН ПО НЕДМЕООЕЕ. зЕКНЕТЩ ТЕЫБАФ ЬФХ РТПВМЕНХ У РПНПЭША УЙУФЕН ЦЙДЛПУФОПЗП ПИМБЦДЕОЙС Й ВПМШЫЙИ ЛХМЕТПЧ.

Retina УПЪДБЈФ МЙЫОАА ОБЗТХЪЛХ ОБ GPU, ПФТЙУПЧЩЧБС РЙЛУЕМЙ, ЛПФПТЩИ ЧЩ ДБЦЕ ОЕ ХЧЙДЙФЕ (ВПМЕЕ НЙММЙПОБ "ОЕЧЙДЙНЩИ" РЙЛУЕМЕК). оБУЛПМШЛП РТПЙЪЧПДЙФЕМШОЕЕ ВЩМ ВЩ ЧБЫ iPad? оБУЛПМШЛП НЕОШЫЕ ВЩ ПО ОБЗТЕЧБМУС Й ОБУЛПМШЛП ДПМШЫЕ ТБВПФБМ? рПИПЦЕ, ЧЩ ЬФПЗП ОЕ ХЪОБЕФЕ.

нЩ ЪОБЕН, ЮФП ОПЧЩК iPad "ФПМЭЕ", ЮЕН iPad 2. нЩ ЪОБЕН, ЮФП ЬФП ЙЪ-ЪБ ВПМШЫЕЗП БЛЛХНХМСФПТБ. юЕЗП ЧЩ НПЦЕФЕ ОЕ ЪОБФШ, ФБЛ ЬФП ФПЗП, ЮФП ЕЗП ЈНЛПУФШ ХЧЕМЙЮЕОБ ОБ 70%. дБ, РПЮФЙ Ч ДЧБ ТБЪБ! й ФЕН ОЕ НЕОЕЕ БЛЛХНХМСФПТ ТБЪТСЦБЕФУС ВЩУФТЕЕ. Displaymate РПЛБЪЩЧБЕФ, ЮФП ОПЧЩК iPad ТБВПФБЕФ РТЙНЕТОП ОБ 5% НЕОШЫЕ ЮЕН iPad 2 РТЙ УТЕДОЕН ХТПЧОЕ СТЛПУФЙ, Й ОБ 20% НЕОШЫЕ РТЙ НБЛУЙНБМШОПН ХТПЧОЕ. пДОБ ФПМШЛП РПДУЧЕФЛБ ЙУРПМШЪХЕФ ЬОЕТЗЙЙ Ч 2,5 ТБЪБ ВПМШЫЕ, ЮЕН Х iPad 2, Й ЬФП ДП ФПЗП, ЛБЛ ЧЩ ОБЮОЈФЕ РПДУЧЕЮЙЧБФШ ЧУЕ 3,15 НЙММЙПОБ RGB-РЙЛУЕМЕК. рТЕДУФБЧШФЕ ЬФП ЙОБЮЕ: ЕУМЙ БЛЛХНХМСФПТ ПФ ОПЧПЗП iPad ХУФБОПЧЙФШ Ч iPad 2, ФП ПО РТПТБВПФБЕФ У РПУФПСООП ЧЛМАЮЈООЩН ЬЛТБОПН ВПМЕЕ 20 ЮБУПЧ.

йДЕБМШОПЕ ЪОБЮЕОЙЕ PPI: 1080p ДМС РМБОЫЕФОЩИ ЛПНРШАФЕТПЧ

рПЬФПНХ Ч ЪБЗПМПЧЛЕ Й ХФЧЕТЦДБЕФУС: Х Surface Pro "Retina МХЮЫЕ", ЮЕН Х iPad. рТЙ ТБУУНПФТЕОЙЙ У ОПТНБМШОПЗП ТБУУФПСОЙС ТБЪОЙГЩ ОЕФ. уПЧЕТЫЕООП ОЙЛБЛПК! ч ЙФПЗЕ РПМШЪПЧБФЕМШ РПМХЮБЕФ ПФМЙЮОЩЕ ЧЙЪХБМШОЩЕ ЬЖЖЕЛФЩ, ПУФБЧМСС ВПМШЫЕ ТЕУХТУПЧ GPU ДМС РТПЛТХФЛЙ, РТПУНПФТБ ЧЕВ-УФТБОЙГ Ч БРРБТБФОЩН ХУЛПТЕОЙЕН, МХЮЫЙИ ЙЗТ Й Ф. Р. уТПЛ ТБВПФЩ ПФ БЛЛХНХМСФПТПЧ ХЧЕМЙЮЙЧБЕФУС, Б ХТПЧЕОШ ЧЩДЕМСЕНПЗП ФЕРМБ УОЙЦБЕФУС. оЕ РПУМЕДОАА ТПМШ ЙЗТБЕФ Й НЕОШЫБС УФПЙНПУФШ РТПЙЪЧПДУФЧБ, ЮФП ДБЈФ ЧПЪНПЦОПУФШ РТПЙЪЧПДЙФЕМА РПЪБВПФЙФШУС П ЧЕЭБИ РП-ОБУФПСЭЕНХ ЧБЦОЩИ: ВПМШЫЕК СТЛПУФЙ, ЛПОФТБУФОПУФЙ, ВПМЕЕ ЫЙТПЛПК ГЧЕФПЧПК ЗБННЕ.

фПФ, ЛФП УЮЙФБЕФ, ЮФП ЧУЕ ДЕМП Ч РМПФОПУФЙ РЙЛУЕМЕК - РТПУФП ПЫЙВБЕФУС!

дПРПМОЙФЕМШОБС ЙОЖПТНБГЙС:

  • бЧФПТ: -
  • дБФБ РХВМЙЛБГЙЙ ПТЙЗЙОБМБ: бЧЗХУФ 2012
  • йУФПЮОЙЛ: www.theverge.com
  • рЕТЕЧПД ЧЩРПМОЕО РП ЪБЛБЪХ eCo Shop

лПННЕОФБТЙЙ Л УФБФШЕ

уЕТЗЕК ъЕНЛБ
2012/10/25 		http://ipad-the-new.ru/retina - ПРЙУБОЙЕ ДЙУРМЕС Retina
бМЕЛУБОДТ
2013/08/05 		вТЕД ЛБЛПК-ФП... рМПФОПУФШ РЙЛУЕМЕК ОХЦОБ ДМС ФПЗП, ЮФПВЩ ФЕЛУФ ОЕ ТБЪНЩЧБМУС. й ОБ iPad 3 (РЙЫХ У ОЕЗП УЕКЮБУ) ПО ОЕ ТБЪНЩЧБЕФУС. дМС РМБОЫЕФБ ЬФП ПЮЕОШ ЧБЦОП!
Ronin427
2013/08/16 		оБЧЕТОПЕ БЧФПТХ ОБДП РПЙОФЕТЕУПЧБФШУС Х РПМЙЗТБЖЙУФПЧ, ПФЛХДБ ЧЪСМУС УФБОДБТФ 300ДРЙ Й ЮФП ПО ЪОБЮЙФ. оП РПИПЦЕ БЧФПТ ЧППВЭЕ ОЕ Ч ФЕНЕ.=(
Alexander
2013/08/21 		юФП БЧФПТ ЗПЧПТЙМ ПВ БЛЛХНХМСФПТЕ ipad"a?

гЙФБФБ chip.ua "уБНЩК ВПМШЫПК ОЕДПУФБФПЛ ДБООПЗП РМБОЫЕФБ - ЬФП ЧТЕНС БЧФПОПНОПК ТБВПФЩ. рТЙ РПМОПК СТЛПУФЙ ЬЛТБОБ БЛЛХНХМСФПТ ТБЪТСДЙМУС РПУМЕ 3:46 ЮБУПЧ РТПУНПФТБ ЧЙДЕП, ЙМЙ 4:24 ЮБУПЧ ЙОФЕТОЕФ-УЕТЖЙОЗБ. нОПЗЙЕ ВПМЕЕ ДЕЫЕЧЩЕ РМБОЫЕФЩ РПЛБЪЩЧБАФ МХЮЫЙЕ ТЕЪХМШФБФЩ."

рХУФШ РПДПКДЕФ Ч НБЗБЪЙОЕ Л MacBook Pro У ТЕФЙОПК Й ВЕЪ Й УТБЧОЙФ, ДЕМП ОЕ Ч УБНЙИ РЙЛУЕМСИ Б Ч ЮЕФЛПУФЙ ЫТЙЖФПЧ Й ЬМЕНЕОФПЧ ЙОФЕТЖЕКУБ, Ч ПФУХФУФЧЙЙ ЧУСЛЙИ МЕУЕОПЛ Й Ф.Д.
вЕТЙС
2013/09/27 		п, ОБВЕЦБМЙ ЪПНВЙ ЬРМПЧУЛЙЕ! пВЙДЕМЙ ЙИ
пМЕЗ
2014/02/20 		б РП НОЕ ДБЛ ЧБЦОЕЕ ЪБТСД Ч БРРБТБФХТЕ! IPad-ЬФП ЧТПДЕ,ЛБЛ РЕТЕОПУОПК ЛПНРШАФЕТ!!!?))) рПЬФПНХ С МХЮЫЕ ДПРПМОЙФЕМШОЩК ЮБУ РПУНПФТА ОБ ЙЪПВТБЦЕОЙЕ РПИХЦЕ,ЮЕН ОБ ЮЕТОЩК ЬЛТБО! й ЕУМЙ ЛФП-ФП УЮЙФБЕФ РП ДТХЗПНХ,ФП ЬФПФ ЮЕМПЧЕЛ ОПУЙФ iPad ДМС РПОФПЧ Й ЧТСД МЙ НПЦЕФ РТПЛПНЕОФЙТПЧБФШ ДБООХА ФЕНХ,БДЕЛЧБФОП!!!)))))
чМБДЙНЙТ
2014/06/09 		"ч ЙФПЗЕ РПМШЪПЧБФЕМШ РПМХЮБЕФ ПФМЙЮОЩЕ ЧЙЪХБМШОЩЕ ЬЖЖЕЛФЩ, ПУФБЧМСС ВПМШЫЕ ТЕУХТУПЧ GPU ДМС РТПЛТХФЛЙ, РТПУНПФТБ ЧЕВ-УФТБОЙГ Ч БРРБТБФОЩН ХУЛПТЕОЙЕН, МХЮЫЙИ ЙЗТ Й Ф. Р. уТПЛ ТБВПФЩ ПФ БЛЛХНХМСФПТПЧ ХЧЕМЙЮЙЧБЕФУС, Б ХТПЧЕОШ ЧЩДЕМСЕНПЗП ФЕРМБ УОЙЦБЕФУС."

оЙ РП ПДОПНХ РХОЛФХ Х НЕОС ОЕФ РТЕФЕОЪЙК Л ipad4. лФП ИБЙФ БКРБД ФПФ МЙВП ЙН ОЕ РПМШЪПЧБМУС МЙВП ЪБЙОФЕТЕУПЧБО.

Тем, кому нравится продукция Apple и математика, сайт TUAW предлагает в цифрах увидеть особенности «яблочных» продуктов – оборудования и программного обеспечения.

Сейчас все говорят о дисплеях Retina, переживая по поводу того, что они не могут появиться в Mac, и предвкушая их появление в iPad 3 (в чем мы убедимся 7 марта почти наверняка). Есть одна мысль, высказанная разработчиком Bjango Марком Эдвардсом (Marc Edwards) в Твиттере: «Количество пикселей в Retina 27-дюймового дисплея с Thunderbolt составляет 5120×2880 = 14745600 пикселей. С разрешением 4K: 4096×2160 = 8847360 пикселей. Retina в iPad 3: 2048×1536 = 3145728 пикселей». Расчеты заставляют задуматься – что может означать появление дисплея Retina в Mac? Если Эдвардс прав – неужели в дисплее с Retina и Thunderbolt действительно почти 15 мегапикселей?

Может быть, дело только в маркетинге?

Что вообще означает термин «Retina Display»? Его придумала Apple, дав следующее определение:

«Плотность пикселей дисплея Retina настолько высока, что человеческий глаз не может различить отдельные пиксели».

Определение имеет смысл и является продуманным маркетинговым ходом, но только ли?

Фактически данную технологию использует не только Apple. Экраны с высокой плотностью пикселей на дюйм начинают появляться в других устройствах – к примеру, в Android-планшете от Asus. Точный термин «Retina display» может принадлежать только Apple, но преимущества экранов с высоким разрешением купертиновцам принадлежать не могут. Так как это новая тенденция для отрасли в целом, нужно немало постараться, чтобы стряхнуть с себя «маркетинговую пыль» и попытаться объективно взглянуть на технологию.

Определение «Retina Display»

Что может означать фраза о том, что отдельные пиксели на экране неотличимы? Безусловно, выход iPhone 4 и первого дисплея Retina был большим скачком в увеличении разрешения: оно выросло с 480×320 до 960×640 (то есть с 163 пикселей на дюйм до 326 пикселей на дюйм (ПНД)). Таким образом, люди понимают, что отличительная черта дисплея Retina – это плотность 326 ПНД, или 300 ПНД. Последнее число считается общепринятым эмпирическим исходным уровнем в полиграфической отрасли для «фото-разрешения».

Однако все не так просто.

Посмотрите на текст, напечатанный мелким шрифтом, с расстояния вытянутой руки. Обратите внимание, как трудно его читать. Теперь приблизьте текст к лицу и посмотрите на него с расстояния в несколько сантиметров от вашего носа. Обратите внимание, насколько легче сейчас стало его читать. Становится ясно, что определение Apple термина «Retina Display» как «дисплея с неразличимыми пикселями» требует уточнения – каким именно должно быть расстояние от экрана до глаз пользователя для каждого конкретного устройства. Разница есть – iMac стоит на столе, MacBook – на столе/коленях и пр., iPhone мы держим в руках, причем каждый из нас – на разном удалении от глаз.

Итак, каким должен быть размер маленького пикселя, чтобы его можно было считать невидимым? Начинается математика (точнее, геометрия) – нам нужно подумать о том, под каким углом мы смотрим на экран.

Угол обзора в данной диаграмме (угол а) – это угол, зависящий от межпиксельного расстояния (s). При уменьшении этого расстояния величина угла также уменьшается. Точно так же размер объекта зависит от расстояния, с которого он рассматривается – угол обзора будет меняться в зависимости от изменения расстояния от объекта до глаз наблюдателя. Объекты более крупного размера хорошо видны и под большим углом. Размер изображения на сетчатке неразрывно связан с размерами объекта и расстоянием до него, и вычисляется по следующей формуле:

Что же получается – угол обзора слишком мал, чтобы его увидеть? Среднестатистический человек имеет зрение 20/20 – это исторически определялось умением читать буквы на стандартной таблице проверки зрения под углом 5 минут дуги (1 минута дуги, аркминута – это 1/60-тая часть градуса). Что это может означать в переводе на пиксели? Одними из самых мелких шрифтов считаются Tinyfont, созданный Кеном Перлином (Ken Perlin), и Tiny от Мэтью Уэлча (Matthew Welch), и высота их букв составляет всего 5 пикселей (вместе с подстрочными элементами в Tiny). Это означает, что наименьший для среднего глаза угол составляет одну минуту дуги. На самом деле, одна аркминута является общепринятым в ученом мире пределом разрешения для сетчатки типичного человеческого глаза.

Retina в существующих дисплеях Apple

Можно продолжить вычисления – взять некоторые типичные расстояния просмотра для различных устройств Apple, объединить их с размерами экранов и их разрешением, и рассчитать насколько дисплей соответствует определению Retina, указанному выше.

Google любезно предоставляет таблицу с подробной информацией о том, как эти данные рассчитываются. Просто для интереса возьмем для сравнения парочку «не яблочных» устройств – 50-дюймовый телевизор, на который будем смотреть с расстояния шести футов (примерно 1,8 метра) и проигрывать диски BluRay и DVD; а также планшет Asus Transformer Prime Android с разрешением дисплея 1920×1200.

Таблица показывает удивительные вещи: во-первых, становится ясно, что определение, данное Apple в отношении Retina-дисплея, довольно близко соотносится с данным выше математическим определением. Экран iPhone 4, на который обычно смотрят с расстояния 11 дюймов (28 сантиметров), предлагает характеристики, очень близкие к порогу Retina – значит, методика расчетов правильная.

Во-вторых, расчеты повторяют сделанный ранее вывод о том, что удвоенное разрешение iPad (2048×1536) вполне соотносится с характеристиками Retina. Даже если пользоваться планшетом на удалении 16 дюймов (около 40 сантиметров) от глаз, то показатели получаются очень близкими. Равно, как и в планшете Asus – его дисплей тоже можно считать Retina.

Расчеты также показывают, что дисплеи многих современных Mac намного ближе к показателям Retina, чем может показаться на первый взгляд. Экран 27-дюймового iMac на расстоянии 28 дюймов (примерно 70 см), 17-дюймового MacBook Pro на расстоянии 26 дюймов от глаз (66 см) и экран 11-дюймового MacBook Air с расстояния 22 дюйма (56 см) – все эти экраны имеют достаточно мелкие пиксели, чтобы быть на пороге невидимости.

Кроме того, дисплей iPhone с разрешением 480×320 выглядит заметно хуже на фоне остальных продуктов, созданных Apple на сегодняшний день (его плотность составляет всего 53% плотности пикселей Retina-дисплея). Даже разрешение iPad (1024×768), которым многие недовольны, дает в расчетах лучший показатель – 61%. Анализ самого «плохого» дисплея Mac (24-дюймовый экран iMac на расстоянии 28 дюймов) показывает, что величина его пикселей на треть превышает тот самый порог невидимости.

Наконец, расчеты дают понять, почему изображение BluRay выглядит так хорошо. На больших телевизорах при маленьком удалении от экрана (диагональ – 50 дюймов, удаление – 15 см) картинка формата 1080p показывает 92% уровня Retina – при том, что формат DVD демонстрирует всего лишь 36%.

Здесь нужно учесть два очень важных момента.

Во-первых, для того, чтобы достичь или даже превысить желанный порог невидимости пикселей дисплея Retina, Apple не нужно удваивать разрешение большинства своих дисплеев. Отнюдь нет – достаточно увеличить плотность пикселей 27-дюймового с 2560×1440 до примерно 2912×1638.

Второй момент заключается в том, что люди должны понять, что им не стоит обольщаться по поводу того, что Retina-дисплей в Mac будет намного лучше существующих предложений. Выход iPhone 4 стал огромным шагом вперед после выхода iPhone 3GS главным образом потому, что экран 3GS был довольно убогим (по сегодняшним меркам). Существующие модели Mac имеют намного лучшие экраны, поэтому в сильных улучшениях они нуждаться не будут.

За пределами аркминут

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

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

На рисунке – несколько шаблонов, которые вы можете проверить на собственном дисплее. Если хотите попробовать сделать это на экране iOS-устройства, необходимо получить соответствующий файл (для iPhone или iPad) и сохранить его в Camera Roll. Это нужно потому, что iOS будет любезно пытаться масштабировать и панорамировать изображение, а мы хотим, чтобы один пиксель изображения занимал один пиксель на экране. После того, как получите файл в Camera Roll, просмотрите картинку на полном экране через приложение Photos, расположив изображение в портретном режиме. Если вы начнете сравнивать, как она выглядит на экране Mac, iPad или iPhone, вы увидите разницу возможностей экранов.

Аргументы в пользу удвоения пикселей

Рене Ричи (Rene Ritchie) на сайте iMore приводит веский аргумент в пользу того, что разрешение дисплея iPad должно быть именно удвоено (то есть стать 2048×1536 пикселей, а не каким-либо промежуточным значением, как в случае с iPhone 4). Промежуточное значение означает, что каждое существующее приложение должно или каждый раз повторно масштабироваться (и изображение будет нечетким), или будет иметь отличные от экрана размеры. Все объясняется тем, что каждое существующее iPad-приложение жестко закодировано под запуск на полном экране с разрешением 1024×768.

Немного по-другому дела обстоят у пользователей десктопов. Плотность существующих десктоповых дисплеев Аpple находится в пределах между 92 и 133 пикселями на дюйм. Пользователи более терпимы к изменению размеров элементов пользовательского интерфейса (конечно, в пределах разумного).

Рассмотрим 27-дюймовый дисплей с Thunderbolt, с плотностью 109 ПНД и разрешением 2560×1440 пикселей, и предположим, что Apple захочет подогнать его под характеристики Retina. Разрешение может быть увеличено до 4192×2358 пикселей (плотность при этом составит 178 ПНД), такой дисплей будет лучше, чем дисплей в iPhone 4. Пикселей будет на треть меньше, чем при нативном удвоении разрешения (5120×2880). Элементы пользовательского интерфейса будут выглядеть пропорционально больше, но не больше, чем на экране сегодняшнего 24-дюймового iMac, поэтому не будут казаться нечеткими или неуклюжими.

Заключение

Вот несколько вещей, в которых нас пытались убедить авторы сайта TUAW:

— Retina-дисплей не является просто привлекательным маркетинговым понятием;

— при определении, является дисплей Retina или нет, нужно учитывать расстояние до экрана;

— если до характеристик Retina улучшится дисплей Mac, то изменения будут намного менее заметными, чем усовершенствование экрана iPhone 4 по сравнению с экраном 3GS.

Сегодня мы с вами разберем, что представляет собой технология экрана Retina Display. Retina Display — это новый экран широкого разрешения. Он используется на планшетном компьютере IPad. Разрешение данного экрана составляет 2048х1536 точек. Это значительно больше, чем у некоторых мониторов. Технология Retina Display является инновацией на рынке планшетных компьютеров. Работа, проделанная инженерами Apple, достойна уважения.

Раньше люди работали с такой точной и качественной картинкой, используя только профессиональные мониторы (например, компьютерные мониторы типа hi-end от различных компаний), стоимость которых составляла в основном свыше $9.000, но на сегодняшний день вы можете насладиться отменной четкостью изображения, просто купив планшет, на котором установлена Retina Display.

Специально для IPad

В планшете IPad с дисплеем Retina работает технология IPS. Из-за данной системы мы получаем более широкий угол обзора. Благодаря данной технологии, в каком бы положении ни находился iPad, вы всегда будете видеть отличное изображение. Также контрастность дисплея Retina намного выше, чем у предыдущих. Из-за этого белый цвет намного ярче, а черный выглядит значительно темнее, и в результате целиком изображение смотрится гораздо лучше. По заявлению инженеров компании Apple, было довольно сложно сделать дисплей с 3,1 миллиона пикселей. Для достижения наивысшего качества изображения разработчики использовали разделение системной логики дисплея Retina iPad на две сферы. В верхней остались сами пиксели, а в нижней была размещена схема формирования сигналов для каждого субпикселя, который определяет зеленый, красный или синий цвет.

Дополнительные функции

Если вы сделаете свой выбор в пользу Retina Display, что это вам даст? Инженеры Apple усовершенствовали и стекло.

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

Преимущества Retina Display

Можно с уверенностью сказать, покупая Retina Display, что это отличная вещь, предоставляющая массу преимуществ. Экран iPad"ов последнего поколения выделяется не только высоким разрешением, но и отличной передачей цветов и оттенков — в особенности абсолютно идеальной гамма-кривой и стандартным охватом цвета.

В результате этого все ваши видео и фотографии будут выглядеть на данном планшете в точности так, как они и должны отображаться на «стационарном» устройстве. Запас яркости дисплея в основном до 407 кд/м 2 на максимуме. Недостаток ее может быть ощутимо заметен только на достаточно ярком солнце, в других случаях вполне хватает запаса батареи. Коэффициент контрастности составляет около 900:1. Данный показатель вырос по сравнению с прошлым поколением iPad (где коэффициент составлял 687:1). Антибликовый фильтр дисплея Retina Display - что это? Прибор, который хорошо справляется с внешними световыми помехами и не дает экрану блекнуть или выцветать под действием света. Углы обзора достаточно широки, оттенки практически не искажаются, картинка остается разборчивой при любом угле взгляда.

Также, если вы являетесь создателем обоев на заставки для «АйУстройств», то вас, несомненно, порадует данный дисплей. Сделать все под этот экран стало намного проще. Дисплей сам помогает убрать все пиксельные шероховатости и выдает вам отличное изображение высочайшего качества.

Минусы системы

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

Но все эти минусы Apple iPad (Retina Display - одна из лучших его характеристик) не могут испортить удовольствие от получаемого качества изображений. Да и с каждой новой моделью дисплей становится все совершеннее.

Делаем выводы

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

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

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

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



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

    Рекомендуем почитать