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
Installare le Web App site extension tramite una pipeline di Azure DevOps
Gestire liste di tipi semplici con Entity Framework Core
Usare una container image come runner di GitHub Actions
Creare un webhook in Azure DevOps
Utilizzare Tailwind CSS all'interno di React: primi componenti
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Gestire i null nelle reactive form tipizzate di Angular
Estrarre dati randomici da una lista di oggetti in C#
Creare gruppi di client per Event Grid MQTT
Miglioramenti agli screen reader e al contrasto in Angular
Utilizzare la session affinity con Azure Container Apps
Utilizzare il nuovo modello GPT-4o con Azure OpenAI