Dall'archivio script > HTML5

Adattare le immagini in base alla pixel density con HTML5 e CSS3

di Andrea ColaciAndrea Colaci, in HTML5, CSS3, Media queries,

Con la comparsa dei primi dispositivi mobile con display ad alta risoluzione (es. Retina display di Apple) e successivamente di alcuni modelli di laptop, le immagini visualizzate da un sito web, se non adeguatamente gestite, appaiono evidentemente con una definizione inferiore che a volte può risultare sgradevole.

Questi nuovi display, a parità di superficie, visualizzano un numero di pixel 4 volte superiore a quelli "standard", causando il downsampling delle immagini che non sono state realizzate e adattate.

Uno dei modi per ovviare a questo problema è gestire il Pixel Density con le CSS3 Media Queries, provvedendo una immagine alternativa ottimizzata per i nuovi display. Questo approccio consente di servire solo l'immagine con risoluzione più idonea per il dispositivo corrente senza alterare le dimensioni (in css pixel) della stessa.

Ricordiamo che un css pixel è una unità di misura astratta, utilizzata dai browser, per renderizzare i contenuti in maniera consistente e indipendentemente dalle capacità del dispositivo. Nei device "standard" il rapporto tra CSS pixel e pixel reali è 1:1, mentre in quelli ad alta risoluzione, ad esempio Retina display, è 1:2. Trattandosi si una superficie piana, il numero di pixel cresce di quattro volte.

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pixel density</title>
</head>
<body>
  <img class="icon" alt="icon"/>
</body>
</html>

CSS
.icon {
    background-image: url(example.png);
    background-color: blue;
  }

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-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) {
  .icon {
    background-image: url(example@2x.png);
    background-color: blue;
  }
}

Questa semplice soluzione sebbene consenta di servire solo l'immagine più idonea per il display corrente, di contro prevede la disponibilità di una immagine alternativa con risoluzione maggiore.

Le specifiche delle CSS3 Media Queries sono disponibili qui: http://www.w3.org/TR/css3-mediaqueries/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi