Ar tīklenes displeju. Kas ir tīklenes displeji. Kāda ir atšķirība starp parasto displeju un tīklenes displeju

Tīklenes displeja ikona

Rétina(tulkots no lat.- "tīklene") ir LCD un OLED displeju vispārējais mārketinga nosaukums, ko Apple ierīcēs lieto kopš 2010. gada. Tiem ir raksturīgs palielināts pikseļu blīvums, lai cilvēka acs nevarētu atšķirt atsevišķus pikseļus, kas veido attēlu. Tajā pašā laikā Retina nosaukumu nedrīkst izmantot citu zīmolu izstrādājumos displejiem, kuriem ir vienāds vai pat lielāks pikseļu blīvums.

Tehnoloģijai nav fiksēta pikseļu blīvuma standarta: Apple nosaka atšķirīgu blīvumu dažādām ierīcēm un saskaņā ar tipisko skata attālumu noteiktai ierīču klasei - jo garāks tipiskais attālums, jo mazāks pikseļu blīvums ir pietiekams, lai tās varētu neatšķirams. Balstoties uz pētījumiem, ka cilvēka acs 10–12 collu (aptuveni 25–30 cm) attālumā no ekrāna līdz acs var atšķirt ne vairāk kā 300 ppi, ražotājs apgalvo, ka šādos displejos attēla pikseļi ir acīm neredzams.

Tīklenes displejus, tāpat kā citus Apple ierīču displejus, ražo Samsung, LG Display un Sharp.

Tehniskā informācija

Retina displejā tiek izmantota IPS tehnoloģija (izņemot 4. paaudzes iPod touch, kas izmanto tehnoloģiju), kas nodrošina plašu skata leņķi, jeb OLED (Iphone X). Gorilla Glass [ ]. Bieži vien ekrāns ir pārklāts ar oleofobisku slāni.

  • Apple ir izlaidusi šādas ierīces ar Retina displejiem:
Modelis Pikseļi collā Pikseļi uz centimetru Izšķirtspēja Tipisks skatīšanās attālums Viena pikseļa skata leņķis (loka minūtes)
iPod touch (4. paaudze) un iPhone 4 / 326 128 960 × 640 10 collas (25 cm) 1,1
iPod touch (5. paaudze) un iPhone 5 / / / 326 128 1136 × 640
iPhone 6 / 6S 326 128 1334 × 750
iPhone 6 + / 6S + 401 156 1920x1080
iPad 3 / / iPad Air / Air 2 264 105 2048 × 1536 15 collas (38 cm) 0,87
iPad mini ar Retina displeju 324 129
MacBook Pro 15 Retina (3. paaudze) 220 87 2880 × 1800 20 collas (51 cm) 0,78
MacBook Pro 13 Retina (3. paaudze) 227 89 2560 × 1600
iMac ar Retina 5k displeju 218 85 5120x2880 nav datu nav datu
MacBook (tīklene) 226 89 2304 × 1440 12 collu nav datu

Tīklene ierīcēs

Stīva Džobsa vārdi: "Viss ir tīklene, kas pārsniedz 300 ppi." Tādējādi iPad 3/4/5 (Air) izmanto Retina veida displeju (264 ppi). Retina tipa displejs tiek izmantots arī MacBook Pro 13 (3. paaudze, 227 ppi), MacBook Pro 15 (3. paaudze, 220 ppi).

Tiek izmantota tikai pilnvērtīga tīklene: no iPod līdz iPod 4/5. No iPhone - līdz iPhone 4 / 4S / 5 / 5C / 5S / 6 / 6s / SE - 326 ppi (visās ierīcēs), un iPhone 6 Plus un iPhone 6s Plus - 401 ppi. IPad uz iPad mini ar Retina displeju - 324 ppi (visas ierīces). IPhone 6 Plus un iPhone 6s Plus izmanto tīkleni. Izlaižot iPhone 6 un 6+, Apple paziņoja par Retina HD displeju izmantošanu ar vēl lielāku pikseļu blīvumu. Tomēr praksē pikseļu blīvums ir pieaudzis tikai 6+ modelī un ir 401 ppi, savukārt iPhone 6 pikseļu blīvums palika nemainīgs - 326 ppi.

2014. gada beigās iMac 27 "tika izlaists ar Retina 5k displeju, kura izšķirtspēja ir 5120x2880 (218 ppi).

Retina displeji un nesen ieviestie Retina HD displeji bieži tiek pieminēti, apspriežot Apple produktus. Šajā rakstā mēs centīsimies noteikt atšķirības starp šāda veida displejiem un to, vai šie displeji ir par tiem prasīto naudu vērti.

Kas ir tīklenes displejs? Vai kāda definīcija ir precīza šī nosaukuma displejiem?

Tīklenes displejs ir vairāk mārketinga triks nekā tehnisks termins, bet arī definīcija šo koncepciju var dot: tas ir ekrāns, ko izmanto skaitļošanas ierīcē, kam ir liels pikseļu blīvums, pie kura cilvēka acs nevar redzēt atsevišķus pikseļus. Citiem vārdiem sakot, tiek pieņemts, ka persona nevarēs pateikt atšķirību starp Retina ekrānā redzamās gleznas fotogrāfiju un pašu gleznu. Bet tas ir tikai teorētiski.

Retina ir Apple īpašumtiesības. Citi uzņēmumi var izgatavot ekrānus ar vienādām specifikācijām, taču viņi tos nevar saukt par Retina. Šī ir preču zīme.

Kāda ir tīklenes displeja izšķirtspēja?

Ekrāna izšķirtspēja ir formātā "pikseļu skaits" X "pikseļu skaits". Bet tīklenes displeju galvenais punkts ir pikseļu blīvums (pikseļi collā). Tajā pašā ekrāna izšķirtspējā (pikseļos), bet dažādi izmēri(collās) pikseļu blīvums būs atšķirīgs.

Bet pat pikseļu blīvuma ziņā nav viena skaitļa, kas ekrānu kvalificētu kā tīkleni, jo, nosakot tīklenes displejus, tiek ņemta vērā uzmanība, ekrāna attālums no acīm.

Faktiski dažāda veida ierīcēm biežāk ir šādi pikseļu blīvumi:

  • 326ppi - viedtālruņi
  • 264ppi - tabletes
  • 220ppi - klēpjdatori

Vai ir ekrāni ar labāku veiktspēju nekā Retina displeji?

Tur ir. Ir ekrāni, kuriem ir lielāks pikseļu blīvums. Kopš iPhone 6 izlaišanas pati Apple piedāvā uzlabotu Retina HD displeju. Bet daudzas Android ierīces pārspēj tādas Apple ierīces kā LG G3 ar 534 pikseļiem collā.

Bet, ja mēs atceramies mūsu iepriekšējo Retina definīciju, tad pikseļu blīvuma palielināšana ir diezgan pretrunīgs uzņēmums, jo cilvēka acs vairs nespēj saskatīt atšķirību pie tik augsta ppi. Apple to teica paši. Bet iPhone 6 izlaišanu var uzskatīt par atziņu, ka atšķirību joprojām var sajust.

Atšķirība starp tīkleni un tīkleni HD

Termins Retina HD attiecas tikai uz jauno Apple viedtālruņu ekrāniem. Tātad, kas padara Retina HD pārāku par tā priekšgājēju:

  • Augstāka izšķirtspēja
  • Lielāks kontrasts
  • Plašāks skata leņķis ar divu domēnu pikseļu tehnoloģiju
  • Turklāt, ja skatāties uz ekrānu ar brillēm, attēls ekrānā būs gaišāks nekā iepriekšējos modeļos.

Šodien mēs apskatīsim, kāda ir Retina Display tehnoloģija. Tīklenes displejs tas ir jauns plašas izšķirtspējas ekrāns. To lieto planšetdatorā iPad. Šī ekrāna izšķirtspēja ir 2048x1536 pikseļi. Tas ir ievērojami vairāk nekā daži monitori. Retina Display tehnoloģija ir jauninājums planšetdatoru tirgū. Apple inženieru paveiktais darbs ir cieņas vērts.

Iepriekš cilvēki strādāja ar tik precīzu un kvalitatīvu attēlu, izmantojot tikai profesionālus monitorus (piemēram, dažādu uzņēmumu augstas klases datoru monitorus), kuru izmaksas pārsvarā pārsniedza 9000 ASV dolāru, taču šodien izcilu attēla skaidrību var baudīt vienkārši iegādājoties planšetdatoru, kurā ir instalēts tīklenes displejs.

Īpaši iPad

IPad ar Retina displeju izmanto IPS tehnoloģiju. Šīs sistēmas dēļ mēs iegūstam plašāku skata leņķi. Pateicoties šai tehnoloģijai, neatkarīgi no tā, kur jūs sēdējat iPad, jūs vienmēr redzēsiet lielisku attēlu. Arī tīklenes displeja kontrasts ir daudz lielāks nekā iepriekšējie. Tāpēc baltie ir daudz spilgtāki, bet melnādainie - daudz tumšāki, kā rezultātā viss attēls izskatās daudz labāk. Pēc Apple inženieru domām, bija diezgan grūti izveidot displeju ar 3,1 miljonu pikseļu. Lai sasniegtu visaugstāko attēla kvalitāti, izstrādātāji izmantoja Retina iPad displeja sistēmas loģikas sadalījumu divās sfērās. Augšpusē palika paši pikseļi, un apakšā katram apakšpikselim tika novietota signāla kondicionēšanas ķēde, kas nosaka zaļo, sarkano vai zilo krāsu.

Papildu funkcijas

Ja jūs izvēlaties Retina Display, ko tas jums darīs? Arī Apple inženieri ir pilnveidojuši stiklu.

Tas ir izgatavots no tiem pašiem materiāliem, kurus izmanto helikoptera stiklā. Tas ir pakļauts ķīmiskai apstrādei, tādējādi palielinot tā izturību, aizsardzību pret dažāda veida skrāpējumiem un izturību. Svarīga šī displeja iezīme ir tā, ka ir īpašs oleofobisks pārklājums, kas palīdz novērst pirkstu nospiedumu parādīšanos un tos viegli noņemt. Citas tīklenes funkcijas ietver apkārtējo apgaismojumu un LED apgaismojumu. Tas sastāv no ekrāna spilgtuma pielāgošanas, kā rezultātā akumulators tiek izmantots optimāli, nezaudējot attēla kvalitāti.

Tīklenes displeja priekšrocības

Pērkot Retina Display, var droši teikt, ka tas ir lielisks produkts, kas sniedz daudz priekšrocību. Jaunākais iPad ekrāns izceļas ne tikai augstas izšķirtspējas, bet arī lieliska krāsu un toņu atveidošana - jo īpaši absolūti perfekta gamma līkne un standarta krāsu gamma.

Rezultātā visi jūsu videoklipi un fotoattēli izskatīsies tieši tā, kā tiem vajadzētu parādīties šīs planšetdatora “stacionārā” ierīcē. Displeja spilgtuma robeža parasti ir līdz 407 cd / m2. Tās trūkums var būt manāmi pamanāms tikai pietiekami spožā saulē, citos gadījumos ar akumulatoru pietiek. Kontrasta attiecība ir aptuveni 900: 1. Šis skaitlis ir augstāks salīdzinājumā ar iepriekšējās paaudzes iPad (kur attiecība bija 687: 1). Kas ir Retina Display pretapžilbināšanas filtrs? Ierīce, kas labi tiek galā ar ārējiem gaismas traucējumiem un neļauj ekrānam izbalēt vai izbalināt gaismas ietekmē. Skata leņķi ir pietiekami plaši, toņi praktiski nav sagrozīti, attēls paliek salasāms jebkurā redzes leņķī.

Turklāt, ja esat "iDevices" ekrānsaudzētāju tapetes veidotājs, jūs neapšaubāmi priecāsieties par šo displeju. Ir kļuvis daudz vieglāk visu izdarīt zem šī ekrāna. Pats displejs palīdz noņemt visus pikseļu raupjumus un nodrošina lielisku, visaugstākās kvalitātes attēlu.

Sistēmas mīnusi

Lai arī cik labs šis displejs būtu, tam tomēr ir vairāki trūkumi. Pirmkārt, dažās ierīcēs ar Retina ekrānu tā mēdz sakarst, kas izrādās nepatīkami. Otrkārt, neatkarīgi no tā, ko mums saka par akumulatora darbības laiku, šis displejs ar maksimālu spilgtumu diezgan ātri iztukšo ierīces akumulatoru. Treškārt, bieži rodas problēmas ar automātisko spilgtumu, kas labi nepielāgojas apkārtējam apgaismojumam, taču to vienmēr var pielāgot manuāli.

Bet visi šie Apple iPad trūkumi (tīklenes displejs ir viens no tā labākajiem raksturlielumiem) nevar sabojāt iegūtās attēla kvalitātes baudīšanu. Ar katru jauno modeli displejs kļūst arvien pilnīgāks.

Secinājumu izdarīšana

Pievienojot visas jaunās tehnoloģijas funkcijas un priekšrocības, mēs varam secināt, ka Retina Display ir brīnišķīga dāvana. Mēs redzam, ka iegūtais produkts pilnībā atbilst visiem mūsu sapņiem un cerībām par to. Attēla kvalitāte nemainās, skatoties no dažādiem leņķiem, krāsas viena otru nepārtrauc un neizbalē, un lietotāji gūs daudz lielāku prieku, lasot, skatoties video un fotogrāfijas. Viennozīmīgi iesākts Šis brīdis tas ir visu laiku labākais planšetdatoru displejs.

Šodien popularitātes virsotnē ir Apple planšetdatori ar tīklenes displeju. Attēlu kvalitāte šajos ekrānos ir daudz labāka nekā parastajos ekrānos.

Apple iPad ar šādu displeju tirgū vairākām versijām. Kurš modelis ir labāks - parādīs mūsu pārskats.

Ierīcei ir tādi komponenti kā:

  • Akumulators.
  • Dokumentācija.
  • USB kabelis.
  • Aksesuārs SIM kartes iegūšanai.

Jaunajam iPad mini 2 ir Retina displejs. Šo modeli darbina A7 procesors. Izlaižot iPad mini 2, iPad biezums ir nedaudz pieaudzis. Melnā krāsa pazuda, tās vietā parādījās tumši pelēks sīkrīks. Minimālais sīkrīka atmiņas apjoms ir Apple iPad Wi-Fi 16 GB. Maksimālajā versijā ir 128 GB iekšējās atmiņas. Un visos citos aspektos tas ir vecais labais Apple mini modelis.

Apple iPad dizains

Protams, attiecīgā Apple iPad galvenais jauninājums ir tīklenes displejs. Bet izskats jebkura ierīce ir svarīga īpašība, tāpēc mēs sniegsim arī pārskatu par to.

Modelim ir dizains, kā liecina tā pārskats un salīdzinājums ar iepriekšējām versijām, neatšķiras no pirmās mini versijas. Un lielākā daļa lietotāju to uzskatīja par plusu.

Tomēr daži cilvēki dod priekšroku Air modelim - ir ērti skatīties videoklipus, piekļūt vietnēm, izmantojot Wi-Fi, un daudz ko citu. Displeja izmēri to pieļauj.

Tomēr, ja paskatās uz pārdošanas statistiku, modeļa mini vadība ir pārliecināta. Vienā lielajā versijā ir apmēram desmit iPad mini A1490 vai A1489 iPad mini.

To izskaidrot ir pavisam vienkārši, nav pat nepieciešams veikt detalizētu abu modeļu veidu salīdzinošu pārskatu. Un tas nav pat par cenu. Vienkārši mini ir daudz vieglāk paņemt līdzi, ieliekot to jakas kabatā. Jums pat nav jāņem soma līdzi, bet ielieciet sīkrīku dūnu jakas kabatā. Tātad, atrodoties pilsētā, lietotājs var pārbaudīt pastu, zvanīt, izmantojot FaceTime. Un tas viss pateicoties miniatūrajiem izmēriem un Wi-Fi tīkliem. Jebkurā gadījumā tas nav iespējams ar Air.

Displejs

Papildus bagātīgajai funkcionalitātei, Wi-Fi atbalstam un citām priekšrocībām pilnekrāna versijas ir aprīkotas ar lielisku displeju. IPS elementa diagonāle ir 7,9 collas. Ir LED apgaismojums. Izšķirtspēja ir 2048x1536 pikseļi. Elementu aizsargā oleofobisks pārklājums.

Salīdzinājumam, pirmā mini izšķirtspēja bija tikai 1024x768 pikseļi. Tomēr atšķirība pirmajā pārbaudē nav pamanāma. Pateicoties "operētājsistēmas" 7. versijai, dažādu modeļu sīkrīku iespējas tiek izlīdzinātas. Tāpēc ne katrs lietotājs, veicot pirmo displeja pārbaudi, nemanīs, vai tas darbojas tīklenē, vai nē. Šķiet, ka vairākiem lietotājiem attēls uz mazas planšetdatora ir vēl iespaidīgāks. Ja paskatās uzmanīgi, ikonas patiešām ir asākas un kontrastainākas. Tomēr atšķirības tomēr nav iespaidīgas.

Tomēr, izveidojot savienojumu ar Wi-Fi tīklāju un palaižot Safari, kļūst acīmredzamas mini ar Retina priekšrocības:

  • Super skaidrs attēls.
  • Zīmēti simboli.
  • Lieliskas krāsas.
  • Augsta blīvuma attēls.
  • Lieliskas bildes, izmantojot programmatūru.

Bet pat ar šīm priekšrocībām atšķirību nevar saukt par ļoti nozīmīgu, kā tas ir klēpjdatoru vai personālo datoru gadījumā. Lietotāji, protams, gaidīja vairāk. Bet tomēr izstrādātājs darīja visu iespējamo un iemeta tirgū labu produktu. Acīmredzot jautājums ir par 7. versijas pienācīgajiem diagonālajiem un plānajiem fontiem. Pirmie lietotāji uzreiz pamanīja, ka krāsu vidū dominē dzeltens. Un vēlāk tas tika apstiprināts. Bet dzeltenā nokrāsa daudziem ir ļoti gaiša un nemanāma. Kamēr kāds nepievērsīs jūsu uzmanību šim faktam, visticamāk, jūs to nemanīsit.

Izrāde

Darbojas pilnekrāna versija, kuras pamatā ir A7 procesors. 64 bitu arhitektūra. Ir M7 kopprocesors. Visi šie parametri kopā parāda izcilus rezultātus. Par to sīkāk varat izlasīt tīklā. Planšetdators darbojas daudz ātrāk nekā parasts mini, un atšķirība ir visvairāk pamanāma parastās programmatūras palaišanas procesā. Mēs runājam par kameru, pārlūku, kartēm un tamlīdzīgi. Un pat tādi sociālie tīkli kā Facebook vienkārši “lido”.

Kad tiek palaista svarīga programmatūra, piemēram, Infinity Blade, ierīces aizmugure sasilst. Un apkure ir ļoti pamanāma. Tātad aukstajos gadalaikos mini var aizstāt plīti. Protams, sīkrīks nededzinās jūsu rokas, bet tas pārnes pietiekamu daudzumu siltuma.

Ierīce ietver bezvadu elementu standarta sarakstu, Wi-Fi, atbalsta 2 joslas 2,4 GHz un 5 GHz, ceturtā formāta Bluetooth. Pēc noklusējuma tas vienmēr ir aktīvs. Un tas ir iespējams, pateicoties operētājsistēmā iestrādātajai AirDrop funkcijai 7. Bet ņemiet vērā, ka informācijas apmaiņa ar datoriem no Apple nav iespējama, kas ir nedaudz nomākta.

IOS 7 specifikācijas

Kā tas bija ar Air versiju, mazais modelis tika piegādāts 4 modifikācijās - 16, 32, 64 un 128 GB. Bet bez tam ir versijas ar Wi-Fi un Wi-Fi + 4G. Ir tikai divi krāsu risinājumi.

Tādējādi pircējam ir pienācīga izvēle. Ir grūti pakavēties pie vienas lietas. Daudzi cilvēki izvēlas "zelta vidusceļu" - versiju ar 64 GB uz klāja un Wi-Fi + 4G. Tas ir labākais variants. Ja lietotājs plāno ierīcē uzglabāt pienācīgu daudzumu mūzikas, spēļu, satura.

AVplayer vienlaikus var augšupielādēt daudzas filmas. Bet, ja lietotājam paredzētais iPad ir tikai klēpjdatora aizstājējs, tas diezgan maksās planšetdatoru ar 16 GB. Zīmīgi, ka uzņēmums šajā ziņā joprojām dod lietotājam izvēli.

Kamera

Protams, fotogrāfēšana ir viena no planšetdatora papildu funkcijām. Bet tālu no galvenā. Tāpēc rāmju kvalitāte nav ideāla. Bet, ja šobrīd iPhone vai fotokamera nav pieejama, tas arī darīs. Protams, fotogrāfijas tevi nepievienos profesionāļa titulam, taču tās ir diezgan piemērotas augšupielādei sociālajos tīklos.

Ir filtri, kas ļauj maskēt ne pārāk labas kvalitātes fotoattēlus. Kameras izšķirtspēja ir 5 MP. Pašbildes elements - 1,2 MP.


secinājumi

Paredzot, kas var notikt ar iPad mini Retina nākamajā gadā, mēs varam pieņemt sekojošo. Protams, uzņēmums strādās, lai samazinātu ierīces izmēru un svaru. Visticamāk, tiks pievienots Touch ID un uzlabota kamera.

Kas attiecas uz cenām, to diapazons atkarībā no sīkrīka īpašajām īpašībām ir ļoti liels. Tātad, vislētākā tablete maksā apmēram 20 000 rubļu. Dārgu ierīču izmaksas sasniedz 35 000 rubļu. Versija ar 64 GB uz kuģa un 4G maksā apmēram 29 000-30 000 rubļu. Ja jums nav nepieciešama 4G tehnoloģija, lieliski, izbaudiet ietaupītos 4-5 tūkstošus.

Nākotnē vispieprasītākie modeļi būs sīkrīki ar 16 un 32 GB atmiņu. Droši vien. Pēc tiem būs palielināts pieprasījums.

Vai vispār Padina tīklenē ir daudz labāka? Protams, jā. Un tas nav tikai displejs. Modelim ir atšķirīgs procesors, parādījās variācija ar 128 GB atmiņu. Labāk dodieties uz veikalu un redziet to savām acīm. Bet tie, kas iepriekš nav izmantojuši mini, atšķirību neredzēs. Ar pirmās paaudzes planšetdatoriem viņiem viss būs kārtībā.

Kopumā mazā tablete ir viena no labākajām tirgū, ja ņem vērā visus tās izmērus. Un, ja lielais Air modelis, neskatoties uz lielā displeja skaistumu, jums neder, droši iegādājieties šo modeli.

Līdz ar Retina MacBook Pro un jaunā iPad izlaišanu ekrāni ar paaugstinātu pikseļu blīvumu ir sākuši ienākt mūsu dzīvē. Ko tas nozīmē tīmekļa izstrādātājiem?

Pirmkārt, sapratīsim terminoloģiju.

Fiziskie pikseļi

Fiziskie pikseļi(ierīces pikseļi vai fiziskais pikseļi) - pikseļi, pie kuriem esam pieraduši: jebkura displeja mazākie elementi, kuriem katram ir sava krāsa un spilgtums.

Ekrāna blīvums(Ekrāna blīvums) ir displeja fizisko pikseļu skaits. Parasti mēra pikseļos uz collu (PPI: pikseļi collā). Apple ar dubulto pikseļu blīvuma tīklenes displeju apgalvo, ka cilvēka acs nespēj atšķirt lielāku blīvumu.

CSS pikseļi


CSS pikseļi(CSS pikseļi) - abstrakta vērtība, ko pārlūkprogrammas izmanto, lai precīzi parādītu saturu lapās neatkarīgi no ekrāna (DIP: no ierīces neatkarīgi pikseļi). Piemērs:


Šāds bloks parastajos ekrānos aizņems 200x300 pikseļu laukumu, un Retina ekrānos tas pats bloks saņems 400x600 pikseļus. Tādējādi Retina ekrānos pikseļu blīvums ir 4 reizes lielāks nekā parastajos ekrānos:

Fizisko un CSS pikseļu attiecību var iestatīt šādi:
device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio (...)

Vai arī šādi:
ierīces pikseļu attiecība, -o-min-ierīces-pikseļu attiecība, min - moz-ierīces-pikseļu attiecība, -Webkit-min-ierīces-pikseļu attiecība (...)

Javascript jūs to varat sasniegt, izmantojot
window.devicePixelRatio

Rastra pikseļi



Rastra pikseļi(bitkartes pikseļi) - mazākās daļas, kas veido bitkarti (PNG, JPF, GIF utt.) Katrā pikseļos ir informācija par krāsu un atrašanās vietu attēla koordinātu sistēmā. Dažos formātos pikseļi var saturēt papildu informāciju, piemēram, caurspīdīgumu.

Papildus rastra izšķirtspējai attēliem internetā CSS pikseļos ir abstrakti izmēri. Pārlūks samazina vai izstiepj attēlu atbilstoši tā CSS platumam un garumam. Kad tas tiek parādīts parastā ekrānā, viens bitkartes pikselis atbilst vienam CSS pikseļam. Retina ekrānos katrs bitkartes pikselis tiek reizināts 4 reizes:

Optimizācija

Ir vairāki veidi, kā optimizēt grafiku attēlošanai tīklenes ekrānos. Katram no tiem ir savi plusi un mīnusi, katrā gadījumā ir jāizvēlas, kuram ir augstāka prioritāte: veiktspēja, ieviešanas vieglums, pārlūka atbalsts vai daži citi parametri.

HTML un CSS mērogošana

Visvienkāršākais veids, kā sagatavot grafiku Retina displejam, ir vienkārši uz pusi samazināt attēla fiziskos izmērus. Piemēram, lai parādītu 200x300 pikseļu fotoattēlu liela pikseļu blīvuma ekrānā, augšupielādējiet 400x600 pikseļu fotoattēlu un samaziniet to, izmantojot CSS atribūtus vai HTML parametrus. Tas tiks parādīts parastajā ekrānā:

Un tas tīklenē:

Ir vairāki veidi, kā ieviest HTML un CSS mērogošanu:

Html

Vieglākais veids ir vienkārši iestatīt img taga platuma un augstuma parametrus:

Kur izmantot: vienas lapas vietnēs ar vairākiem attēliem.

Javascript

Jūs varat sasniegt to pašu rezultātu, izmantojot Javascript, lai uz pusi samazinātu Retina ekrānu attēlu izmērus. Izmantojot jQuery bibliotēku, tas izskatās šādi:
$ (logs) .load (function () (var images = $ ("img"); images.each (funkcija (i) ($ (this) .width ($ (this) .width () / 2);) );));

Kur izmantot: vietnēs, kuru saturā ir vairāki attēli.

CSS (SCSS)

Ir arī iespējams izmantot attēlu kā fonu ar vēlamo fona lielumu konkrētam div "a. Fona lieluma parametrs netiek atbalstīts IE 7 un 8.
.image (fona attēls: url ( [e-pasts aizsargāts]); fona lielums: 200 pikseļi 300 pikseļi; / * Alternatīvi fona lielums: satur; * / augstums: 300 pikseļi; platums: 200px; )

Varat izmantot: pirms vai: pēc pseidoelementiem
.image-container: before (fona attēls: url ( [e-pasts aizsargāts]); fona lielums: 200 pikseļi 300 pikseļi; saturs: ""; displejs: bloks; augstums: 300 pikseļi; platums: 200px; )

Tehnika darbojas arī, lietojot sprites:
.icon (fona attēls: url ( [e-pasts aizsargāts]); fona lielums: 200 pikseļi 300 pikseļi; augstums: 25px; platums: 25px; & .trash (background-position: 25px 0;) & .edit (background-position: 25px 25px;))

Kur izmantot: vietnēs ar ierobežotu skaitu fona attēlu (piemēram, viens kā sprite).

HTML un CSS mērogošana: plusi

  • Īstenošanas vienkāršība
  • Vairāku pārlūku saderība

HTML un CSS mērogošana: mīnusi

  • Ierīces ar parastajiem ekrāniem lejupielādēs papildu megabaitus
  • Parastajos ekrānos attēla skaidrība var ciest no saspiešanas algoritmiem
  • Fona lieluma parametrs netiek atbalstīts IE 7 un 8.

Ekrāna pikseļu blīvuma noteikšana



Tas, iespējams, ir vispopulārākais veids, kā optimizēt grafiku Retina displejiem. Tiek izmantota CSS vai Javascript.

CSS

Šajā metodē tiek izmantota ierīces un pikseļu attiecība, lai iestatītu vēlamo attiecību starp fiziskajiem un CSS pikseļiem:
.icon (background-image: url (example.png); background-size: 200px 300px; augstums: 300px; platums: 200px;) Tikai @ media ekrāns un (-Webkit-min-device-pixel-ratio: 1.5), tikai ekrāns un (-moz-min-device-pixel-ratio: 1.5), tikai screen un (-o-min-device-pixel-ratio: 3/2), tikai screen un (min-device-pixel-ratio: 1.5) (.ikon (fona attēls: url ( [e-pasts aizsargāts]); } }

Kur izmantot: vietnēs vai lietojumprogrammās, kurās dizaina elementiem tiek izmantots fona attēls. Nav piemērots attēliem saturā.

plusi

  • Vairāku pārlūku saderība

Mīnusi

  • Nogurdinoši ieviest, it īpaši lielās vietnēs
  • Satura attēla izmantošana kā fons ir semantiski nepareiza

Javascript

To pašu rezultātu var sasniegt, izmantojot window.devicePixelRatio:
$ (document) .ready (function () (if (window.devicePixelRatio> 1) (var lowresImages = $ ("img"); images.each (funkcija (i) (var lowres = $ (this) .attr (" src "); var highres = lowres.replace (". "," @ 2x. "); $ (this) .attr (" src ", highres);));)));

Ir īpašs Javascript spraudnis Retina.js, kas var paveikt visu iepriekš minēto, bet ar papildu funkcijām, piemēram, izlaist ārējos attēlus un izlaist iekšējos, bet ne tīklenes kopijas.

Kur izmantot: jebkurās vietnēs, kuru saturā ir attēli.

plusi

  • Īstenošanas vienkāršība
  • Ierīces nelādē nevajadzīgus attēlus
  • Pikseļu blīvuma kontrole vietnē

Mīnusi

  • Tīklenes ierīces lejupielādē katra attēla abas versijas
  • Attēlu izkrāpšana ir pamanāma tīklenes ierīcēs
  • Nedarbojas dažās populārās pārlūkprogrammās (IE un Firefox)

Mērogojama vektorgrafika


Neatkarīgi no izmantotās metodes, bitkartes pēc savas būtības joprojām ir ierobežotas. Šeit vektorgrafika var mums palīdzēt. SVG (Scalable Vector Graphics) uz XML balstītu formātu atbalsta lielākā daļa pārlūkprogrammu. Vieglākais veids, kā izmantot SVG attēlus, ir tagā img vai fona attēlā un saturā: url () CSS parametri.

Šajā piemērā vienkāršu SVG attēlu var mērogot pēc vēlēšanās:

Tas pats notiek ar CSS:
/ * Fona attēla izmantošana * / .image (background-image: url (example.svg); background-size: 200px 300px; augstums: 200px; platums: 300px;) / * Satura izmantošana: url () * / .image - konteiners: pirms (saturs: URL (piemērs.svg); / * platums un augstums nedarbojas ar saturu: URL () * /)

Lai atbalstītu IE 7 vai 8 un Android 2.x, būs jāizmanto aizstājēji PNG attēli. To var viegli izdarīt, izmantojot Modernizr:
.image (background-image: url (example.png); background-size: 200px 300px;) .svg (.image (background-image: url (example.svg);))

Lai panāktu labāku savstarpēju pārlūkprogrammu savietojamību, lai izvairītos no rastrēšanas problēmām Firefox un Opera, katram SVG attēlam ir jāatbilst tā vecākajam HTML elementam.

HTML kodā varat ieviest līdzīgu, izmantojot tagā vēlamos datus:

Izmantojot jQuery un Modernizr:
$ (document) .ready (function () (if (! Modernizr.svg) (var images = $ ("img"); images.each (funkcija (i) ($ (this) .attr ("src", $ (tas) .dati ("png-rezerves"));));)));

Kur izmantot: jebkurā vietnē, kas piemērota ikonām, logotipiem un vienkāršām vektoru ilustrācijām.

plusi

  • Viens attēlu komplekts visām ierīcēm
  • Īstenošanas vienkāršība
  • Bezgalīga mērogošana

Mīnusi

  • Nav perfektu pikseļu anti-aliasing
  • Nav piemērots sarežģītai grafikai lieli izmēri failu
  • Nav vietējā atbalsta IE 7, 8 un vecākās Android versijās

Ikonu fonti



Populārs, pateicoties
Saistītie raksti