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.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Pixel density</title> </head> <body> <img class="icon" alt="icon"/> </body> </html>
.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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
3 metodi JavaScript che ogni applicazione web dovrebbe contenere
Intercettare gli eventi di creazione degli oggetti con Entity Framework 7
Utilizzare il tag HTML template
Terminare l'esecuzione di un workflow di GitHub
Controllare se un branch esiste nel remote con un workflow di GitHub
Generare file per il download da Blazor WebAssembly
Linting di un Dockerfile con un workflow di GitHub
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Utilizzo di Map e Object in Javascript
Creare form tipizzati con Angular
Abilitare automaticamente Dependabot in tutti i repository di una organizzazione su GitHub
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub