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
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Usare gateway dedicati con Azure Cosmos DB per migliorare le prestazioni
Utilizzare ChatGPT con Azure OpenAI
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Gestire i null nelle reactive form tipizzate di Angular
Usare il versioning con i controller di ASP.NET Core Web API
Scoprire le ottimizzazioni di Entity Framework Core in fase di scrittura di un solo record
Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Pubblicare la documentazione di un repository con GitHub Pages
Sfruttare i tag nell'output cache di ASP.NET Core 7
Gestione degli environment per il deploy con un workflow di GitHub
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5