Pixel ratio css – Ottimizzare immagini

display-pixel-ratio-css

Gli smartphone moderni hanno una densità pixel molto elevata, alcuni superano i 300 dpi  (punti per pollice), che sarebbe anche la risoluzione giusta che supera il limite dell’occhio umano, per cui non vedremo più i quadratini dei pixel neanche sforzandoci e avvicinandoci al dispositivo.

A queste altissime risoluzioni e densità di pixel, un testo di 16 px, se riportato con rapporto pixel punti di 1 a 1, si vedrebbe piccolissimo. Per cui i dispositivi hanno un sistema di traduzione dei pixel, che non è più:

  • 1 pixel = 1 punto sul dispositivo

bensì tale rapporto è raddoppiato:

  • 16pixel diventano 32 sul dispositivo ad alta risoluzione

Documentazione ufficiale Css 2.1 Specification

Tale concetto viene riportato nella documentazione ufficiale in questo modo:

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.


Leggi anche: Creare immagini pixel online – Make Pixel Art

Cosa accade alle immagini?

Lo stesso accade per le immagini, solo che raddoppiare le dimensioni di un’immagine di esempio larga 25pixel, causa l’effetto sgranato, proprio perché queste ultime non sono vettoriali ma rasterizzate.

Una soluzione ci sarebbe ed è quella di creare una nuova immagine a risoluzione più alta, e di dimensioni doppie rispetto a quella base. Poi va definito il codice css simile a questo:

@media only screen and (-webkit-min-device-pixel-ratio: ) {
   .box a {
   background-image: url('sprite2x.png');
   background-size: 30px 160px;
}
}

In questo caso l’immagine sprite2x.png, è di dimensioni doppie rispetto a quella standard e serve esclusivamente per dispositivi mobili. Per chiarirvi ancora di più le idee, se prendo un’immagine di esempio di 30px x 160px, l’immagine 2x è di 60px x 320px.

Importante: Tuttavia nel codice va specificata la dimensione dell’immagine come se fosse standard, ovvero:

 background-size: 30px 160px;

La soluzione più comoda sarebbe quella di creare immagini vettoriali scalabili, ovvero in formato SVG.

Ora tocca a te!
Se hai perplessità o semplicemente vuoi aggiungere un tuo pensiero, scrivici tramite modulo commenti posto in fondo alla pagina.

Nicola Spisso
  • Scrittore e Blogger
  • Redattore specializzato in Arredo e Design
Suggerisci una modifica
Commenti Espandi

Lascia una risposta

Accedi per lasciare un commento.