În Tips & Tricks

Soluții pentru redarea imaginilor pe Retina Display

display tip retina

Printre cele mai apreciate elemente inovative ale noilor dispozitive mobile, un loc detașat îl are Retina Display, adică acel tip de ecran care are capacitatea de a reda elementele media la o rezoluție foarte înaltă. Ecranele Retina au o dublă densitate a pixelilor, variind între 220 PPI și 326 PPI. Se impune deci o adaptare a imaginilor pentru acest mod de afișare.

Termenul „Retina”, folosit cu acest sens, a fost introdus și patentat de cei de la Apple. Deşi este bine că există pe piață produse care pot afişa imagini la o asemenea calitate, asta înseamnă totodată că sunt şanse ca elementele media care se găsesc în prezent pe un site să devină neatrăgătoare în ochii celor care folosesc asemenea dispozitive.

Dar înainte de a vă încărca serverele cu imagini de o rezoluție foarte mare, este recomandat să țineți cont că odată cu rezoluția crește și cantitatea de date transferate, ceea ce înseamnă că site-ul se va încărca mai lent. Deci alegeți cu atenție elementele pe care le doriți expuse la o rezoluție înaltă.

Odată ce v-ați hotărât asupra acestor aspecte, trebuie văzut ce soluție de ajustare a imaginilor pentru Retina Display este mai potrivită pentru voi. Vorbim astăzi despre patru dintre acestea.

CSS Media Queries

Una dintre metodele prin care puteți adapta elementele media de pe site pentru ecranele Retina este reprezentată de Media Queries în CSS, astfel că imaginile vor fi redate la rezoluții diferite, în funcție de ecranul dispozitivului de pe care sunt accesate.

css_media_queries

Cu alte cuvinte, dacă dispozitivul folosit este prevăzut cu Retina Display, acel Media Query îi va spune browserului că vrem ca regula să se aplice tuturor tipurilor de media, pentru anumite valori minime ale rezoluției ecranului.

În principiu, dacă vreți să targetați ecranele Retina, ar trebui să fie în regulă dacă setați min-device-pixel-ratio: 2 și min-resolution: 192dpi. Dacă țintiți ecrane cu o rezoluție mult mai mare, așa cum au unele tablete, atunci puteți seta min-device-pixel-ratio:1.25, iar
min-resolution: 200 dpi.

Avantaje:

  • Compatibilitate cu toate browserele moderne;
  • Control cu precizie la pixel (pixel-precise control).

Dezavantaje:

  • Greu de implementat pe site-urile foarte mari.

Icon Fonts

O altă soluție pentru a reda elemente grafice de o calitate cât mai înaltă pe ecrane Retina este utilizarea de icon fonts. Există o multitudine de asemenea fonturi, dintre care puteți alege simbolurile grafice cele mai potrivite pentru conținutul prezent la voi pe site.

icon_fonts

Folosind regula @font-face, puteți insera simbolurile dorite într-o clasă aparte, modificându-le ulterior culoarea și dimensiunea, după plac. Cea mai simplă variantă de a folosi astfel de fonturi este să atribuiți o clasă .icon sau .glyph unui element html particular (de regulă, span), iar apoi să folosiți litera din font corespunzătoare simbolului ca și conținut.
Spre exemplu, dacă dintr-un anumit font vrem să folosim simbolul corespunzător literei m, vom avea:

<span class="icon">m<span>

Avantaje:

  • Afișare corespunzătoare la orice mărime;
  • Mărimea mică a fișierelor (spre deosebire de imaginile raster);
  • Compatibilitate cu aproape toate browserele (mai puțin Opera Mini sau Windows Phone 7).

Dezavantaje:

  • Control mai puțin precis decât în cazul Media Query;
  • O singură culoare;
  • Greu de întreținut pe termen lung: schimbarea unui singur simbol necesită schimbarea întregului font.

SVG-uri

O altă soluție o reprezintă folosirea SVG-urilor (Scalable Vector Graphics), ele fiind scalabile la orice dimensiune, indiferent de rezoluție, fără a-și pierde calitatea. Formatul SVG este potrivit pentru imagini gen icoane UI și de navigare, logo-uri, pattern-uri, grafice, hărți și fundaluri care se repetă, dar nu și pentru imaginile mai complexe, ca de exemplu fotografiile.

Fișierele SVG se pot folosi la fel ca orice alt tip de imagine, prin tag-ul <img> sau ca imagini de fundal folosind CSS. În plus, se pot include și „inline” în codul HTML, ceea ce le dă posibilitatea de a fi afectate de CSS și JavaScript.

svg comparatie

Avantaje:

  • Compatibilitate cu toate browserele moderne;
  • Mărimea mică a fișierelor;
  • Nu se alterează calitatea datorită rezoluției, redimensionării sau nivelului de zoom.

Dezavantaje:

  • Nu se pretează pentru imaginile complexe cu un număr de obiecte foarte mare (cum ar fi ilustrațiile artistice sau fotografiile), deorece îngreunează timpul de randare și dimensiunea fișierului poate deveni mai mare decât un PNG sau JPG echivalent.

Unelte dedicate

Pentru persoanele mai comode, există unelte dedicate care, cu ajutorul unor scripturi special create, ajustează imaginile în funcție de rezoluția dispozitivelor de pe care sunt accesate.

adaptive_images

Astfel, efortul cel mai mare pe care trebuie să îl depuneți este în faza de instalare, apoi tool-ul se ocupă de ajustarea imaginilor. Un astfel de tool este Adaptive Images care, odată instalat, va detecta rezoluția ecranului dispozitivului de pe care este accesat un site și, în funcție de aceasta, va redimensiona automat imaginile prezente pe pagina respectivă.

Avantaje:

  • Comoditate;
  • Ușor de instalat, poate fi folosit și de persoane mai puțin tehnice.

Dezavantaje:

  • Nu funcționează dacă nu există PHP pe server;
  • Nu ai control asupra variantelor de dimensiuni;
  • Nu funcționează dacă folosiți un Content Delivery Network.

Găsiți aici o serie de resurse utile despre aceste soluții: