Ottimizzazione Immagini Web: Guida Pratica ai Formati e alla Velocità

Le immagini rappresentano spesso oltre la metà del peso totale di una pagina web. Caricare un'immagine non ottimizzata da 5MB è uno degli errori più gravi che puoi commettere: un'immagine correttamente compressa può pesare appena 100KB senza alcuna perdita di qualità percepibile. L'ottimizzazione delle immagini è il pilastro fondamentale per migliorare il LCP (Largest Contentful Paint) e scalare i risultati nei Core Web Vitals di Google.

Formati Immagine di Nuova Generazione

• JPEG: Lo standard per le fotografie. Ideale per immagini complesse. Impostare la qualità tra il 75% e l'85% garantisce il miglior rapporto peso/qualità.
• PNG: Essenziale per grafiche con trasparenza, icone e screenshot. È un formato lossless, ma non adatto a immagini fotografiche pesanti.
• WebP: Il formato di riferimento per il web moderno. Offre una riduzione del peso del 25-35% rispetto al JPEG a parità di qualità, con supporto nativo alle trasparenze. Supportato da oltre il 97% dei browser attuali.
• AVIF: La frontiera della compressione. Riduce il peso fino al 50% rispetto al JPEG. Nonostante richieda più risorse per l'encoding, è perfetto per le immagini Hero.
• SVG: Formato vettoriale indispensabile per loghi, icone e grafiche lineari. La sua natura matematica lo rende scalabile all'infinito con un peso quasi nullo.

L'elemento <picture>: Gestione Intelligente

Utilizza il tag <picture> per offrire formati avanzati ai browser che li supportano, mantenendo un fallback affidabile (JPEG/PNG) per i browser più datati.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Immagine Hero ottimizzata" width="1200" height="600">
</picture>

Immagini Responsive con srcset

Servire un'immagine da 2400px a uno smartphone è uno spreco di dati. Grazie a srcset, puoi istruire il browser a scaricare solo la dimensione adatta al dispositivo in uso.

<img
  src="prodotto-800.jpg"
  srcset="
    prodotto-400.jpg 400w,
    prodotto-800.jpg 800w,
    prodotto-1200.jpg 1200w,
    prodotto-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  alt="Foto del prodotto"
  width="800"
  height="600"
  loading="lazy"
>

Lazy Loading Nativo

Il lazy loading posticipa il caricamento delle immagini fuori dalla viewport fino al momento in cui l'utente effettua lo scroll. È una tecnica essenziale per velocizzare il caricamento iniziale della pagina.

<!-- Lazy load per immagini sotto la fold -->
<img src="foto.webp" alt="Descrizione" loading="lazy" width="600" height="400">

<!-- MAI applicare lazy-load all'immagine LCP -->
<img src="hero.webp" alt="Hero" loading="eager" fetchpriority="high" width="1200" height="600">

Prevenire il Cumulative Layout Shift (CLS)

Senza definire gli attributi width e height, il browser non può calcolare lo spazio necessario, causando fastidiosi salti di contenuto durante il caricamento (CLS). Specificare le dimensioni garantisce stabilità visiva.

<!-- ✅ Definire sempre dimensioni esplicite -->
<img src="foto.webp" alt="Foto" width="800" height="600">

<!-- CSS per la responsività mantenendo l'aspect ratio -->
img {
  max-width: 100%;
  height: auto;
}

Strumenti di Ottimizzazione Consigliati

• Sharp (Node.js): La libreria standard per trasformazioni ad alte prestazioni. Velocissima grazie a libvips.
• Squoosh: Il tool di Google perfetto per ottimizzare singole immagini via browser con anteprima in tempo reale.
• ImageMagick: Potente tool da riga di comando per manipolazioni batch su server Linux.
• CDN (Cloudflare, Cloudinary): Automatizzano il resizing, la compressione e la conversione in formati next-gen in tempo reale.

import sharp from 'sharp';

// Conversione in WebP con qualità 80%
await sharp('input.jpg')
  .resize(1200, 800, { fit: 'inside', withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('output.webp');

// Generazione automatica di più risoluzioni
const sizes = [400, 800, 1200, 1600];
for (const size of sizes) {
  await sharp('input.jpg')
    .resize(size)
    .webp({ quality: 80 })
    .toFile(`output-${size}.webp`);
}

Checklist per il Successo

• ✅ Converti tutte le foto in WebP o AVIF (con fallback JPEG)
• ✅ Usa SVG per loghi e icone grafiche
• ✅ Aggiungi loading="lazy" a tutte le immagini below-the-fold
• ✅ Imposta fetchpriority="high" per l'immagine Hero (LCP)
• ✅ Specifica sempre gli attributi width e height
• ✅ Usa srcset per offrire risoluzioni adatte al dispositivo
• ✅ Applica una compressione ottimale (qualità 75-85%)
• ✅ Affidati a una CDN per l'ottimizzazione on-the-fly