Ottimizzare le immagini per il web senza perdere qualità

Per ottimizzare le immagini per il web senza perdite visibili bastano cinque mosse: esporta ogni immagine alla dimensione in pixel in cui viene mostrata (circa il doppio per gli schermi nitidi), scegli un formato moderno come AVIF o WebP, comprimi a una qualità moderata e confronta a occhio, servi più dimensioni con srcset e carica in lazy loading tutto ciò che sta sotto la piega. Questi passaggi risolvono la maggior parte degli avvisi sulle immagini di Lighthouse e di solito alleggeriscono la pagina in modo drastico, perché la foto originale uscita da una fotocamera o da un programma di grafica è molte volte più grande di quanto serva allo schermo.

Passo 1: esporta alla dimensione che mostri

Un’immagine mostrata a 800 pixel di larghezza non ha bisogno di essere larga 4.000 pixel. Lighthouse segnala le immagini sovradimensionate perché i pixel in più vengono scaricati, decodificati e poi scartati. Misura quanto è larga l’immagine nel tuo layout al massimo, poi esporta a circa il doppio di quella larghezza per telefoni e portatili ad alta densità. Oltre il doppio raramente si vede più nitido e costa sempre byte.

Passo 2: scegli il formato giusto

Il formato conta più di qualsiasi cursore di compressione. AVIF di solito dà il file più piccolo, WebP si avvicina ed è supportato ovunque nei browser attuali, mentre JPEG e PNG restano i ripieghi sicuri. WebP contro PNG e PNG contro JPG approfondiscono ciascuna coppia.

Passo 3: comprimi, poi guarda

I formati con perdita hanno un’impostazione di qualità, e il valore giusto dipende dall’immagine. Parti da circa 75-80 per WebP e da circa 50-60 per AVIF, esporta e confronta con l’originale al 100% di zoom. Abbassa finché non vedi una differenza, poi risali di un passo. Volti, testo fine e sfumature richiedono più qualità dei paesaggi ricchi di dettagli. Compressione delle immagini spiega cosa scarta il codificatore.

Già che ci sei, elimina i metadati come i dati della fotocamera e le miniature incorporate. La maggior parte degli strumenti di esportazione lo fa con una sola casella, e toglie byte che nessuno vede.

Passo 4: markup responsive con srcset e sizes

Con più larghezze esportate, lascia scegliere al browser. srcset elenca i file e le loro larghezze; sizes dice al browser quanto sarà larga l’immagine. Il browser scarica poi il file più piccolo che sia abbastanza nitido per quello schermo.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

Per un’immagine dentro una colonna, descrivi il layout in sizes, per esempio sizes="(min-width: 1024px) 720px, 100vw". Sbagliare sizes è il motivo più comune per cui una configurazione responsive scarica comunque il file grande.

Passo 5: le indicazioni di caricamento che contano

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Queste indicazioni corrispondono direttamente ai Core Web Vitals. L’immagine hero è spesso l’elemento del Largest Contentful Paint, che secondo web.dev dovrebbe comparire entro 2,5 secondi, e le dimensioni mancanti sono una causa classica di spostamento del layout. Se il tuo hero è un video e non un’immagine, vale lo stesso ragionamento in video di sfondo per i siti web.

Una checklist prima di pubblicare

1. 1

   Misura lo spazio

   Trova la larghezza massima a cui ogni immagine viene mostrata nel tuo layout.

2. 2

   Esporta alle dimensioni giuste

   Da una a due volte la larghezza dello spazio, più versioni più piccole per i telefoni.

3. 3

   Scegli il formato

   AVIF o WebP per foto e sfumature, SVG per i loghi, PNG solo quando conviene.

4. 4

   Comprimi a occhio

   Abbassa la qualità finché vedi un cambiamento, poi rialzala di un passo.

5. 5

   Scrivi il markup

   srcset, sizes, width, height, alt e lazy loading sotto la piega.

6. 6

   Provalo

   Esegui Lighthouse in una finestra in incognito e controlla i controlli sulle immagini e l’elemento LCP.

Molto di tutto questo è più facile quando l’immagine nasce già alla sua dimensione finale. In Gradiently progetti una volta sola e Pro ridimensiona a ogni formato in un passaggio, poi esporta PNG, JPG o SVG alle dimensioni esatte fino a 4K, così hero, banner e immagine Open Graph partono ciascuno dalla dimensione che la pagina mostrerà.