Come ottimizzare le immagini per il tuo sito: guida pratica

Le immagini sono spesso una parte importante del trasferimento e possono incidere anche su scoperta, decodifica, layout e Largest Contentful Paint. L’ottimizzazione può dare vantaggi, ma nessun risparmio fisso o effetto di ranking vale per ogni pagina. Ecco un processo misurabile passo passo.

Perché l'ottimizzazione delle immagini è più importante che mai

Il rapporto sul peso pagina di HTTP Archive mostra che le immagini restano rilevanti su molte pagine, anche se le mediane cambiano. Largest Contentful Paint (LCP) misura quando viene renderizzato il maggiore elemento idoneo nel viewport; spesso, ma non sempre, è un’immagine.

Le soglie LCP pubblicate da Google classificano fino a 2.5 secondi come buono e oltre 4 come scarso, al 75° percentile delle visite. Il lavoro sulle immagini può spostare una pagina tra soglie quando la risorsa LCP è il collo, ma da solo non garantisce Core Web Vitals superati né una posizione.

Passo 1: Scegliere il formato giusto

La scelta del formato può incidere molto su dimensione e capacità. Il confronto è qualitativo perché i benchmark dipendono da sorgente, encoder, impostazioni e obiettivo di qualità:

WebP è un utile candidato predefinito, non una risposta universale. Se pipeline e pubblico supportano AVIF, provalo come <source> precedente con fallback WebP o JPEG. Puoi convertire JPG in WebP o in AVIF con Vizua; il file viene elaborato nel browser e non inviato al nostro server.

Per approfondire, consulta il confronto WebP vs AVIF e la spiegazione della compressione con e senza perdita.

Passo 2: Ridimensionare alle dimensioni di visualizzazione effettive

Una foto da 4000 × 3000 pixel mostrata a 800 × 600 contiene molti più pixel di quelli necessari allo spazio. Un display responsive ad alta densità può richiedere un candidato maggiore, ma inviare l’originale della fotocamera di solito aggiunge trasferimento e decodifica inutili.

Il principio è offrire candidati vicini a dimensione e densità renderizzate. Usa srcset e sizes e considera larghezza, densità del dispositivo, qualità, zoom e direzione artistica invece di fissare un moltiplicatore “Retina”.

Esempi di dimensioni iniziali da adattare al layout:

• Hero a piena larghezza: parti dallo spazio renderizzato maggiore e genera candidati per densità e breakpoint rilevanti
• Immagine di contenuto: abbina la colonna e ogni stato responsive più largo
• Miniatura: genera un candidato vicino a ogni dimensione della scheda invece di riutilizzare la hero
• Avatar: considera cerchio o quadrato mostrato, densità e possibile vista dettagliata

Usa il ridimensionatore di Vizua per creare candidati adeguati prima della compressione. Il risparmio dipende dai pixel originali e finali; misura i file.

Passo 3: Comprimere con le impostazioni di qualità giuste

Dopo formato e ridimensionamento, regola l’encoder. Le scale di qualità non sono lineari né standard tra encoder o formati. Un valore inferiore di solito scambia più informazioni con meno byte in modalità con perdita, ma dimensione e variazione visiva vanno misurate sull’output.

Impostazioni di qualità consigliate:

• JPEG: 75–85 può essere un intervallo iniziale prudente per le foto. Le scale differiscono; controlla l’output.
• WebP: 75–80 è un intervallo iniziale, non un equivalente garantito del valore JPEG.
• AVIF: 60–75 può essere un punto di partenza in alcuni strumenti; scale ed encoder differiscono.
• PNG: prova prima una compressione senza perdita più forte. Quantizzare la palette a massimo 256 voci può risparmiare di più, ma riduce i colori con perdita e va controllato.

Il compressore JPEG di Vizua permette di regolare la qualità e controllare l’output. Per un metodo dettagliato, vedi come comprimere senza perdere qualità.

Passo 4: Consegnare le immagini in modo efficiente

Una buona compressione è solo metà del lavoro. Come servi le immagini al browser è altrettanto importante per le prestazioni.

Specifica sempre le dimensioni

Assegna a ogni <img> valori intrinseci precisi di width e height, oppure riserva lo spazio con una regola deliberata. Il browser stabilisce presto il rapporto. Riduce il movimento legato all’immagine, anche se font, contenuti inseriti, animazioni e stili errati possono ancora influire sul Cumulative Layout Shift (CLS).

Applica il lazy-loading alle immagini sotto la piega

Considera loading="lazy" per immagini abbastanza fuori dal viewport iniziale. Non applicarlo meccanicamente alla probabile immagine LCP o a contenuti subito necessari. Euristiche, caroselli, stampa, scorrimento rapido e layout nascosti richiedono test.

Dai priorità all'immagine hero

Non differire la probabile immagine LCP. Considera fetchpriority="high" se merita banda iniziale e rendila rilevabile nell’HTML iniziale. Non assegnare alta priorità in modo ampio; conferma l’effetto con traccia e dati sul campo.

Usa immagini responsive

srcset e sizes offrono candidati e descrivono lo spazio previsto. Il browser considera viewport, densità, cache e implementazione. sizes deve corrispondere al layout reale; un valore errato può scegliere un candidato troppo grande o piccolo.

Passaggio 5: verifica e misura regolarmente

L'ottimizzazione non è un lavoro che si fa una volta sola. Ogni nuova immagine aggiunta è un'opportunità di regressione.

• PageSpeed Insights: esegui PageSpeed Insights su pagine rappresentative. Controlla separatamente LCP sul campo e in laboratorio e le diagnosi attuali, senza dipendere da un’etichetta mutevole.
• Rete DevTools: ordina le richieste per dimensione e controlla le immagini grandi nel contesto. Chiedi se dimensioni, formato, compressione, cache e priorità corrispondono al ruolo invece di imporre un limite KB universale.
• Automatizza: aggiungi l’ottimizzazione alla pipeline di build per intercettare immagini sovradimensionate prima della pubblicazione.

Lista di controllo rapida

• Genera e confronta varianti JPEG, WebP, AVIF, PNG o SVG adeguate
• Ridimensiona alle dimensioni reali di visualizzazione, non più del necessario
• Inizia con impostazioni prudenti, confronta byte e aspetto; non equiparare numeri di qualità tra formati
• Riserva uno spazio preciso a ogni <img>, normalmente con width e height intrinseci
• Considera fetchpriority="high" per la probabile immagine LCP, poi misura
• Differisci immagini adatte fuori schermo; prova scorrimento e layout
• Usa srcset/sizes per la distribuzione responsive
• Definisci budget prestazionali dalla pagina, dal pubblico e dai dati sul campo
• Rimuovi metadati privati inutili, ma conserva profili colore o altri dati necessari — vedi EXIF e privacy
• Controlla regolarmente con PageSpeed Insights

Domande frequenti