Adaptarea aspectului pentru ecranele retină. Adaptarea aspectului pentru ecranele retinei Cum să dispuneți pentru retină

Acum, odată cu marea popularitate a MacBook-urilor, iPhone-urilor și a altor dispozitive cu DPI ridicat, imaginile de pe site trebuie optimizate astfel încât să nu fie neclare. Pentru aceasta avem mai multe soluții. Cele mai populare sunt crearea unui font de pictogramă sau utilizarea SVG. Dar ce se întâmplă dacă nu poți sau nu vrei să te ocupi de asta sau îți place cu adevărat PNG. Bineînțeles că există o soluție. Sub forma unui plugin pentru Photoshop, js library și sass/less/stylus mixin.

Teoria pregătirii site-ului web pentru ecrane Retina

Voi explica cu propriile mele cuvinte. Datorită faptului că densitatea punctelor de pe ecranele de retină este mai mare, imaginea apare neclară (pentru că este întinsă). Pentru a depăși acest lucru, trebuie să utilizați o imagine de 2 sau 3 ori mai mare decât originalul și să o scalați folosind html și css la dimensiunea x1. Apoi imaginea va arăta grozav pe ecranele retină. Dar pentru a face acest lucru, trebuie mai întâi să tăiați 2 sau 3 dimensiuni de imagini și apoi să utilizați biblioteca js și mixin-ul în preprocesor (pentru comoditate). Să începem cu începutul...

Pluginul Photoshop Retinize It

După cum este scris pe site-ul web oficial: „Cel mai bun plugin Photoshop pentru optimizarea graficii site-ului pentru ecranele iOS și Retina.” Îl puteți descărca de pe pagina proiectului.

Pluginul reprezintă acțiuni înregistrate care pot fi redate prin taste rapide sau elemente de meniu. Plugin-ul selectează straturi, creează un fișier nou cu ele, decupează (muchii de tăiere) și salvează imaginea în 1, 2 sau 3 dimensiuni.

Este ușor să lucrezi cu:

Selectați straturi sau grup de straturi
Lansați Retinize It (puteți adăuga o comandă rapidă de la tastatură)
Denumiți-vă fișierele
Obțineți imaginile tăiate

Folosind retina.js pentru etichetele img

Totul este simplu aici, conectăm biblioteca js și va determina dacă imaginea trebuie încărcată pentru ecranele retină. Dacă este necesar, linkul către fișierul sursă este înlocuit cu ***@2x.*** sau ***@3x.*** .

Mixin pentru mai puțin

Odată conectat, acesta va fi disponibil pentru utilizare. Scriind următoarele: .at2x(@path, @width, @height); (în loc de @path, @width și @height, trebuie să scrieți calea către imagine și dimensiunile acesteia).

#logo ( .at2x ("/images/my_image.png" , 200px , 100px ) ; )

Acest mixin se va extinde ca:

#logo ( imagine de fundal : cale : / assets / img / url("/images/my_image.png") ; ) @media all și (-webkit-min-device-pixel-ratio: 1.5 ) ( #logo ( fundal -image : cale : / assets / img / url("/images/ [email protected]") ; dimensiunea fundalului: 200px 100px ; ))

Puteți citi mai multe despre retina.js și mixins

Dezvoltare de aplicații mobile

Traducere

Odată cu lansarea recentă a Retina MacBook Pro și a noului iPad, 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

Pixelii fizici (pixelul dispozitivului sau pixelul fizic) sunt 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 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ă distingă o densitate mai mare.

pixeli CSS

Pixelii CSS sunt 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:

Un astfel de bloc pe ecranele obișnuite va ocupa o suprafață de 200x300 pixeli, iar pe ecranele Retina același bloc va primi 400x600 pixeli. Astfel, pe ecranele Retina densitatea pixelilor este de 4 ori mai mare decât pe cele obișnuite:

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

Pixelii bitmap sunt cele mai mici părți care alcătuiesc o imagine raster (PNG, JPF, GIF etc.) Fiecare pixel conține informații despre culoare și locație în sistemul de coordonate al imaginii. În unele formate, un pixel poate conține informații suplimentare, cum ar fi transparența.

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 Există mai multe moduri de a optimiza grafica pentru afișarea pe ecranele Retina. Fiecare are atât avantaje, cât și dezavantaje, este necesar în fiecare caz specific să alegeți ceea ce are o prioritate mai mare: performanță, ușurință de implementare, suport pentru browser sau alți parametrii scalare HTML și CSS Cel mai simplu mod de a pregăti grafica pentru un afișaj Retina este pur și simplu împărțiți dimensiunile fizice ale imaginii în jumătate. De exemplu, pentru a afișa o fotografie de 200x300 pixeli pe un ecran cu o densitate crescută de pixeli, ar trebui să încărcați o fotografie de 400x600 pixeli și să o reduceți folosind atribute CSS sau parametri HTML. Iată cum va arăta pe un ecran obișnuit:

Și asta pe Retina:

Există mai multe moduri de a implementa scalarea HTML și CSS:

HTML Cel mai simplu mod este să setați pur și simplu parametrii de lățime și înălțime la eticheta img:

Unde se utilizează: pe site-uri cu o singură pagină cu mai multe imagini.

Javascript Același rezultat poate fi obținut utilizând Javascript pentru a reduce la jumătate dimensiunile imaginii pentru ecranele Retina. Folosind biblioteca jQuery, arată astfel:
$(window).load(function() ( var imagini = $("img"); images.each(function(i) ( $(this).width($(this).width() / 2); ) ); ));

Unde se utilizează: pe site-uri cu mai multe imagini în conținut.

CSS (SCSS) De asemenea, puteți utiliza o imagine ca fundal cu dimensiunile necesare (dimensiunea fundalului) unui anumit div. Parametrul dimensiunea fundalului nu este acceptat în IE 7 și 8.
.image ( imagine de fundal: url( [email protected]); dimensiunea fundalului: 200px 300px; /* Alternativ, dimensiunea fundalului: conține; */ inaltime: 300px; latime: 200px; )

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; înălțime: 300px; latime: 200px; )

Tehnica funcționează și atunci când utilizați sprite-uri:
.pictogramă ( imagine de fundal: url( [email protected]); dimensiunea fundalului: 200px 300px; înălțime: 25px; latime: 25px; &.trash (poziția de fundal: 25px 0; ) &.edit (poziția de fundal: 25px 25px; ) )

Unde se utilizează: pe site-uri cu un număr limitat de imagini de fundal (de exemplu, una ca sprite).

Scalare HTML și CSS: avantaje

Ușurință de implementare
Compatibilitate între browsere

Scalare HTML și CSS: contra

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
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. Folosește CSS sau Javascript.CSS Această metodă folosește device-pixel-ratio pentru a seta raportul dorit între pixelii fizici și CSS:
.pictogramă ( imagine de fundal: url(example.png); dimensiunea fundal: 200px 300px; înălțime: 300px; lățime: 200px; ) ecran numai @media ș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( [email protected]); } }

Unde se utilizează: pe site-uri web sau aplicații care utilizează imaginea de fundal pentru elemente de design. Nu este potrivit pentru imagini din conținut.

pro

Compatibilitate între browsere

Minusuri

Obositor de implementat, mai ales pe site-urile mari
Utilizarea unei imagini de conținut ca fundal este incorectă din punct de vedere semantic

Javascript Același rezultat poate fi obținut folosind 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."); attr("src", highres ));

Există un plugin special de Javascript Retina.js, care poate face tot ceea ce este descris mai sus, dar cu caracteristici suplimentare, cum ar fi sărirea peste imaginile externe și sărirea peste copiile interne, dar nu și copiile retinei.

Unde se utilizează: pe orice site-uri cu imagini în conținut.

pro

Ușurință de implementare
Dispozitivele nu descarcă imagini inutile
Controlul densității pixelilor pe un site web

Minusuri

Dispozitivele Retina descarcă ambele versiuni ale fiecărei imagini
Modificarea imaginii este vizibilă pe dispozitivele cu retină
Nu funcționează în unele browsere populare (IE și Firefox)

Grafică vectorială scalabilă
Indiferent de metoda utilizată, imaginile raster, prin natura lor, rămân limitate în scalare. Aici ne poate ajuta grafica vectorială. SVG (Scalable Vector Graphics) este un format bazat pe XML acceptat de majoritatea browserelor. Cel mai simplu mod de a utiliza imagini SVG este într-o etichetă img sau cu parametrii CSS background-image și content:url().

Î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:

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 utilizează: pe orice site web, potrivit pentru icoane, logo-uri și ilustrații vectoriale simple.

pro

Un singur set de imagini pentru toate dispozitivele
Ușurință de implementare
Scalare infinită

Minusuri

Fără anti-aliasing precis de la pixel la pixel
Nu este potrivit pentru grafice complexe din cauza dimensiunilor mari ale fișierelor
Nu există suport nativ în IE 7, 8 și versiunile anterioare de Android

Fonturi pentru pictograme

Popular datorită

Astăzi vom puncta toate i-urile referitoare la ecranele Retina. Cea mai simplă explicație este că Retina este un afișaj de înaltă rezoluție. Cu toate acestea, nu numai produsele Apple au astfel de afișaje. „Afișajul Retina” este doar un termen inventat de Apple, de asemenea, telefoanele, tabletele și monitoarele folosesc tehnologie de înaltă definiție. Astăzi, astfel de afișaje devin din ce în ce mai frecvente, așa că este important să creați site-uri și aplicații care să le susțină bine.

Acestea fiind spuse, permiteți-mi să vă explic ce sunt imaginile pregătite pentru Retina, de ce merg mână în mână cu designul responsive și cum să creați astfel de imagini pentru design responsive.

Ce înseamnă afișajul Retina?

Display Retina este marca Apple pentru ecrane cu cristale lichide cu densitate mare de pixeli. Imaginea de mai jos ilustrează într-un mod simplificat modul în care aspectul pixelilor diferă între un afișaj cu rezoluție obișnuită și un afișaj Retina. Cu ecranele Retina obțineți de două ori mai mulți pixeli în spațiu de aceeași dimensiune decât un afișaj obișnuit. Acesta este motivul pentru care pictogramele sau textul de pe iPad 2 arată mai rău decât pe iPad 3.

iPad 3/4 are o rezoluție de 264 de pixeli pe inch, iar iPhone 4/5 326, în timp ce un monitor obișnuit are aproximativ 100 de pixeli pe inch, ceea ce oferă o diferență de 2,6 și, respectiv, de 3,2 ori. S-a spus de 2 ori pentru simplificare.

Dilemă

Designerii și dezvoltatorii au acum mai multe tipuri de afișare din care să aleagă. Aceasta înseamnă următoarele 2 lucruri: utilizatorii cu ecrane Retina vor trebui să se mulțumească cu imagini prost afișate pe site-urile care nu acceptă Ratina, pe de altă parte, pe site-urile care au un astfel de suport, totul va arăta foarte calitativ, clar, exact așa cum iubim și ne așteptăm.

De ce este importantă Retina pentru designul receptiv?

Răspunsul la această întrebare este foarte simplu: majoritatea dispozitivelor mobile moderne au ecrane Retina, așa că creați un site web responsive pentru ele, ar trebui să aveți grijă și de suportul Ratina pentru ca site-ul dvs. să arate perfect. Dacă site-ul arată bine, atunci utilizatorul va primi mai multă satisfacție.

Cum se creează imagini pregătite pentru Retina pentru design responsive?

Există mai multe moduri și instrumente pentru aceasta. Vom lua în considerare doar cele principale, deoarece ele rezolvă cel mai bine problema.

SVG

Sunt sigur că ești deja familiarizat cu formatul SVG. E păcat dacă nu. Dar, în orice caz, să repetăm. SVG este un format de imagine cu grafică vectorială care, prin utilizarea vectorilor, poate fi mărit la orice dimensiune fără pierderea calității. Deoarece vectorii formează o formă specifică și nu o colecție de pixeli, aceștia pot fi manipulați în orice mod posibil și vor arăta în continuare neatinse și clare. Din păcate, formatele raster precum JPG, PNG sau GIF nu se pot lăuda cu acest lucru.

Datorită capacității sale unice de a redimensiona fără probleme, SVG este un format excelent pentru design responsive. Indiferent de dimensiunea afișajului, imaginile vor arăta impecabil pe telefon sau tabletă, precum și pe monitor. Acest lucru funcționează și pentru ecranele Retina, imaginile SVG vor arăta la fel după schimbarea la densitatea pixelilor. Prin urmare, ar trebui să utilizați SVG ori de câte ori este posibil.

Fotografii și bitmap-uri

Desigur, nu toate imaginile pot fi în format SVG, mai ales dacă este o fotografie sau o imagine raster gata făcută. Există și o soluție pentru acest caz, și constă în afișarea imaginii cu dimensiuni laterale de 50%. Ce vreau să spun? Să presupunem că trebuie să postezi o fotografie cu o dimensiune de 150x150, iar pentru aceasta folosești o imagine cu o dimensiune de 300x300, dar o afișați ca 150x150. În acest caz, imaginea de pe afișajul Retina va arăta clară și de înaltă calitate.

Există mai multe modalități de a utiliza imagini duble pe site-ul dvs.: prin HTML, CSS sau JS. Nu vom intra în prea multe detalii, ci doar privim metodele de bază.

Prima cale. Aveți o imagine de 300x300 și o lipiți în HTML și specificați o lățime și înălțime de 150 de pixeli.

A doua cale. Puteți modifica înălțimea și lățimea imaginii prin CSS sau puteți specifica 50% dacă sunteți sigur că aveți nevoie de o imagine înjumătățită.

Imagine( lățime: 50%; înălțime: 50%; ) .box img( lățime: 150px; înălțime: 150px; )

A treia cale. Dacă trebuie să utilizați o astfel de imagine ca imagine de fundal, veți avea nevoie de următorul stil:

Casetă( imagine de fundal: url(myIMG.png); dimensiunea de fundal: 150px 150px; )

Dar această metodă are și dezavantajele ei. În primul rând, nu puteți lua o imagine mărită de 2x din aer. Evident, pur și simplu mărirea unei imagini și apoi folosirea ei nu va funcționa! În plus, dacă site-ul tău are multe imagini, sau unele dintre imagini sunt pur și simplu foarte mari, atunci cu această metodă timpul de încărcare a site-ului poate crește semnificativ. Mai ales având în vedere că majoritatea dispozitivelor mobile au o conexiune la Internet foarte mediocră, cu lățime de bandă redusă.

Dar există și modalități de a evita acest lucru.

Interogări media

Când scrieți interogări media CSS, vă permit să utilizați mai mult decât înălțimea și lățimea ecranului dispozitivului. Următorul cod vă permite să determinați cu încredere dacă dispozitivul are un afișaj Retina. Această metodă este cea mai bună atunci când utilizați imagini de fundal pentru div-uri, interogarea media o poate înlocui pur și simplu cu o imagine mai mare. În acest caz, imaginile mari se vor încărca numai pentru dispozitivele cu ecrane Retina.

@media numai ecran și (-webkit-min-device-pixel-ratio: 2), numai ecran și (min--moz-device-pixel-raport: 2), numai ecran și (-o-min-device-pixel -raport: 2/1), numai ecran și (raport min-dispozitiv-pixel: 2), numai ecran și (rezoluție minimă: 192 dpi), numai ecran și (rezoluție minimă: 2dppx) ( /* CSS pentru Retina dispozitive */)

Retina.js

Dacă dintr-un motiv oarecare nu sunteți mulțumit de soluția de interogare media, atunci luați în considerare opțiunea JS. Aici ne vom uita la un plugin JavaScript pentru a ne rezolva problema. „Retina.js este un script open source care facilitează difuzarea imaginilor de înaltă rezoluție pentru ecranele Retina.” Acest plugin funcționează astfel: dacă aveți 2 imagini, una de dimensiune normală și cealaltă de două ori mai mare, retina.js detectează utilizarea afișajului Retina și folosește imaginea corespunzătoare. Funcționează foarte simplu, așa că asigurați-vă că îl încercați. Tot ce trebuie să faceți pentru ca pluginul să funcționeze este să denumiți corect imaginile.

icoane

Datorită @font-face și fonturilor care folosesc pictograme în loc de litere, le puteți folosi cu ușurință în loc de imagini. Îmi place foarte mult această metodă din următoarele motive: În primul rând, fonturile sunt foarte scalabile, la fel ca SVG, deci sunt potrivite nu numai pentru diferite dimensiuni de ecran, ci și pentru diferite rezoluții, așa cum este cazul Retina.

În zilele noastre există tot mai multe dispozitive echipate cu ecrane cu densitate crescută de pixeli, așa că acest lucru ar trebui să fie luat în considerare la proiectarea site-urilor moderne (în special site-uri promoționale, pagini de destinație etc.).

Nu voi aprofunda în teorie, ci voi vorbi doar despre aplicarea practică a unor tehnici.

Principalul motiv pentru imaginile neclare de pe ecranele retină este informația insuficientă. deoarece un pixel al imaginii este mapat pe patru pixeli fizici. Cu alte cuvinte, toate deciziile se rezumă la a face imaginile de 2 ori mai mari, sau astfel încât să fie afișate de 2 ori mai mici (imaginea nu este scalată pe ecranele retină).

Soluția 1 folosind html

utilizați o imagine de 2 ori mai mare, specificând greu parametrii de lățime și înălțime

imaginea example2x.png ar trebui să fie 200x400

Soluția 1 folosind JavaScript

Metoda este similară cu prima, dar puțin automatizată

$(window).load(function() ( var imagini = $("img"); images.each(function(i) ( $(this).width($(this).width() / 2); ) ); ));

Soluția 1 folosind CSS

Dacă trebuie să specificați dimensiunile pentru fundal și nu pentru imagine, atunci acest lucru se poate face după cum urmează:

Imagine ( imagine de fundal: url(example2x.png); dimensiunea fundal: 100px 200px; /* Alternativ, dimensiunea fundalului: conține; */ lățime: 100px; înălțime: 200px; )

Dar parametrul dimensiunea fundalului nu este acceptat în IE 7 și 8.

Și după cum puteți vedea, fiecare dintre soluțiile de mai sus necesită încărcarea unei imagini de două ori mai mare, indiferent dacă este un simplu ecran sau unul cu retină, ceea ce nu este bine.

Prin urmare, ar trebui să utilizați 2 imagini, una pentru ecrane simple și a doua pentru ecrane retină.

Soluția 2 folosind CSS

Acest lucru se aplică în primul rând imaginilor de fundal.

Pictogramă ( imagine de fundal: url(example.png); lățime: 100px; înălțime: 200px; ) ecran numai pentru medii și (-Webkit-min-device-pixel-raport: 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 (raport min-dispozitiv-pixel: 1,5),
numai ecran și (min--moz-device-pixel-raport: 1,5),
numai ecran și (rezoluție minimă: 1,5 dppx)( .pictogramă ( imagine de fundal: url(example2x.png); ) )

unde imaginea example.png are dimensiunile 100x200, iar imaginea example2x.png are dimensiunile 200x400

Soluția 2 folosind JavaSctipt

Înlocuiți imaginile cu altele mai mari dacă este necesar:

$(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 ));

Da, și ca o concluzie aș dori să adaug că retina display nu este un nume complet corect, pentru că Acesta este un termen de marketing pentru Apple și se referă oficial doar la tehnologia sa. Cu toate acestea, acum este folosit pentru toate ecranele cu densitate mare de pixeli.

După apariția dispozitivelor cu afișaje de înaltă rezoluție, de exemplu, iPhone, iPad, Samsung Galaxy Note II și, bineînțeles, MacBook Pro cu ecran Retina, dezvoltatorii web și bloggerii s-au confruntat cu întrebarea cum ar fi site-urile lor. afișați în mod normal pe aceste dispozitive. Mai jos vă voi spune cum am adăugat suport pentru afișaje de înaltă rezoluție pe site-urile mele.

Afișaje retină de înaltă rezoluție

În primul rând, trebuie să clarificăm ce sunt afișajele de înaltă rezoluție (Retina este numele de marketing pentru afișajele de înaltă rezoluție utilizate în tehnologia Apple). Ecranele convenționale, de exemplu pe un laptop de 15 inchi, au o rezoluție a ecranului de 1440x900. Aceasta înseamnă că matricea monitorului este formată din pixeli (puncte) și această matrice are 1440 de puncte în lungime și 900 de puncte în înălțime.

Totul este simplu, dar odată cu apariția afișajelor de înaltă rezoluție totul a devenit puțin mai complicat. Pentru ca ochiul uman să vadă nu pixeli, ci imagini, ca pe paginile unei reviste sau într-o fotografie reală, au apărut display-uri care, pentru aceiași 15 inci, au o rezoluție fizică a ecranului de 2880 × 1800 pixeli. Exact de două ori mai mult decât un monitor obișnuit. Când se afișează grafică vectorială, de exemplu, elemente de interfață, fonturi, cadre realizate folosind CSS pe pagini web, totul arată frumos și minunat, dar când se afișează grafică raster, adică imagini, nu totul este atât de neted.

Problemă cu afișarea graficelor raster

Pe monitoarele obișnuite, pe monitor va fi afișată și o imagine de 300 x 200 pixeli - 300x200, desigur, dacă nu este scalată. Pe matricele de înaltă rezoluție, o imagine de 300 x 200 poate fi afișată în două moduri.

Ca o imagine cu o rezoluție de 600x400 pixeli, atunci va ocupa exact aceeași cantitate de spațiu pe ecran ca pe un monitor obișnuit.
Ca o imagine cu o rezoluție de 300×200, dar apoi va ocupa jumătate din spațiu pe un monitor de înaltă rezoluție decât pe unul obișnuit. Adică va avea jumătate din dimensiune, deoarece afișajele de înaltă rezoluție, având rezoluția de două ori, au aceeași dimensiune ca și afișajele obișnuite.

Opțiunea implicită la afișarea site-urilor web este prima - toate imaginile au dimensiunea dublată. Din această cauză, toate imaginile de pe site: fotografiile, și mai ales icoanele și logo-urile, devin neclare, un exemplu despre care l-am dat la începutul articolului.

Pentru ca site-ul dvs. să fie afișat perfect pe toate dispozitivele, inclusiv pe cele cu afișaj de înaltă rezoluție, este suficient să stocați toate imaginile la dimensiunea de două ori mai mare și să indicați dimensiunea actuală de afișare în html:

sau în CSS:

Clasa de imagine ( imagine de fundal: url(/image-600x400.png); dimensiunea de fundal: 300px 200px; )

Aceasta este cea mai simplă metodă, dar are un dezavantaj - imagini de două ori mai mari vor fi oferite tuturor utilizatorilor, inclusiv celor cu afișaje obișnuite. Ele vor fi afișate în mod normal, la fel ca imaginile obișnuite, dar încărcarea unor astfel de imagini necesită de două ori mai mult trafic, ceea ce este rău pentru viteză și optimizare, deci este mai bine să nu faceți acest lucru.

Soluţie

Pentru a oferi imagini obișnuite utilizatorilor cu afișaje obișnuite și imagini de două ori mai mari pentru utilizatorii de înaltă rezoluție, folosesc JavaScript retina.js. Scriptul original se află pe retinajs.com, dar în unele locuri au fost necesare editări care sunt deja prezente în versiunea mea a scriptului.

Acest script verifică când se încarcă pagina pentru a vedea dacă dispozitivul dvs. are un afișaj de înaltă rezoluție și, dacă da, dacă serverul dvs. are aceleași imagini, dar cu un nume care se termină în @2x (aceasta este denumirea standard pentru o imagine de două ori mai mare decât dimensiune, pentru dispozitivele Retina). Adică, pentru o imagine src="http://site.com/images-directory/image.png" scriptul va verifica prezența http://site.com/images-directory/ [email protected], iar dacă această imagine este găsită, o va afișa pe pagină, setând valorile necesare pentru lățime și înălțime (lățime și înălțime).

Pentru a utiliza scriptul, încărcați-l pe server și specificați-l cât mai aproape de eticheta de închidere posibil:

Pentru cei care folosesc un preprocesor CSS (mai puțin), un mixin poate fi util pentru a nu mai copia și lipi.

Dacă găsiți o greșeală sau aveți întrebări, nu uitați să scrieți despre ea în comentarii.