1. Classifica l'immagine prima di ottimizzarla
Fai l'inventario delle immagini per template. Registra il ruolo di ogni immagine, la larghezza resa più grande e più piccola, lo stato nella viewport iniziale e se gli schermi piccoli richiedono un altro crop. Questo trasforma il lavoro sul peso dei file in decisioni testabili sulle pagine importanti.
Le foto spesso tollerano compressione lossy controllata. Loghi, simboli di interfaccia, grafica a linee e grafici possono andar bene in SVG o in un formato raster che preservi i bordi nitidi. SVG è adatto per grafica a linee, diagrammi e grafici, non per foto dettagliate.
Mantieni i dettagli essenziali e fornisci testo che trasmetta lo scopo dell'immagine.
Usa alt=""; non renderla l'unica fonte di informazione importante.
Descrivi l'azione o la destinazione, non solo i pixel dell'immagine.
2. Dimensiona per lo slot renderizzato, poi offri candidati responsive
Allinea le dimensioni intrinseche al box CSS. Un file pensato per desktop in una card stretta spreca trasferimento; un raster piccolo allungato troppo appare sfocato. Considera il device pixel ratio, ma convalida visivamente invece di assumere che ogni schermo richieda il candidato più grande.
Per una sola composizione a varie larghezze, usa i descrittori di larghezza nello srcset e sizes per dichiarare la larghezza effettiva dello slot. Il browser sceglierà il candidato. Usa picture per l'art direction: un crop per schermo piccolo che preservi il soggetto è diverso dal ridurre semplicemente l'immagine desktop. Mantieni un fallback img con src e alt dentro picture.
Stessa composizione, diverse dimensioni in pixel.
Crop o composizione differente quando il ridimensionamento nasconde il messaggio.
Mantieni src su img per client che non usano gli attributi responsive.
3. Scegli formato e compressione in base alle caratteristiche dell'immagine
WebP e AVIF possono ridurre il trasferimento raster in casi appropriati, ma il formato non garantisce qualità. Testa volti rappresentativi, texture fini, gradienti di brand, testo incorporato e trasparenze. JPEG resta un fallback comune per foto; PNG può andare bene per dettaglio lossless o trasparenza. Verifica il supporto AVIF e l'adattabilità operativa per il tuo pubblico e la tua infrastruttura di consegna.
La compressione lossy rimuove informazione per risparmiare byte ed è solitamente più indulgente sulle foto dettagliate rispetto a linee nitide o testo. La compressione lossless preserva i pixel codificati ma può comprimere meno. Scegli la qualità con un confronto affiancato alla dimensione resa, non basandoti solo su un valore numerico. Rimuovi i metadata solo dopo aver confermato orientamento, colore e necessità del workflow.
Confronta AVIF lossy, WebP e il fallback JPEG alla dimensione di visualizzazione.
Preferisci SVG quando appropriato o proteggi i bordi nitidi dei raster tramite test.
Conferma l'aspetto dell'alpha in ogni formato erogato e nel fallback.
4. Fai in modo che il markup protegga velocità e stabilità del layout
Dai a ogni img di contenuto gli attributi width e height corrispondenti al suo aspect ratio intrinseco. Il browser può riservare lo spazio prima che il file arrivi, riducendo i movimenti di layout. Il CSS può comunque impostare le dimensioni visibili.
Usa loading=lazy solo fuori dalla viewport iniziale. Non fare il lazy-load di un'immagine che è probabile sia visibile al caricamento, in particolare una candidata al Largest Contentful Paint (LCP). fetchpriority=high è solo un suggerimento relativo; applicalo con parsimonia e misura il risultato. Usa markup HTML per immagini di contenuto che richiedono testo alternativo o scoperta; Google dichiara che non indicizza immagini fatte in CSS.
Imposta width e height, anche sulle immagini di gallerie lazy-loaded.
Mantieni eager le immagini probabilmente LCP e ispeziona la priorità delle richieste.
Lazy-load le immagini offscreen e testa lo scorrimento su una rete limitata.
5. Conserva significato, scoperta e qualità visiva
Il testo alternativo dipende da scopo e contesto. Descrivi le informazioni essenziali per un'immagine informativa, usa alt="" per la decorazione e nomina la funzione di un'immagine collegata o in un bottone. Per un grafico o diagramma complesso, fornisci una spiegazione equivalente nel testo vicino. Non usare elenchi di parole chiave.
Per le immagini di contenuto scopribili, usa elementi HTML standard per immagini, testo pertinente nelle vicinanze, nomi di file descrittivi brevi quando possibile e una sorgente di fallback con markup responsive. Non trasformare sfondi decorativi in contenuti ridondanti solo per fini di scoperta.
Controlla i file compressi alle dimensioni maggiori e minori previste.
Preferisci testo reale; in caso contrario fornisci l'equivalente testuale.
Posiziona le immagini informative vicino al testo pertinente della pagina.
6. Verifica la pagina, non solo l'asset
Testa pagine rappresentative a viewport stretti e ampi. Negli strumenti di sviluppo del browser, ispeziona il candidato scelto dallo srcset, la dimensione trasferita, le dimensioni renderizzate e il movimento del layout. Limita la rete per rivelare hero image tardive e gallerie lente. Un confronto di esportazione non può rivelare un valore sizes impreciso, un crop inaspettato o un problema di trasformazione in produzione.
Usa segnali di lab e field quando disponibili. Lighthouse e PageSpeed Insights possono identificare immagini mal dimensionate; il LCP in campo riflette visite reali nel tempo. Confronta lo stesso template, la stessa classe di dispositivo, la stessa versione di rilascio e la stessa finestra di misurazione. Non attribuire a immagini il merito di una variazione di metriche quando sono cambiate anche server time, script, font o terze parti. Stagia i cambi condivisi di template e mantieni una via di rollback finché non sono convalidati.
Conferma che lo slot non selezioni un candidato inaspettatamente sovradimensionato.
Controlla crop, nitidezza, colore, alternative e stabilità del layout.
Nomina il proprietario, il segnale atteso e la via di inversione.