Tehnologiile moderne au atins cote fără precedent. În același timp, acestea se dezvoltă și se îmbunătățesc constant. Astfel, matricele moderne se disting prin cea mai înaltă calitate a imaginii, care nu era disponibilă acum 5-10 ani. Un prim exemplu de progrese moderne în tehnologia ecranelor sunt afișajele Retina. Se disting prin densitatea mare de pixeli, datorită căreia o persoană vede o imagine impecabilă. Dar, în ciuda faptului că astfel de tehnologii au devenit deja o parte din viața de zi cu zi a oamenilor moderni, mulți oameni pun întrebarea, Retina Afișaj LCD, ce este?

1. Ce este matricea retinei

Conceptul de „Retina” a fost folosit pentru prima dată de Apple la prezentarea unui nou smartphone numit iPhone 4. Un adevărat geniu în lume tehnologii moderne Steve Jobs a acordat multă atenție la prezentarea noii sale creații tehnologie nouă matrici. Cu toate acestea, mulți își pun o întrebare complet logică: „Retina” nu este un truc obișnuit de marketing? Este aceasta cu adevărat o nouă descoperire cu care producătorul de produse din mere se poate mândri?

Răspunzând la întrebarea ce este un ecran LCD Retina, în primul rând este de remarcat faptul că cuvântul „Retina” însuși tradus din engleză înseamnă „retină”. Tehnologia a primit acest nume dintr-un motiv. Faptul este că astăzi se folosește numele Retina display descrieri generale matrice convenționale cu cristale lichide, care au o densitate mai mare de pixeli pe inch pătrat și sunt utilizate în dispozitivele Apple.

Cu alte cuvinte, răspunzând la întrebarea ce este un ecran LCD Retina, putem spune cu deplină încredere că acestea sunt ecrane LCD obișnuite realizate folosind tehnologia IPS, având o densitate mare de pixeli de 220 ppi și mai mare. Există, de asemenea, un nume neoficial pentru această tehnologie - Super Fine TFT (SFT). În zilele noastre, matrice similare sunt folosite pe toate smartphone-urile moderne, tabletele, MacBook-urile și alte produse de la Apple.

Este de remarcat faptul că, datorită densității mari de pixeli, punctele de pe ecran nu pot fi văzute cu ochiul liber, ceea ce duce la faptul că imaginea este cât mai aproape de imaginile de pe paginile revistelor lucioase în ceea ce privește calitate si perceptie.

1.1. Dispozitiv cu matrice retină

Nu are rost să vorbim mult timp despre modul în care sunt proiectate afișajele Retina, deoarece, după cum știți deja, aceasta este o matrice IPS obișnuită. Singura diferență este densitatea crescută a pixelilor. În consecință, designul unor astfel de matrici este absolut identic cu dispozitivul IPS. Putem spune că display-ul Retina este un fel de subtip al matricei IPS.

De remarcat este faptul că un grup de oameni de știință care lucrează la Apple a reușit să separe pixelii și subpixelii, făcând posibilă reducerea semnificativă a distanței dintre ei. Asta este caracteristica principala această tehnologie.

1.2. Beneficiile ecranelor Retina

Știți deja ecranul Retina și ce este acesta, acum putem discuta despre avantajele acestora. Astfel de afișaje au o serie de avantaje incontestabile, printre care calitatea imaginii merită o atenție deosebită. Această tehnologie construirea matricelor vă permite să reduceți semnificativ distanța dintre pixeli. Datorită acestui fapt, imaginea de pe afișajul Retina are un astfel de aspect, încât ochiul uman pur și simplu nu este capabil să distingă grila sau orice puncte. Poza pare cât se poate de realistă.

Având în vedere faptul că Retina se bazează de fapt pe o matrice IPS, nu este de mirare că astăzi astfel de display-uri au cele mai bune unghiuri de vizualizare. În același timp, viteza de retragere nu este inferioară altora matrici moderne. În plus, avantajele includ nivel înalt raportul de contrast, care este de 900:1. Trebuie înțeles că doar unele tipuri de cele mai bune afișaje au putut atinge astfel de indicatori, cum ar fi Super Amoledși cele mai recente tipuri de matrice IPS, dintre care una este Retina.

Matricele Retina moderne nu au doar rezoluție înaltă, care depășește Full HD (1920x1080). În plus, se disting prin redarea excelentă a culorilor, ceea ce face ca imaginea să fie cât mai realistă. Dezvoltatorii au reușit să se apropie cât mai mult posibil de a crea un ecran care este cel mai optim perceput de organele vizuale umane. Aceasta înseamnă că imaginea afișată de astfel de matrici este cel mai ușor și plăcut percepută de ochi.

Un alt avantaj important al acestei tehnologii de ecran este că are efect anti-orbire. Faptul este că matricea folosește un filtru special care nu permite afișajului să se estompeze sau să se estompeze chiar și în lumina directă a soarelui.

1.3. Dezavantajele unui display Retina

Nu există nimic perfect pe lume. Ca orice altă tehnologie, matricele Retina au și dezavantajele lor. Funcţie setări automate luminozitatea, care este disponibilă pe orice dispozitiv modern, nu funcționează întotdeauna impecabil. În unele cazuri, trebuie să setați manual nivelul de luminozitate. Cu toate acestea, aceasta problemă comună ecran, sistem de operare dispozitive, precum și senzori de lumină.

Un alt dezavantaj este că astfel de afișaje au un consum de energie destul de mare, care a depășit chiar și matricea Amoled. Cu toate acestea, pentru a compensa acest neajuns, producătorul echipează dispozitivele Apple cu baterii mai mari și mai puternice.

2. Ecrane retină în tablete

Ce este un ecran Retina pe tablete? De regulă, înainte de a cumpăra o tabletă, cumpărătorii citesc descrierea acesteia. Unul dintre parametri importanti Lucrul la care ar trebui să fii atent este ecranul. Foarte des, când oamenii văd cuvântul „Retină”, ei nu înțeleg despre ce vorbim. Știți deja ce înseamnă un afișaj LCD Retina, așa că nu ar trebui să aveți dificultăți atunci când cumpărați un Tablet PC. Ecranul Retina al tabletei înseamnă asta acest dispozitiv are un display cu densitate crescută de pixeli și rezoluție înaltă.

Este de remarcat faptul că oamenii de știință au reușit să mărească și mai mult rezoluția afișajului pe tabletă. Acum este mai mare decât rezoluția Full HD, care este 1920x1080 pixeli. De exemplu, iPad4 are o dimensiune a ecranului de 2048x1536 pixeli. Densitatea pixelilor este de 264 ppi (264 pixeli pe inch pătrat). Desigur, acest lucru duce la creșterea consumului de energie electrică. Dar, în același timp, o astfel de permisiune înseamnă și mai mult calitate superioară imagini.

3. Revizuirea iPad mini cu ecran Retina: Video

Desigur, astazi nu mai este cel mai mult rezoluție înaltă, deoarece cele mai mari companii concurează constant între ele, lansând dispozitive mai moderne cu parametri mai mari. Deci, Google a răspuns iPad4 lansând Nexus, care are o rezoluție de 2560x1600. Desigur, acesta nu este un ecran retină, deși din punct de vedere al parametrilor nu este inferior acestuia.

4. Ecrane retină în monitoare

Această tehnologie este utilizată nu numai la fabricarea de ecrane pentru dispozitive mobile. Acest display este folosit și la modelele noi de laptopuri. Primul model a fost un dispozitiv de la Apple numit MacBook Pro. Folosește un ecran de 15 inchi cu o rezoluție de 2880x1800 pixeli. Desigur, densitatea pixelilor pe astfel de ecrane este de 220 ppi.

Datorită acestui fapt, utilizatorii au posibilitatea de a procesa imagini în format Full HD fără a reduce scara imaginii.

Matricele retinei sunt un cuvânt nou tehnologie modernă, care deschid un nou nivel de calitate a imaginii. Odată cu apariția acestei tehnologii dispozitive mobile, cum ar fi tabletele, smartphone-urile, laptopurile și așa mai departe, au devenit cu un pas mai aproape de computerele desktop cu monitoare de înaltă calitate.

După lansarea recentă Retina MacBook Pro și Noul iPad-urile și ecranele cu densitate crescută de pixeli au început să intre în mod activ în viața noastră. Ce înseamnă asta pentru dezvoltatorii web?

În primul rând, să înțelegem terminologia.

Pixeli fizici

Pixeli fizici(pixelul dispozitivului sau pixelul fizic) - pixelii cu care suntem obișnuiți: cele mai mici elemente ale oricărui afișaj, fiecare având propria culoare și luminozitate.

Densitatea ecranului Densitatea ecranului este numărul de pixeli fizici de pe afișaj. De obicei, măsurată în pixeli pe inch (PPI: pixeli pe inch). Apple, care a dezvoltat ecrane Retina cu o densitate dublă a pixelilor, susține că ochiul uman nu este capabil să discerne o densitate mai mare.

pixeli CSS

pixeli CSS(pixeli CSS) - o valoare abstractă folosită de browsere pentru a afișa cu acuratețe conținutul pe pagini, indiferent de ecran (DIP-uri: pixeli independenți de dispozitiv). Exemplu:

Relația dintre pixelii fizici și CSS poate fi setată astfel:
raport-pixeli-dispozitiv, -o-device-pixel-raport, -moz-device-pixel-raport, -Webkit-raport-pixeli-dispozitiv ( … )

Sau cam asa:
raportul-pixeli al dispozitivului, -o-min-raportul-pixelilor-dispozitivului, raportul-pixelilor-dispozitivului min--moz, -Raportul-pixelilor-dispozitivului-Webkit-min-( … )

În Javascript puteți realiza acest lucru folosind
window.devicePixelRatio

Pixeli raster

Pe lângă rezoluția raster, imaginile de pe Internet au dimensiuni abstracte în pixeli CSS. Browserul comprimă sau întinde imaginea în funcție de lățimea și lungimea CSS. Când este afișat pe un ecran normal, un pixel raster corespunde unui pixel CSS. Pe ecranele Retina, fiecare pixel raster este înmulțit cu 4 ori:

Optimizare

Scalare HTML și CSS

Și asta pe Retina:

Există mai multe moduri Implementări HTMLși scalare CSS:

HTML

Unde se folosește: pe site-uri cu o singură pagină cu puține imagini.

Javascript

Unde se folosește: pe site-uri cu mai multe imagini în conținut.

CSS (SCSS)

Puteți folosi pseudo-elemente:before sau:after
.image-container:before ( imagine de fundal: url( [email protected]);

dimensiunea fundalului: 200px 300px;
conţinut:""; afisare: bloc; [email protected]înălțime: 300px;

Unde se folosește: latime: 200px; ) Tehnica funcționează și atunci când utilizați sprite-uri:.pictogramă ( imagine de fundal: url(

);

• dimensiunea fundalului: 200px 300px;
• înălțime: 25px;

lățime: 25px;

• &.trash ( poziția fundalului: 25px 0; ) &.edit (poziția fundalului: 25px 25px; ) )
• pe site-uri cu un număr limitat
• imagini de fundal

(de exemplu, unul ca un sprite).

Ușurință de implementare

Unde se folosește: Dispozitivele cu ecrane obișnuite vor descărca megaocteți suplimentari

Pe ecranele obișnuite, claritatea imaginii poate avea de suferit din cauza algoritmilor de compresie

• înălțime: 25px;

Opțiunea dimensiunea fundalului nu este acceptată în IE 7 și 8.

• Determinarea densității pixelilor ecranului
• Acesta este probabil cel mai popular mod de a optimiza grafica pentru ecranele Retina. Utilizează CSS sau Javascript.

Javascript

.pictogramă ( imagine de fundal: url(example.png); dimensiunea fundal: 200px 300px; înălțime: 300px; lățime: 200px; ) ecran numai pentru medii și (-Webkit-min-device-pixel-ratio: 1,5), numai ecran și (-moz-min-device-pixel-raport: 1,5), numai ecran și (-o-min-device-pixel-raport: 3/2), numai ecran și (min-device-pixel-raport: 1.5) ( .pictogramă ( imagine de fundal: url( pe site-uri sau aplicații care folosesc imaginea de fundal pentru elemente de design. Nu este potrivit pentru imagini din conținut. Pro

Unde se folosește: Contra

Pe ecranele obișnuite, claritatea imaginii poate avea de suferit din cauza algoritmilor de compresie

• Obositor de implementat, mai ales pe site-urile mari
• Utilizarea unei imagini de conținut ca fundal este incorectă din punct de vedere semantic
• Același rezultat poate fi obținut folosind window.devicePixelRatio:

Opțiunea dimensiunea fundalului nu este acceptată în IE 7 și 8.

• $(document).ready(function())( if (window.devicePixelRatio > 1) ( var lowresImages = $("img"); images.each(function(i) ( var lowres = $(this).attr() " src"); var highres = lowres.replace(".", "@2x."); attr("src", highres ));
• Modificarea imaginii este vizibilă pe dispozitivele cu retină
• Nu funcționează în unele browsere populare(IE și Firefox)

Grafică vectorială scalabilă

În acest exemplu, o imagine SVG simplă poate fi scalată după cum doriți:

Același lucru se va întâmpla folosind CSS:
/* Folosind o imagine de fundal */ .image ( imagine de fundal: url(example.svg); dimensiunea fundal: 200px 300px; înălțime: 200px; lățime: 300px; ) /* Folosind conținut:url() */ .image - container:before (conținut: url(example.svg); /* lățimea și înălțimea nu funcționează cu conținut:url() */ )

Suportul pentru IE 7 sau 8 și Android 2.x va necesita utilizarea unor imagini PNG de înlocuire. Acest lucru se poate face cu ușurință folosind Modernizr:
.image ( imagine de fundal: url(example.png); dimensiunea de fundal: 200px 300px; ) .svg ( .image (imagine de fundal: url(example.svg); ) )

Pentru o mai bună compatibilitate între browsere și pentru a evita problemele de rasterizare în Firefox și Opera, ar trebui să faceți ca fiecare imagine SVG să se potrivească cu elementul HTML părinte.

În HTML, puteți implementa un lucru similar folosind datele dorite din eticheta a:

CU folosind jQueryși Modernizr:
$(document).ready(function())( if(!Modernizr.svg) ( var imagini = $("img"); images.each(function(i) ( $(this).attr("src", $ (this).data("png-fallback");

Unde se folosește: pe orice site web, potrivit pentru icoane, logo-uri și ilustrații vectoriale simple.

Pe ecranele obișnuite, claritatea imaginii poate avea de suferit din cauza algoritmilor de compresie

• Un singur set de imagini pentru toate dispozitivele
• dimensiunea fundalului: 200px 300px;
• Scalare infinită

Opțiunea dimensiunea fundalului nu este acceptată în IE 7 și 8.

• Fără anti-aliasing precis de la pixel la pixel
• Nu este potrivit pentru grafice complexe din cauza dimensiuni mari fişier
• Fără suport nativ în IE 7, 8 etc. versiuni anterioare Android

Fonturi pentru pictograme

Ecranele Retina și ecranele Retina HD recent introduse sunt adesea menționate atunci când discutăm despre produsele Apple. În acest articol vom încerca să determinăm diferențele dintre aceste tipuri de afișaje și dacă aceste afișaje merită banii pe care îi cer.

Ce este afișajul Retina? Sau, ce definiție este corectă pentru afișajele cu acest nume?

Display-ul Retina este mai mult un truc de marketing decât un termen tehnic, dar și o definiție acest concept poate fi dat: este un ecran utilizat într-un dispozitiv de calcul care are o densitate mare de pixeli, astfel încât ochiul uman nu poate vedea pixeli individuali. Cu alte cuvinte, se presupune că o persoană nu va putea face diferența dintre o fotografie a unui tablou afișat pe un ecran Retina și pictura în sine. Dar asta este doar în teorie.

Retina este deținută de Apple. Alte companii pot produce ecrane cu aceleași caracteristici tehnice, dar nu le pot numi Retina. Aceasta este o marcă comercială.

Ce rezoluție are display-ul Retina?

Rezoluțiile ecranului sunt date în formatul „număr de pixeli” X „număr de pixeli”. Dar punct cheie pentru ecranele Retina este densitatea pixelilor (numărul de pixeli pe inch). Cu aceleași rezoluții de ecran (în pixeli), dar dimensiuni diferite(în inci) densitățile pixelilor vor varia.

Dar, chiar și în ceea ce privește densitatea pixelilor, nu există un număr unic care să califice un ecran drept Retină, deoarece la determinarea afișajelor Retina, se ia în considerare distanța ecranului față de ochi.

De fapt, puteți găsi adesea următorii indicatori de densitate a pixelilor pentru diferite tipuri de dispozitive:

• 326ppi - smartphone-uri
• 264ppi - tablete
• 220ppi - laptopuri

Există ecrane cu performanțe mai bune decât ecranele Retina?

Mânca. Există ecrane care au o densitate mai mare de pixeli. Apple însuși, de la lansarea iPhone 6, a oferit utilizarea unui ecran Retina HD îmbunătățit. Dar multe dispozitive Android superior dispozitivelor Apple în acest indicator, de exemplu LG G3 - 534 pixeli pe inch.

Dar, dacă ne amintim definiția anterioară a retinei, atunci creșterea densității pixelilor este o întreprindere destul de controversată, deoarece ochiul uman nu mai vede diferența la valori ppi atât de mari. Apple înșiși a vorbit despre asta. Dar lansarea iPhone 6 poate fi privită ca o recunoaștere a faptului că diferența poate fi încă simțită.

Diferența dintre Retina și Retina HD.

Termenul Retina HD se referă doar la ecranele noilor smartphone-uri Apple. Deci, cum îl depășește Retina HD pe predecesorul său:

• Rezoluție mai mare
• Contrast mai mare
• Unghi de vizualizare mai larg datorită tehnologie duala pixeli de domeniu
• De asemenea, dacă te uiți la ecran cu ochelari, imaginea de pe ecran va fi mai luminoasă decât la modelele anterioare.

În 2010, Apple a schimbat înțelegerea noastră despre afișajele mobile - iPhone 4 a primit un ecran cu tehnologie Retina, unic la acea vreme. Șase ani mai târziu, echipa Cupertino a introdus o altă dezvoltare complet nouă pentru afișaje - . Cum diferă ele unul de celălalt - și ce ar trebui să alegem? utilizatorii obișnuiți?

Ce este un display Retina?

Retina este un termen de marketing Apple tradus din engleză ca „retina”. Înseamnă următoarele: densitatea punctelor de pixeli de pe ecran este atât de mare încât ochiul uman nu poate distinge pixelii individuali din imagine. Mai mult, în spatele numelui „Retina” caracteristicile specifice nu sunt ascunse– de exemplu, un anumit număr de pixeli sau rezoluția exactă a afișajului.

Primul smartphone cu display Retina a fost iPhone 4. Avea o rezoluție de 960 × 640 pixeli, ceea ce era mai mult decât suficient pentru un display de 3,5 inchi - până la urmă erau 326 pixeli pe inch (PPI, pixel pe inch) .

Apropo, de fapt Afișează Apple au fost dezvoltate nu pe baza PPI, ci pe baza parametrului pixel-pe-grad (PPD, pixel pe grad). Măsoară mai bine capacitatea ochiului uman de a discerne detaliile la o anumită distanță. La crearea acestui indicator, sunt luate în considerare rezoluția ecranului și unghiul de vizualizare. iPhone 4 a avut un scor PPD de 57.

Când primul MacBook Pro cu ecran Retina a fost lansat în 2012, avea o rezoluție record de 2.880 x 1.800 pixeli pe un ecran de 15,4 inci. Indicatorul PPI a fost chiar mai mic decât cel al iPhone 4 (220 față de 326), dar PPD a fost mai mare - 79.

Comparație vizuală a rezoluției iPhone 3Gs (afișaj obișnuit) și iPhone 4s (afișaj retină):

Astăzi, aproape toate dispozitivele Apple au un ecran Retina. Acest lucru nu spune consumatorului absolut nimic despre exact câți pixeli pe inch (sau grad) va primi - la urma urmei, ecranul Apple Watch foarte diferit de monitor iMac. Dar asta nu contează, pentru că „Retina” înseamnă că nu veți putea vedea pixelii de pe ecran, adică Vă veți bucura de o imagine de înaltă calitate în orice circumstanțe. Câți oameni au nevoie de mai mult?

Mai multe detalii despre tehnologie

Ce este True Tone Display?

Spre deosebire de termeni precum HD, 4K, Retina etc., „True Tone” nu are nimic de-a face cu numărul de pixeli de pe ecran. Domeniul lui de responsabilitate este culori si contrast. Sarcina principală este să ne asigurăm că albul ideal rămâne întotdeauna alb ideal, în orice iluminare externă. Și cu cât afișajul este mai „alb”, cu atât va avea mai mult contrast.

Ați observat că lumina are o nuanță ușor roșiatică dimineața și o nuanță gălbuie la mijlocul zilei? Nu? Este logic - la urma urmei, creierul nostru „filtrează” în mod specific nuanțele.

Ecranele moderne reflectă bine lumina, dar creierul nostru nu observă și încă încearcă să filtreze ceea ce nu există. Drept urmare, percepția noastră asupra culorilor de pe ecran are de suferit. True Tone compensează acest lucru prin adăugarea de tonuri calde pe afișaj. Creierul filtrează cu bucurie imaginea - și obținem alb „adevărat”, „ca o foaie de hârtie A4”.

Am vorbit mai detaliat despre tehnologia True Tone.

Pictograma afișajului retinei

Retină(tradus din lat.  - „Retina”) este numele de marketing generic pentru ecranele LCD și OLED utilizate pe dispozitivele Apple din 2010. Ele sunt caracterizate printr-o densitate crescută a pixelilor, astfel încât ochiul uman nu poate distinge pixelii individuali care alcătuiesc imaginea. Și, în același timp, numele Retina este interzis să fie folosit în produse de la alte mărci pentru display-uri cu aceeași densitate de pixeli sau chiar mai mare.

Nu există un standard stabilit pentru densitatea pixelilor pentru tehnologie: Apple definește diferite densități pentru diferite dispozitiveși în conformitate cu distanța de vizualizare tipică pentru o anumită clasă de dispozitive - cu cât distanța tipică este mai mare, cu atât densitatea pixelilor este suficientă pentru a le face să nu se distingă. Pe baza cercetărilor conform cărora ochiul uman poate distinge nu mai mult de 300 ppi la o distanță de la ecran la ochi de 10-12 inchi (aproximativ 25-30 cm), producătorul susține că pe astfel de afișaje pixelarea imaginii nu se poate distinge. la ochi.

Afișaje Retina, ca și alte afișaje pt Dispozitivele Apple, sunt fabricate de Samsung, LG Display și Sharp.

Informații tehnice

Ecranul Retina folosește tehnologia IPS (cu excepția iPod touch de a 4-a generație, care folosește tehnologia), care oferă un unghi larg de vizualizare, sau OLED (Iphone X). sticla Gorilla [ ] . Adesea, ecranul este acoperit cu un strat oleofob.

• Apple a lansat următoarele dispozitive cu ecrane Retina:

Retina în dispozitive

Cuvintele lui Steve Jobs: „Totul este retina care are peste 300 ppi”. Astfel, iPad 3/4/5(Air) folosește un afișaj asemănător retinei (264 ppi). De asemenea, un afișaj asemănător Retina este utilizat în MacBook Pro 13 (a treia generație, 227 ppi), MacBook Pro 15 (a treia generație, 220 ppi).

Full Retina este utilizat numai: de la iPod - la iPod 4/5. De pe iPhone - în iPhone 4/4S/5/5C/5S/6/6s/SE - 326 ppi (pe toate dispozitivele), iar în iPhone 6 Plus și iPhone 6s Plus - 401 ppi. De la iPad - la iPad mini cu ecran Retina - 324 ppi (pe toate dispozitivele). iPhone 6 Plus și iPhone 6s Plus folosesc Retina. Odată cu lansarea iPhone 6 și 6+, Apple a anunțat utilizarea ecranelor Retina HD cu o densitate și mai mare de pixeli. Cu toate acestea, în practică, densitatea pixelilor a crescut doar în modelul 6+ și este de 401 ppi, în timp ce densitatea pixelilor iPhone 6 a rămas aceeași - 326 ppi.

La sfârșitul anului 2014, iMac-ul de 27 inchi a fost lansat cu un ecran Retina 5k, a cărui rezoluție este de 5120x2880 (218 ppi).