<img> element

Picture perfect images with the modern <img> element ci spiega l'impatto di questo fondamentale elemento delle pagine web. Ci sono tre metriche di base delle quali tenere conto oggi:

Largest Contentful Paint:
- caricare in anticipo l'immagine più importante
- non sprecare pixel con immegini a risoluzione troppo alta
- lazy-load delle immagini fuori dalla pagina

Cumulative Layout Shift:
Per evitare fastidiosi spostamenti
- impostare le dimensioni corrette sulle immagini
- usare aspect-ratio nel CSS per riservare spazio

First Input Delay:
- evitare immegini che causano intasamento di rete mentre si caricano altri contenuti fondamentali: CSS e JS.

Molte di queste proprietà vengono preimpostate (baked) per default nei componenti coome Next.Js <Image> (React) e Nuxt Js (Vue)

[via]