Ottimizza immagini web: controlla la pagina prima di pubblicare

Controlla prima

Inizia da ciò che il browser scarica

I file di design e le cartelle media non mostrano cosa ricevono realmente gli utenti. Il browser mostra quale URL immagine viene caricato, la dimensione visibile, se la pagina riserva spazio e se un file grande viene riutilizzato dove basterebbe uno piccolo.

Piano immagini

Pianifica ogni immagine importante prima della conversione

Un piano per le immagini mantiene questa guida separata dagli articoli sui convertitori. Definisce cosa serve a ogni area immagine: dimensioni, ordine di caricamento, fallback, ruolo dei metadata e un controllo finale che conferma l'uso del file corretto.

Quando il piano indica che i file necessitano di nuove versioni, usa guida alla conversione immagini per scegliere il passo successivo. Usa Guida da JPG a WebP per il lavoro WebP normale e la guida AVIF solo per foto grandi che richiedono ulteriori risparmi.

Dimensioni immagini

Imposta dimensioni chiare per ogni area immagine

Le immagini responsive funzionano solo se l'HTML corrisponde al layout. Misura l'area, scegli alcune larghezze utili, riserva il rapporto d'aspetto ed evita di inviare un originale grande solo perché esiste.

Controllo semplice: se una scheda da 360 px scarica un file da 2400 px, la compressione non è il problema principale. Serve una versione immagine più piccola o l'HTML punta al file sbagliato.

Ordine di caricamento

Carica la prima immagine intenzionalmente

L'immagine che definisce la prima schermata necessita di una regola diversa rispetto alle immagini più in basso. Trova l'immagine probabile LCP, evita il lazy loading accidentale e mantieni silenziose le immagini inferiori finché non servono.

1. 1

   Nomina l'immagine LCP

   Se la prima immagine significativa è probabilmente la Largest Contentful Paint, non caricarla in lazy loading per errore.

2. 2

   Mantieni silenziose le immagini inferiori

   Le immagini sotto la prima viewport dovrebbero usare normalmente lazy loading e decodifica asincrona.

3. 3

   Controlla gli sfondi CSS

   Un'immagine di sfondo ritagliata può comunque scaricare un file molto grande. Usa un file con dimensioni corrette per l'area visibile.

4. 4

   Controlla richieste ripetute

   Un'immagine piccola in una scheda diventa pesante se lo stesso file sovradimensionato viene ripetuto decine di volte.

HTML

Usa HTML responsive per l'area misurata

Per le immagini importanti rendi chiara la scelta del browser. L'esempio mostra opzioni di larghezza, dimensioni, dimensioni fisse e fallback. Cambia il comportamento di caricamento in base all'area, non per abitudine.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Screenshot della dashboard che mostra il flusso di caricamento"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Ricerca e condivisione

Fai raccontare un'unica storia da immagini, testo alternativo e metadata

L'Image SEO non è solo aggiungere parole chiave. Immagine visibile, testo vicino, testo alternativo utile, tag Open Graph e link immagine JSON-LD devono descrivere chiaramente la stessa pagina. Le immagini decorative devono restare tali.

Quando il controllo rileva anteprime social deboli, continua con Guida all'immagine Open Graph. Se il problema sono schema e meta tag, usa Guida ai metadata in Blazor per mantenere coerenti JSON-LD e metadata della pagina.

Passaggi

Controllo semplice delle immagini per ogni pagina

1. 1

   Apri la pagina reale

   Parti dall'URL corrente, non dalla cartella asset. Registra le immagini che vengono effettivamente caricate.

2. 2

   Crea il piano immagini

   Per ogni immagine importante annota larghezza target, rapporto d'aspetto, ordine di caricamento, fallback e ruolo dei metadata.

3. 3

   Converti solo ciò che è cambiato

   Usa gli strumenti di conversione solo per i file individuati dal controllo, invece di riesportare tutta la cartella media.

4. 4

   Aggiorna HTML e metadata

   Indirizza srcset, sizes, dimensioni, Open Graph e link immagine JSON-LD ai file preparati.

5. 5

   Verifica l'output del browser

   Controlla pagina, richieste di rete, metadata social, dati strutturati e layout mobile.

6. 6

   Conserva la regola per la prossima volta

   Documenta le decisioni sulle immagini per evitare che futuri aggiornamenti inizino di nuovo con supposizioni.

Lista di controllo

Lista di controllo immagini prima della pubblicazione

Usa questa lista prima che un articolo, una landing page o una pagina prodotto vadano online. Individua problemi che la sola conversione potrebbe non risolvere.