Čo je sietnicový displej. Technológia Retina Display - čo to je? Škálovanie HTML a CSS: Nevýhody

• Preklad

Po nedávnom vydaní Retina MacBook Pro A Nové iPad, obrazovky so zvýšenou hustotou pixelov začali aktívne vstupovať do našich životov. Čo to znamená pre webových vývojárov?

Najprv pochopme terminológiu.

fyzické pixely

fyzické pixely(pixel zariadenia alebo fyzický pixel) - nám známe pixely: najmenšie prvky akéhokoľvek displeja, z ktorých každý má svoju vlastnú farbu a jas.

Hustota obrazovky(Hustota obrazovky) je počet fyzických pixelov displeja. Zvyčajne sa meria v pixeloch na palec (PPI: pixely na palec). Apple, ktorý vyvinul Retina obrazovky s dvojnásobnou hustotou pixelov, tvrdí, že ľudské oko nie je schopné rozlíšiť vyššiu hustotu.

CSS pixely

CSS pixely(Pixely CSS) – abstraktná hodnota, ktorú používajú prehliadače na presné zobrazenie obsahu na stránkach bez ohľadu na obrazovku (DIP: pixely nezávislé na zariadení). Príklad:

Takýto blok na bežných obrazovkách bude zaberať plochu 200 x 300 pixelov a na obrazovkách Retina ten istý blok dostane 400 x 600 pixelov. Na obrazovkách Retina je teda hustota pixelov 4-krát väčšia ako na bežných:

Pomer medzi fyzickými a CSS pixelmi je možné nastaviť takto:
pomer-pixelov zariadenia, -pomer-o-zariadenia-pixelov, -moz-zariadenia-pomer-pixelov, -Pomer-zariadenia-webovej súpravy (…)

Alebo takto:
pomer-pixelov zariadenia, -o-min-pomer-pixelov-zariadenia, min--moz-zariadenia-pomer-pixelov, -Pomer-min-zariadenia-webovej súpravy (…)

V Javascripte to možno dosiahnuť pomocou
window.devicePixelRatio

Rastrové pixely

Rastrové pixely(bitmapové pixely) - najmenšie časti, ktoré tvoria bitmapový obrázok (PNG, JPF, GIF atď.) Každý pixel obsahuje informácie o farbe a umiestnení v súradnicovom systéme obrázka. V niektorých formátoch môže pixel obsahovať Ďalšie informácie napríklad transparentnosť.

Webové obrázky majú okrem rozlíšenia bitmapy aj abstraktné rozmery v pixeloch CSS. Prehliadač zmenší alebo roztiahne obrázok podľa šírky a dĺžky CSS. Pri zobrazení na normálnej obrazovke jeden pixel bitovej mapy zodpovedá jednému pixelu CSS. Na obrazovkách Retina sa každý bitmapový pixel vynásobí 4:

Optimalizácia

Existuje niekoľko spôsobov, ako optimalizovať grafiku pre zobrazenie na obrazovkách Retina. Každý má plusy aj mínusy, v každom je potrebný konkrétny prípad vyberte, čo má vyššiu prioritu: výkon, jednoduchosť implementácie, podpora prehliadača alebo niektoré ďalšie parametre.

Škálovanie HTML a CSS

Najjednoduchší spôsob, ako pripraviť grafiku pre Retina displej, je jednoducho znížiť fyzické rozmery obrazu na polovicu. Ak chcete napríklad zobraziť fotografiu s rozmermi 200 x 300 pixelov na obrazovke so zvýšenou hustotou pixelov, musíte nahrať fotografiu s rozmermi 400 x 600 pixelov a zmenšiť ju pomocou atribútov CSS alebo parametrov HTML. Toto bude zobrazenie na normálnej obrazovke:

A takto na Retine:

Spôsobov je viacero HTML implementácie a škálovanie CSS:

HTML

Najjednoduchším spôsobom je jednoducho nastaviť parametre šírky a výšky na značku img:

Kde použiť: na jednostránkových weboch s viacerými obrázkami.

javascript

Rovnaký výsledok je možné dosiahnuť pomocou Javascriptu na zníženie veľkosti obrázkov pre obrazovky Retina na polovicu. Použitím knižnice jQuery vyzerá to takto:
$(window).load(function() ( var images = $("img"); images.each(function(i) ( $(this).width($(this).width() / 2); ) );));

Kde použiť: na stránkach s viacerými obrázkami v obsahu.

CSS (SCSS)

Ako pozadie môžete použiť aj obrázok požadované rozmery(veľkosť pozadia) konkrétneho div. Parameter veľkosti pozadia nie je podporovaný v IE 7 a 8.
.image ( obrázok na pozadí: url( [chránený e-mailom]); background-size: 200px 300px; /* alternatívna veľkosť pozadia: include; */výška: 300px; šírka: 200px )

Môžete použiť pseudoprvky :before alebo :after
.image-container:before ( background-image: url( [chránený e-mailom]); background-size: 200px 300px; obsah:""; displej:blok; výška: 300px; šírka: 200px )

Táto technika funguje aj pri použití sprite:
.ikona ( obrázok na pozadí: url( [chránený e-mailom]); background-size: 200px 300px; výška: 25px; šírka: 25px &.trash ( background-position: 25px 0; ) &.edit ( background-position: 25px 25px; ) )

Kde použiť: na obmedzených stránkach. obrázky na pozadí(napríklad jeden ako šprt).

Škálovanie HTML a CSS: Pros

• Jednoduchosť implementácie
• Kompatibilita s crossbrowsermi

Škálovanie HTML a CSS: Nevýhody

• Zariadenia s normálnymi obrazovkami stiahnu extra megabajty
• Na normálnych obrazovkách môže byť čistota obrazu ovplyvnená kompresnými algoritmami.
• Parameter veľkosti pozadia nie je podporovaný v IE 7 a 8.

Stanovenie hustoty pixelov obrazovky

Toto je snáď najviac populárny spôsob optimalizácia grafiky pre Retina displeje. Používa sa CSS alebo Javascript.

css

Táto metóda používa pomer zariadenia-pixelov na nastavenie správneho pomeru medzi fyzickými pixelmi a pixelmi CSS:
.icon ( background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; ) @media only screen a (-Webkit-min-device-pixel-ratio: 1,5), iba obrazovka a (-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) ( .ikona ( obrázok na pozadí: url( [chránený e-mailom]); } }

Kde použiť: na stránkach alebo aplikáciách, ktoré používajú obrázok na pozadí pre prvky dizajnu. Nevhodné pre obrázky v obsahu.

klady

• Kompatibilita s crossbrowsermi

Mínusy

• Zdĺhavá implementácia, najmä na veľkých stránkach
• Použitie obrázka obsahu ako pozadia je sémanticky nesprávne

javascript

Rovnaký výsledok možno dosiahnuť pomocou 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); )); ) ));

Existuje špeciálna javascript plugin Retina.js , ktorý dokáže všetko vyššie uvedené, ale s pridané vlastnosti, ako napríklad preskakovanie externých obrázkov a preskakovanie interných obrázkov, ktoré nemajú kópie sietnice.

Kde použiť: na všetkých stránkach s obrázkami v obsahu.

klady

• Jednoduchosť implementácie
• Zariadenia nesťahujú nepotrebné obrázky
• Kontrola hustoty pixelov na webe

Mínusy

• Zariadenia Retina sťahujú obe verzie každého obrázka
• Spoofing obrazu je viditeľný na zariadeniach sietnice
• V niektorých nefunguje populárne prehliadače(IE a Firefox)

Škálovateľná vektorová grafika

Bez ohľadu na použitú metódu bitmapy svojou povahou zostávajú obmedzené v škálovaní. Tu vám môžeme pomôcť Vektorová grafika. Zapnutý formát SVG (Scalable Vector Graphics). Na báze XML podporované väčšinou prehliadačov. Najjednoduchší spôsob použitia obrázkov SVG je in img tag alebo parametre CSS background-image a content:url().

V tomto príklade možno jednoduchý obrázok SVG zmeniť podľa vlastného uváženia:

To isté sa stane s pomocou CSS:
/* Použitie obrázka na pozadí */ .image ( background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; ) /* Použitie content:url() */ .image - container:before ( content: url(example.svg); /* šírka a výška nefungujú s content:url() */ )

Podpora pre IE 7 alebo 8 a Android 2.x bude vyžadovať použitie náhradných obrázkov PNG. To sa dá ľahko urobiť pomocou Modernizr:
.image ( background-image: url(example.png); background-size: 200px 300px; ) .svg ( .image ( background-image: url(example.svg); ) )

Ak chcete dosiahnuť najlepšiu kompatibilitu medzi prehliadačmi, aby ste sa vyhli problémom s rastrovaním vo Firefoxe a Opere, nastavte každý obrázok SVG tak, aby sa zhodoval s nadradeným prvkom HTML.

V HTML môžete implementovať to isté s potrebnými údajmi v značke a:

OD pomocou jQuery a modernizér:
$(document).ready(function()( if(!Modernizr.svg) ( var images = $("img"); images.each(function(i) ( $(this).attr("src", $ (this).data("png-fallback")); )); ) ));

Kde použiť: na ľubovoľných stránkach, vhodné pre ikony, logá a jednoduché vektorové ilustrácie.

klady

• Jedna sada obrázkov pre všetky zariadenia
• Jednoduchosť implementácie
• Nekonečný zoom

Mínusy

• Žiadny pixel-perfektný anti-aliasing
• Nevhodné pre zložitú grafiku kvôli veľké veľkosti súbor
• Žiadna vstavaná podpora v IE 7, 8 a skoré verzie Android

Písma ikon

populárny vďaka

Vývojári z rôznych spoločností sa snažia dať viac pozornosti a snažia sa prilákať nových používateľov k svojim produktom. Tak čo ťa v tomto prekvapilo Jablkové časy a čo je to Retina displej? Jeho výhody oproti ostatným a nevýhody. Presne o tom bude tento článok.

Displej je neoddeliteľnou súčasťou každého zariadenia. Či už ide o tablet, počítač alebo telefón. Koniec koncov, prostredníctvom neho sa uskutočňuje spojenie medzi osobou a „železom“.

Čo je to Retina displej?

Pri používaní tohto displeja si človek pixely vôbec nevšimne. Obraz je veľmi jasný a jasný, čím sa nemôže pochváliť každé zariadenie.

Predtým si takúto čistotu displeja mohli užiť len na profesionálne počítače, ale teraz je k dispozícii aj na zariadeniach Apple. Retina sa najčastejšie používa na tabletoch iPad, rozlíšenie je 2048 x 1536 pixelov. Je to dokonca viac ako niektoré počítačové monitory.

Foto: Vizuálne porovnanie Povolenia pre iPhone 3Gs (bežný displej) a iPhone 4s (retina displej)

Retina používa iba Apple?

Retina displej je patentovaný nástroj, čo znamená, že žiadna značka nemá právo ho používať v tejto forme. Došlo však k pokusu zvýšiť počet pixelov na obrazovke Sony ale nebola úspešná. Od presne v veľkosť jablka obrazovka (palce) zodpovedá počtu pixelov. Koniec koncov, stojí za to pripomenúť, že so zvýšením rozlíšenia je potrebné zvýšiť aj technickú zložku zariadenia.

Steve Jobs (zakladateľ spoločnosti Apple) raz povedal, že 300 dpi je zlatá stredná cesta pre telefóny.

Výhody a nevýhody displejov Retina

Retina displej obsahuje množstvo výhod, ktoré ho odlišujú od displejov iných spoločností:

• typ matice je IPS, čo znamená, že táto technika má vylepšenú grafickú zložku: vysoký jas, kontrast a pozorovací uhol, presná reprodukcia farieb;
• fotografie vyzerajú ako živé a čo najviac zodpovedajú realite;
• dobré výsledky v digitálnej maľbe;
• obraz zostáva čitateľný z akéhokoľvek uhla pohľadu;
• pomer ceny a kvality je optimálny;
• automatická eliminácia chyby pixelov.

Všetky displeje však majú svoje nevýhody. A Retina nie je výnimkou. Pri použití na maximum možné nastavenia Batéria sa rýchlo zahrieva a vybíja.

Stručné závery

1. Retina displej je vývoj Apple Corporation. Dnes je to najlepšie z hľadiska pomeru ceny a kvality.
2. Obraz na takomto displeji je veľmi jasný, farby zodpovedajú realite. Na takéto tablety je veľmi vhodné kresliť.
3. Jednou z hlavných výhod je pozorovací uhol, ktorý umožňuje, aby obraz zostal čistý a „správny“ z hľadiska farieb, bez ohľadu na to, z akého uhla sa pozeráte.
4. Vzhľadom na výhody a nevýhody si Retina zachováva svoje miesto ako popredné zobrazenie modernosti.

Retina Display - patentovaná technológia Apple spoločnosť, na základe ktorej sa vytvárajú displeje pre všetky nové mobilné zariadenia. Spoločnosť propaguje túto technológiu ako moderný zázrak, ktorý nemá páru a sľubuje v týchto obrazovkách okrem vynikajúceho prenosu vyváženia farieb aj obrovskú hustotu pixelov. V princípe teraz prebieha intelektuálna vojna medzi technológiami Samsung Retina a OLED. Zaujímavejšie je, že Retina je známa Technológia TFT+IPS. Plus dominancia značky, samozrejme.

TFT alebo LCD - obrazovky postavené na základe vlastností tekutých kryštálov. Tieto kryštály sú tekuté, ktoré sa pod určitým vplyvom môžu zmeniť na kryštál a potom sa opäť stanú tekutými. Táto kvapalina sa syntetizuje v podnikoch a stavia na nej rôzne LCD obrazovky. Princíp fungovania monitora je pomerne jednoduchý, ak ho opíšete na prstoch. Svetlo prechádza dvoma polarizačnými filtrami. Jedna z nich má vertikálnu mriežku výrezov, druhá má horizontálnu. Medzi filtrami je „akvárium“ s tekutými kryštálmi. Samozrejme, že je veľmi tenký, uzavretý a vo vnútri sú okrem kryštálov cestičky na prejdenie elektrický prúd. Samotné kryštály nereprodukujú farbu, ale odrážajú ju. Keď sa na mriežku aplikuje prúd, kryštál sa otáča a mení smer svetla. Pre monochromatické displeje toto je už dosť. Keď majú polarizačné dosky jeden smer, potom sa svetlo oneskorí na výstupe filtra a získa sa čierny bod, inak je biely. Farba sa vytvára pomocou farebných filtrov, z ktorých každý prijíma lúč z kryštálu.

Pre LCD monitory boli vynájdené rôzne „zlepšovače“ prenosu, napríklad IPS a TN. Pomocou prvej technológie je organizovaný veľký pozorovací uhol obrazu na obrazovke, ako aj prirodzenejšie farby. Druhá technológia vyzerá užšie a horšie, ale funguje oveľa rýchlejšie. Je nemožné ich kombinovať. Pojem TFT vo všeobecnosti označuje tranzistorovú technológiu na tenkom filme, kde každý z nich zvyšuje vlastnosti jednotlivého pixelu z hľadiska rýchlosti a kontrastu. V TN sú tekuté kryštály umiestnené kolmo na obrazovku, v IPS - paralelne. Pre používateľa je dôležité, aby oko nevidelo jednotlivé pixely v hustote vyššej ako 300 dpi a to už dosiahla technológia Retina.

Zostáva len trochu hovoriť o tom, ako sa v zásade líšia od základných funkcií LCD Technológia OLED. Využívajú pracovné médium, ktoré samo bez iniciácie svetla dokáže vytvárať žiaru, vďaka čomu je možné touto technológiou získať oveľa tenšie monitory. OLED monitory navyše využívajú energiu oveľa hospodárnejšie a vydržia dlhšie bez nabíjania. Uvidí sa, ktorá technológia v budúcnosti zvíťazí, no už teraz sa zariadenia Samsung zväčšujú a zväčšujú hustotu na palec, vďaka čomu sa Retina javí ako technológia predminulého dňa. ale Apple stále máte v rukáve tromfy - ako vždy.

V roku 2010 rok spoločnosti Apple zmenilo naše chápanie mobilných displejov - iPhone 4 dostal obrazovku s technológiou Retina, ktorá bola v tom čase jedinečná. O šesť rokov neskôr Cupertinčania predstavili ďalší úplne nový vývoj pre displeje - . Ako sa navzájom líšia - a čo si pre nás vybrať, bežných používateľov?

V kontakte s

Čo je to Retina displej?

Retina (retina) – marketingový výraz spoločnosti Apple, v preklade z angličtiny znamená „sietnica“. Z toho vyplýva nasledovné: hustota bodov-pixelov na obrazovke je taká vysoká, že ľudské oko nedokáže rozlíšiť jednotlivé pixely v obraze. Zároveň za názvom "Retina" špecifické vlastnosti nie sú skryté– napríklad určitý počet pixelov alebo presné rozlíšenie displeja.

Prvým smartfónom s Retina displejom bol iPhone 4. Dostal rozlíšenie 960 × 640 pixelov, čo bolo na 3,5-palcový displej viac než postačujúce – veď na palec bolo 326 pixelov (PPI, pixel na palec). .

Mimochodom, vlastne Displeje Apple boli vyvinuté nie na základe PPI, ale na základe parametra pixel-per-degree (PPD, pixel na stupeň). Lepšie definuje schopnosť ľudské oko rozlíšiť detaily v určitej vzdialenosti. Pri vytváraní tejto metriky sa berie do úvahy rozlíšenie obrazovky a pozorovací uhol. iPhone 4 mal PPD 57.

Keď v roku 2012 vyšiel prvý MacBook Pro s Retina displejom, dosahoval vtedy rekordné rozlíšenie 2880 × 1800 pixelov na 15,4-palcovej obrazovke. Zároveň bol PPI ešte nižší ako pri iPhone 4 (220 vs. 326), ale PPD bol vyšší – 79.

Vizuálne porovnanie rozlíšenia iPhone 3Gs (bežný displej) a iPhone 4s (Retina displej):

Dnes takmer všetky zariadenia Apple majú Retina displej. Spotrebiteľovi to napokon nehovorí absolútne nič o tom, koľko pixelov na palec (alebo stupeň) dostane Obrazovka Apple Hodinky sa veľmi líšia od monitor iMac. Ale to je jedno, lebo nápis „Retina“ znamená, že na obrazovke nevidíte pixely, t.j. vychutnáte si kvalitný obraz za každých okolností. Koľko ľudí potrebuje viac?

Viac o technológii

Čo je to True Tone displej?

Na rozdiel od výrazov ako HD, 4K, Retina atď. skutočný tón“ nemá nič spoločné s počtom pixelov na obrazovke. Oblasť jeho zodpovednosti je farby a kontrast. Hlavnou úlohou je, aby to bolo dokonalé biela farba vždy zostala dokonalá biela v akomkoľvek vonkajšom svetle. A čím je displej „bielejší“, tým bude kontrastnejší.

Všimli ste si, že svetlo má ráno mierne červenkastý odtieň a uprostred dňa - žltkastý? nie? Je to logické - veď náš mozog špecificky „filtruje“ odtiene.

Moderné obrazovky dobre odrážajú svetlo, ale náš mozog si to nevšimne a stále sa snaží odfiltrovať to, čo tam nie je. Tým trpí naše vnímanie farieb na obrazovke. True Tone to kompenzuje pridaním teplých farieb na displej. Mozog veselo prefiltruje obrázok – a dostaneme „skutočnú“ bielu farbu, „ako list papiera A4“.

O technológii True Tone sme hovorili podrobnejšie.