Come ottimizzare le immagini per la velocità del sito (WebP vs AVIF) | We.Inc
Scegli il formato giusto, ridimensiona con srcset, carica in modo lazy le immagini giuste e mai la hero. Include un generatore di markup per picture, srcset e fetchpriority.
Come ottimizzare le immagini per un sito web
Ottimizzare le immagini si riduce a quattro mosse: scegliere il formato adatto all'immagine, esportare solo le larghezze in pixel che servono al layout, comprimere ogni file e controllare quando si carica. Servi AVIF o WebP con un fallback JPEG, elenca le larghezze in srcset, carica in modo lazy le immagini sotto la piega e dai invece alla hero fetchpriority high.
Quale formato per quale immagine
Immagine
Formato migliore
Fallback
Foto
AVIF o WebP
JPEG
Screenshot con testo
WebP lossless o PNG
PNG
Logo, icona, forme semplici
SVG
PNG
Animazione breve
Video (MP4 o WebM)
WebP animato
Le immagini sono di solito la parte più pesante di una pagina, e la hero è spesso l'elemento misurato per il Largest Contentful Paint. Gran parte del risparmio viene da impostazioni che scegli una volta sola: formato, larghezze, qualità e modalità di caricamento. Il generatore qui sotto scrive il markup corretto per queste scelte, e la checklist che segue copre il resto.
Scegli il formato dalla tabella: foto in AVIF o WebP, grafiche piatte in SVG.
Ridimensiona in tre o cinque larghezze che coprano dai telefoni agli schermi grandi.
Comprimi ogni file, controllando il risultato a dimensione piena per sfocature e bande di colore.
Genera il markup con il generatore, indicando la hero come priorità alta e il resto come lazy.
Esegui un test di velocità della pagina e guarda gli audit relativi alle immagini per conferma.
Non caricare mai in modo lazy la hero o qualsiasi immagine visibile al primo rendering; web.dev avverte che questo ritarda il Largest Contentful Paint.
Imposta sempre width e height così il browser riserva lo spazio e il layout non si sposta.
Rimuovi i metadati della fotocamera in esportazione; posizione e dettagli del dispositivo aggiungono byte e possono rivelare informazioni private.
Usa uno sfondo CSS solo per la decorazione; le immagini di contenuto vanno nei tag img con testo alternativo.
Confronta a occhio le impostazioni di qualità con zoom al 100%, perché il numero giusto varia da un encoder all'altro.
Domande frequenti
WebP o AVIF: quale dovrei usare?
Entrambi battono il JPEG per le foto. AVIF è il formato più recente e spesso comprime di più, mentre WebP si codifica più velocemente ed è supportato da più tempo. Uno schema sicuro è un elemento picture che offre prima AVIF, poi WebP, poi un JPEG nel tag img per tutto ciò che è più vecchio.
A cosa serve l'attributo sizes?
Dice al browser quanto sarà larga l'immagine disegnata, prima che avvenga il layout, così può scegliere il file giusto da srcset. Senza sizes, il browser presume che l'immagine riempia tutto il viewport e può scaricare un file molto più grande del necessario.
Ogni immagine dovrebbe usare loading lazy?
Solo le immagini sotto la piega. Il caricamento lazy aspetta che il browser sappia dove si trova un'immagine, ed è un ritardo che non vuoi per nulla di ciò che le persone vedono subito.
Quanto dovrei comprimere?
Abbassa la qualità finché non vedi appena una differenza a dimensione piena, poi risali di un gradino. Le foto ricche di dettagli nascondono bene la compressione; sfumature morbide, cieli e testo mostrano gli artefatti prima.
Mi serve un plugin o un servizio per ottimizzare le immagini?
No. Puoi ridimensionare e convertire in un editor o con uno strumento gratuito nel browser, poi scrivere il markup a mano. I servizi aiutano quando hai migliaia di immagini o caricamenti degli utenti da elaborare automaticamente.
Prima il formato
La guida ai formati di web.dev lo riassume così: preferisci i vettoriali quando l'immagine è fatta di forme e testo, e usa un formato raster moderno per le foto. Il PNG conserva ogni pixel esattamente, il che va bene per gli screenshot ma rende le foto inutilmente pesanti.
L'elemento picture ti permette di offrire nuovi formati senza rompere i browser vecchi. Il browser prende la prima source di cui capisce il tipo e ripiega sull'img all'interno.
La dimensione giusta per ogni schermo
web.dev osserva che inviare immagini da desktop ai telefoni può usare da due a quattro volte più dati del necessario, e suggerisce da tre a cinque dimensioni per immagine. Elencale con descrittori di larghezza in srcset e descrivi il layout in sizes.
Misura la larghezza effettiva nel tuo layout invece di tirare a indovinare. Una card che occupa un terzo dello schermo su desktop e tutta la larghezza sui telefoni ha bisogno di un valore sizes che dica esattamente questo.
Ordine di caricamento
Il caricamento lazy risparmia banda nelle pagine lunghe, quindi metti loading lazy sulle immagini più in basso. Per l'immagine principale above the fold, aggiungi fetchpriority high così viene richiesta prima dei file meno importanti.
decoding async permette al browser di mostrare il testo prima di finire di decodificare un'immagine grande. È un suggerimento, e i browser possono ignorarlo.
Checklist per l'ottimizzazione delle immagini
Cosa controllare e perché
Controllo
Come
Perché aiuta
Formato moderno
picture con source AVIF e WebP
File più leggeri con lo stesso aspetto
Larghezze responsive
srcset con descrittori w più sizes
I telefoni evitano i file da desktop
Compressione
Qualità regolata a occhio per tipo di immagine
Meno byte per pixel
Dimensioni
attributi width e height
Evita spostamenti del layout
Caricamento lazy
loading="lazy" solo sotto la piega
Risparmia dati nelle pagine lunghe
Priorità della hero
fetchpriority="high" sull'immagine principale
Largest Contentful Paint più veloce
Testo alternativo
Descrivi le immagini di contenuto; alt vuoto per quelle decorative
Accessibilità e ricerca per immagini
Schemi di markup da copiare
AVIF e WebP con fallback JPEG
Il browser usa il primo tipo di source che supporta. L'img porta dimensioni, testo alternativo e suggerimenti di caricamento per ogni formato.
Ridimensionare e convertire in blocco con sharp
Un piccolo script Node che usa il pacchetto sharp: ogni JPEG in ./src diventa tre larghezze WebP in ./out.
Terrazza in legno di cedro con panca integrata al tramonto
Generatore di markup per immagini
Imposta il nome del file, le larghezze, i formati e la posizione dell'immagine nella pagina. Il generatore scrive il markup picture e img con i giusti suggerimenti di caricamento.