Come ottimizzare le immagini per siti web: formati, dimensioni e consegna
I siti lenti sono spesso quelli con molte immagini. Foto sovradimensionate, formati errati e consegna inefficiente rallentano il caricamento, penalizzano la visibilità e peggiorano l’esperienza.
La soluzione non è un formato magico, ma un flusso di lavoro strutturato: scegliere il formato giusto, esportare la dimensione corretta, consegnare la variante adeguata e gestire metadati e pubblicazione.
Indice
Perché ottimizzare le immagini del sito è importante
Le immagini sono spesso la causa principale della lentezza di una pagina. Quando i file più pesanti sono foto sovradimensionate, formati sbagliati o consegna non responsive, peggiorano esperienza utente e performance SEO.
Per questo l’ottimizzazione delle immagini richiede un sistema, non soluzioni casuali. Serve un piano chiaro per formati, dimensioni, consegna e flusso di pubblicazione.
Pagine più veloci
Immagini dimensionate correttamente e in formati moderni riducono il peso e fanno caricare prima i contenuti importanti.
Performance
Migliore visibilità nei motori
Consegna immagini ottimizzata, metadati efficaci e pagine veloci migliorano i segnali di crawling e la qualità della pagina.
Impatto sulla ricerca
Meno caos nella pubblicazione
Un flusso di lavoro strutturato evita l’invio di file originali troppo grandi, metadati mancanti e esportazioni incoerenti.
Chiarezza operativa
Quali immagini servono normalmente in un sito
La maggior parte dei siti non ha bisogno di più tipi di immagini, ma di ruoli chiari, dimensioni e etichette corrette. Pensa in termini di funzioni, non upload casuali.
Hero image o immagine LCP
È l’immagine principale in alto nella pagina, spesso il Largest Contentful Paint. Va dimensionata con cura e non dovrebbe essere caricata in modo lazy di default.
Scopo: prima impressione e LCP
Immagini inline nel contenuto
Supportano il contenuto dell’articolo, devono spiegare il contenuto, avere alt text sensati e adattarsi bene a desktop e mobile.
Scopo: supportare la lettura
Card, miniature e immagini hub
Queste immagini più piccole appaiono in pagine di categoria, moduli articoli correlati e navigazione. Devono essere più piccole dell’hero della pagina.
Scopo: anteprime e navigazione
Immagine Open Graph e anteprima social
Questa immagine definisce l’aspetto della pagina quando condivisa su chat e social. È un asset di metadati, non solo una copia dell’hero visibile.
Scopo: anteprime di condivisione e click
Immagine per dati strutturati JSON-LD
Gli schema di articoli e prodotti possono indicare un’immagine primaria per aiutare i motori a identificare il visual principale della pagina.
Scopo: completezza schema e chiarezza entità
Formati: scegli il tipo di file giusto
Il formato migliore dipende dal ruolo dell’immagine. La maggior parte dei siti usa un mix, non un unico formato universale.
| Formato | Ideale per | Perché è importante |
|---|---|---|
| WebP | Immagini di routine, card, anteprime e contenuti visivi quotidiani | WebP è il formato predefinito pratico perché bilancia qualità, compressione e facilità d’uso nella pubblicazione. |
| AVIF | Grandi immagini fotografiche hero selezionate e visual di valore dove la compressione extra è giustificata | AVIF offre file più piccoli, ma la codifica è più lenta; è ideale come ottimizzazione selettiva, non come default assoluto. |
| JPEG | Compatibilità legacy e file sorgente prima dell’esportazione moderna | JPEG è ancora comune come formato di input, ma raramente dovrebbe essere il formato finale per immagini importanti. |
| PNG | Screenshot, trasparenze e asset UI che richiedono bordi senza perdita | PNG resta utile per grafiche di interfaccia, ma è spesso troppo pesante per foto normali. |
| SVG | Icone, diagrammi, loghi e illustrazioni semplici | SVG scala perfettamente e spesso supera i raster per grafiche lineari nitide. |
Usa WebP come formato quotidiano e riserva AVIF per le foto selezionate dove il risparmio massimo conta.
Per il percorso WebP di routine, leggi guida al flusso di lavoro JPG-to-WebP . Per la compressione selettiva delle hero, usa la guida JPEG-to-AVIF .
Dimensionamento: immagini responsive, dimensioni e stabilità del layout
I siti lenti non hanno solo problemi di formato, ma spesso inviano un’immagine sovradimensionata a ogni schermo. Il dimensionamento responsive risolve questo.
- Genera più larghezze per far ricevere a telefoni, tablet e desktop l’immagine giusta.
- Imposta larghezza e altezza per riservare spazio e ridurre lo spostamento del layout.
- Usa varianti più piccole per card e contenuti correlati invece di riutilizzare sempre l’hero completa.
- Mantieni un originale grande solo se necessario per zoom, download o lightbox.
Esempio di markup per la consegna
Usa un setup immagine piccolo e chiaro per i contenuti e riserva il caricamento anticipato per l’hero. Questo markup facilita il comportamento del browser e i risultati Lighthouse.
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>Priorità di consegna: lazy loading, LCP e Core Web Vitals
Quando formati e dimensioni sono corretti, la consegna diventa la leva successiva. Regola principale: tratta l’immagine above-the-fold come prioritaria, non come ripiego.
Cosa fare per la tua hero image
Mantieni l’hero compressa e dimensionata per il layout reale. Caricala subito se è probabile Largest Contentful Paint.
Usa formati moderni, dimensioni esplicite ed evita di sovrapporre più banner giganti above the fold.
Cosa danneggia la consegna
Caricare in lazy l’hero principale, inviare asset desktop a telefoni e usare PNG sovradimensionati sono errori comuni.
Questi problemi indeboliscono sia Lighthouse che l’esperienza reale dell’utente.
Contesto: nomi file, testo alternativo e testo circostante
L’ottimizzazione immagini non riguarda solo i byte. Motori e utenti hanno bisogno di contesto su cosa è l’immagine e perché è nella pagina.
- Usa nomi file che descrivano il soggetto, non esportazioni da fotocamera o nomi generici.
- Scrivi testo alt solo se l'immagine aggiunge significato, non per inserire parole chiave.
- Mantieni titoli, didascalie e testi vicini coerenti con ciò che l'immagine mostra realmente.
- Assicurati che il ruolo dell’immagine supporti il tema della pagina e non sembri casuale.
Metadati: perché contano le immagini Open Graph e JSON-LD
Una pagina può sembrare a posto nel browser ma essere debole nella scoperta se le immagini metadata sono trascurate. È una delle lacune più facili da correggere.
Immagine Open Graph
Controlla l’aspetto della pagina quando condivisa. Un’immagine Open Graph efficace migliora qualità percepita e click su social e chat.
Proprietà immagine JSON-LD
I dati strutturati offrono ai motori un pacchetto contenuti più chiaro. Includere un’immagine rilevante rafforza il legame tra titolo, descrizione e visual principale.
Se stai sviluppando con Blazor, abbina questa guida a Guida al componente metadata di Blazor così il titolo della pagina, la descrizione, il link canonico, l'immagine Open Graph e i dati strutturati rimangono sincronizzati.
Flusso di lavoro: processo strutturato per immagini web
- Definisci il ruolo dell’immagine prima di esportare: hero, inline, card, Open Graph o schema.
- Scegli il formato adatto: WebP per routine, AVIF per foto pesanti selezionate, SVG per vettoriali, PNG solo per trasparenze senza perdita.
- Esporta le dimensioni giuste per il layout, non un originale sovradimensionato ovunque.
- Imposta priorità di consegna per far comportare l’hero come asset prioritario e mantenere efficienti le immagini secondarie.
- Controlla immagini metadati, alt text e nomi file prima della pubblicazione.
Se scegli strumenti per questo flusso, la guida al miglior convertitore immagini per il web copre la scelta tra locale e online.
Checklist per ottimizzazione immagini web
- Ogni pagina importante ha un piano chiaro per il ruolo delle immagini prima dell’esportazione.
- WebP gestisce le immagini di routine a meno che non sia giustificato un formato selettivo più performante.
- Le grandi foto usano AVIF solo se il risparmio extra è giustificato.
- Le hero sono dimensionate per il layout e non caricate in lazy se sono probabile elemento LCP.
- Card e immagini hub usano varianti più piccole rispetto alla hero della pagina.
- Le immagini Open Graph servono per condivisioni e anteprime.
- I dati strutturati includono un'immagine primaria rilevante.
- Width e height sono presenti per evitare spostamenti del layout.
- Alt text e nomi file descrivono chiaramente il ruolo dell’immagine.
- Il flusso è abbastanza coerente da evitare il ritorno degli stessi errori alla pubblicazione successiva.