Ottimizzazione delle immagini: il dettaglio che conta
Una galleria non ottimizzata rallenta il sito e confonde Google. Ottimizzazione significa: file names, alt text, formato, dimensione.
1. Nome del file (File Name)
Non salvare come: IMG_1234.jpg oppure photo.png.
Salva come: e-commerce-scarpe-homepage-design-2026.jpg
Il nome file è un segnale on-page. Google lo legge. Usa keyword naturali, separa con trattini (non underscore), includi l'anno.
2. Alt text descrittivo (Accessibility + SEO)
L'alt text serve due scopi: accessibilità (screen reader) e SEO (Google legge l'alt text se l'immagine non carica bene).
Sbagliato: alt="foto agenzia"
Corretto: alt="Homepage di e-commerce di scarpe con categoria sidebar, product grid, e newsletter signup - design responsive 2025"
L'alt text deve essere lungo 100-150 caratteri, descrittivo, naturale (non keyword stuffing).
3. Formato immagine
Usa WebP con fallback a JPG:
- WebP = 30-40% più leggero a parità di qualità.
- Supporto browser: 96%+ (da 2024).
- Implementazione: <picture> tag con source WebP e jpg.
4. Dimensioni e compressione
Per una galleria desktop:
- Larghezza: 800-1200px (mai più di 1500px senza motivo).
- File size: < 300 KB per immagine (WebP), < 600 KB per JPG.
- Strumenti: TinyPNG, ImageOptim, Cloudinary.
Per mobile:
- Larghezza: 400-600px.
- File size: < 150 KB.
- Usa responsive images con srcset: immagine grande per desktop, piccola per mobile.
5. Lazy loading
Aggiungi loading="lazy" agli img tag. Google carica le immagini solo quando entrano nel viewport. Migliora LCP (Largest Contentful Paint) e il Core Web Vitals.