Ottimizzazione delle Immagini per la Velocità del Sito Web: Guida Completa

Le immagini rappresentano quasi la metà del peso totale di una pagina web media. Le immagini non ottimizzate sono una delle cause più comuni di siti lenti.

---

Perché l'Ottimizzazione delle Immagini è Importante

Impatto sull'Esperienza Utente

• Il 53% degli utenti mobile abbandona i siti che impiegano più di 3 secondi a caricarsi (Google)
• Un ritardo di 1 secondo può ridurre le conversioni del 7% (Akamai)
• Il 47% dei consumatori si aspetta che le pagine si carichino in 2 secondi o meno

Impatto sul SEO

I Core Web Vitals — LCP, CLS e INP — fanno parte dell'algoritmo di ranking di Google. Immagini grandi e non ottimizzate impattano direttamente su LCP e CLS.

Impatto sui Costi

Le immagini non ottimizzate aumentano i costi di banda, CDN e archiviazione.

---

Passo 1: Scegli il Formato Giusto

JPEG / JPG

• Compressione con perdita, ideale per le fotografie
• Supporto universale su tutti i browser

PNG

• Compressione senza perdita, ideale per screenshot, loghi e trasparenza
• Supporto universale su tutti i browser

WebP

• Con e senza perdita, ideale per quasi tutte le immagini web
• Dal 25 al 35% più leggero del JPEG, il 26% più leggero del PNG
• Supportato da tutti i browser moderni

AVIF

• Formato di nuova generazione, ancora migliore del WebP
• Da usare con fallback a WebP/JPEG

SVG

• Formato vettoriale, perfetto per icone e loghi

---

Passo 2: Comprimi le Immagini

Usa TinyImg — tutta l'elaborazione avviene nel browser e le immagini restano private.

---

Passo 3: Usa Immagini Responsive

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Testo alternativo descrittivo"
  width="800"
  height="600"
/>

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Testo alternativo descrittivo" width="800" height="600" />
</picture>

---

Passo 4: Implementa il Lazy Loading

<img src="image.webp" alt="Descrizione" loading="lazy" width="800" height="600" />

NON applicare il lazy loading alle immagini visibili senza scorrere la pagina. Includi sempre width e height per evitare il CLS.

---

Passo 5: Imposta le Dimensioni Corrette delle Immagini

<!-- Corretto -->
<img src="photo.webp" alt="Foto" width="800" height="600" />

<!-- Errato: causa spostamenti del layout -->
<img src="photo.webp" alt="Foto" />

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

---

Passo 6: Usa un CDN

• Cloudflare — piano gratuito con ottimizzazione delle immagini
• Cloudinary — trasformazione delle immagini e CDN
• imgix — elaborazione e distribuzione in tempo reale
• Vercel — ottimizzazione integrata per Next.js

---

Passo 7: Controlla e Misura

Strumenti: PageSpeed Insights, Lighthouse, WebPageTest, Chrome DevTools.

---

Checklist di Ottimizzazione Rapida

• Scegliere il formato giusto (WebP per le foto, PNG per la trasparenza, SVG per le icone)
• Comprimere tutte le immagini (TinyImg)
• Servire immagini responsive con srcset e sizes
• Applicare il lazy loading alle immagini fuori dalla viewport iniziale
• Impostare width e height su tutti gli elementi <img>
• Usare un CDN
• Controllare con PageSpeed Insights

---

Conclusione

Inizia comprimendo le tue immagini con TinyImg — gratuito, veloce e tutto elaborato in locale. I tuoi utenti (e Google) te ne saranno grati.