Nei precedenti script, ci siamo trovati spesso a parlare delle immagini e di come siano belle, ma a volte complesse da integrare nel nostro layout a causa delle dimensioni, del punto di taglio o addirittura del peso delle stesse.
Oggi andremo proprio a risolvere questo ultimo punto, utilizzando un parametro fornito dal tag , il quale ci consentirà di caricare la giusta immagine alla giusta risoluzione. Poiché un sito internet può essere fruito sia da mobile che da fisso con differenti risoluzioni, e non è raro osservare che le risoluzioni mobile - retina display - riescano a visualizzare un'immagine molto più grande rispetto ai normali monitor.
Sarà, dunque, nostro compito riuscire a fornire la giusta immagine alla giusta risoluzione e, per fare questo, utilizzeremo l'attributo srcset del tag img.
<img src="default.jpg" srcset="default.jpg 500w, defaultX2.jpg 1000w, defaultX3.jpg 1500w">
In questo modo, sarà il browser stesso a occuparsi dell'immagine più adeguata da scaricare, basandosi sulla grandezza della viewport corrente.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare politiche di resiliency con Azure Container App
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
C# 12: Cosa c'è di nuovo e interessante
Cancellare una run di un workflow di GitHub
Eseguire attività con Azure Container Jobs
Creare form tipizzati con Angular
Eseguire query verso tipi non mappati in Entity Framework Core
Aggiungere interattività lato server in Blazor 8
Utilizzare il trigger SQL con le Azure Function
Cambiare la chiave di partizionamento di Azure Cosmos DB