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
Gestione file Javascript in Blazor con .NET 9
Eliminare record doppi in Sql Server
Migliorare l'organizzazione delle risorse con Azure Policy
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Utilizzare Intersect e Except per filtrare set di dati in TSql
Fornire parametri ad un Web component HTML
Integrare un servizio esterno con .NET Aspire
Creare una libreria CSS universale: Immagini
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
.NET Conference Italia 2024
Abilitare automaticamente il force push di un gruppo su Azure DevOps
I più letti di oggi
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Inviare i comandi SQL generati da Entity Framework alla console di Visual Studio
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!