A differenza dei social media — che hanno specifiche fisse e ben documentate — i siti hanno layout variabili, layout responsive e contesti d'uso molto diversi. Un banner di homepage occupa il 100% della larghezza dello schermo. Una foto di prodotto può apparire a 400px o a 800px a seconda del dispositivo. Un'immagine di blog viene mostrata dentro una colonna di testo.
Non esiste un'unica dimensione corretta per "immagine di sito" — ma esistono intervalli consigliati per ogni contesto, e comprenderli fa la differenza tra un sito veloce e ben visualizzato e un sito lento con immagini sfocate o troppo pesanti.
Perché la dimensione dell'immagine influenza il tuo sito
Due problemi distinti sorgono quando le immagini non sono ottimizzate:
- Immagini troppo grandi in pixel: il browser scarica una foto di 4000px per mostrarla a 800px — l'80% dei dati trasferiti viene scartato immediatamente. Il sito diventa lento senza alcun guadagno visivo.
- Immagini troppo pesanti in KB/MB: anche con dimensioni corrette, una foto senza compressione può pesare 3 MB quando potrebbe pesare 150 KB con qualità visiva identica sullo schermo.
I due problemi hanno soluzioni diverse: il primo richiede il ridimensionamento (regolare i pixel); il secondo richiede la compressione (ridurre il peso senza alterare i pixel). In pratica, applicare entrambi in sequenza è ciò che produce il miglior risultato.
💡 Regola generale: la larghezza massima di qualsiasi immagine per il web raramente deve superare 1920px — che è la larghezza di un monitor Full HD. Per immagini che non occupano mai l'intero schermo (colonne, griglie di prodotti, thumbnail), il limite è ancora minore. Oltre questo, stai sprecando banda e danneggiando il caricamento.
Tabella di riferimento — dimensioni per tipo di immagine
| Tipo di immagine | Dimensioni consigliate | Peso ideale | Formato |
|---|---|---|---|
| Banner / hero (piena larghezza) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Banner desktop (layout boxed) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Banner mobile | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Foto di prodotto (e-commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Thumbnail di prodotto | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Immagine di articolo / blog | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Thumbnail di post (elenco) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo nell'header | 200–400 px di larghezza | 5–30 KB | SVG / PNG / WebP |
| Icone dell'interfaccia | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | 1–10 KB ciascuna | .ico + PNG |
| Open Graph (anteprima social) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Sfondo di sezione | 1920 × altezza variabile | 100–300 KB | WebP / JPG |
| Foto profilo / avatar (sito) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Immagine di testimonianza / cliente | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Dimensioni per tipo di sito
Siti istituzionali e portfolio
I siti istituzionali di solito hanno una larghezza massima di contenuto tra 960px e 1440px. Le immagini di banner o hero di solito occupano il 100% della larghezza del layout — quindi 1440–1920px di larghezza sono sufficienti per i monitor moderni. Le immagini di sezione (foto del team, ufficio, servizi) raramente devono superare gli 800px di larghezza.
- Banner principale: 1920 × 700–900px, sotto i 200 KB
- Foto del team: 400–600 × 400–600px, sotto i 60 KB
- Foto di servizio / sezione: 800–1200 × 500–700px, sotto i 100 KB
Blog e portali di contenuto
Nei blog, la colonna di contenuto raramente supera i 760–800px di larghezza. Un'immagine in evidenza (featured image) a 1200px è più che sufficiente per coprire qualsiasi layout responsive senza sprechi. Le thumbnail nell'elenco dei post sono ancora più piccole — di solito 300–500px.
- Featured image: 1200 × 630px, sotto i 100 KB
- Immagini all'interno dell'articolo: 800–1200px di larghezza, sotto gli 80 KB ciascuna
- Thumbnail nell'elenco: 400 × 250px, sotto i 30 KB
E-commerce e negozi online
Nell'e-commerce, le foto di prodotto sono l'elemento più critico — sono il principale strumento di persuasione del cliente. La risoluzione deve essere sufficiente per lo zoom (quando il sito offre questa funzione), ma il peso deve essere controllato per non danneggiare la velocità delle pagine di elenco, che caricano molte immagini contemporaneamente.
- Foto principale del prodotto (quadrata): 800–1200 × 800–1200px, 80–150 KB in WebP
- Foto aggiuntive del prodotto: stessa dimensione della principale
- Thumbnail nella griglia di prodotti: 300–500 × 300–500px, 20–50 KB
- Banner di categoria / promozione: 1440 × 400–600px, 80–150 KB
🛍️ Per l'e-commerce: usa sempre sfondo bianco o neutro nelle foto di prodotto — oltre a facilitare la compressione (grandi aree di colore uniforme si comprimono molto bene), garantisce coerenza visiva tra prodotti di fornitori diversi e migliora l'esperienza di confronto nel carrello.
Landing page
Le landing page sono progettate per un'unica azione di conversione — e la velocità è critica: le ricerche mostrano che ogni secondo aggiuntivo di caricamento riduce il tasso di conversione del 7–12%. Le immagini nelle landing page devono essere ottimizzate aggressivamente.
- Hero / sfondo: 1440–1920px di larghezza, sotto i 150 KB — priorità massima
- Foto di prodotto / servizio: 600–800px, sotto gli 80 KB
- Icone dei benefici: SVG ogni volta che è possibile
- Foto di testimonianza: 80–120px circolare, sotto i 15 KB
L'impatto del fattore 2× (schermi Retina e HiDPI)
Gli schermi Retina (Apple) e HiDPI (altri produttori) hanno una densità di pixel raddoppiata — il che significa che mostrano più pixel per pollice rispetto ai monitor comuni. Perché le immagini appaiano nitide su questi schermi, l'immagine deve avere il doppio dei pixel dello spazio di visualizzazione.
Esempio: un'immagine mostrata a 400px di larghezza su uno schermo Retina richiederebbe 800px di larghezza per apparire nitida. Inviare solo 400px produce un'immagine leggermente sfocata su iPhone e MacBook.
La soluzione più pratica è usare immagini con il doppio della larghezza di visualizzazione massima — ma comprimere bene affinché il peso non raddoppi nella stessa proporzione. Un'immagine di 800px ben compressa in WebP di solito pesa meno di 400px in PNG non ottimizzato.
Formato giusto per ogni situazione
| Situazione | Formato ideale | Perché |
|---|---|---|
| Fotografie (prodotto, banner, team) | WebP lossy | 25–35% più piccolo del JPG con qualità equivalente |
| Logo nell'header | SVG | Vettoriale, qualsiasi dimensione senza perdita, file più piccolo |
| Logo quando l'SVG non è supportato | PNG con sfondo trasparente | Preserva la trasparenza necessaria |
| Icone dell'interfaccia | SVG | Scalabile, animabile via CSS, file minuscolo |
| Screenshot con testo | WebP lossless o PNG | Testo nitido — il JPG crea artefatti attorno alle lettere |
| Open Graph / anteprima social | JPG o WebP | Compatibilità massima con le piattaforme di anteprima |
| Sfondo con trasparenza | WebP con canale alfa o PNG | Unico formato con trasparenza oltre al PNG |
Come preparare le immagini prima del caricamento
Il flusso consigliato per qualsiasi immagine destinata a un sito è:
- Definisci le dimensioni d'uso. Qual è lo spazio massimo che questa immagine occuperà nel layout? Usa la tabella di riferimento sopra o ispeziona l'elemento nel browser (F12 → seleziona lo spazio dell'immagine).
- Ridimensiona al doppio dello spazio di visualizzazione. Per coprire gli schermi Retina senza spreco eccessivo. Usa il Ridimensionatore di Immagine per definire la larghezza esatta in pixel.
- Converti in WebP. Se il tuo sito o CMS supporta WebP (la maggior parte dei moderni lo supporta), converti prima del caricamento. Usa il Convertitore di Immagine per una conversione rapida.
- Comprimi. Applica la compressione per ridurre il peso all'interno degli intervalli consigliati. Usa il Compressore di Immagine per ottimizzare JPG, PNG e WebP senza perdita visiva percepibile.
- Verifica il risultato. Apri l'immagine compressa e confrontala con l'originale. Se la differenza non è visibile, il risultato è buono.
Prepara le tue immagini per il sito ora
Ridimensiona e comprimi le immagini del tuo sito in pochi secondi — senza installare nulla, senza creare account.
Verificare la dimensione attuale delle immagini del tuo sito
Per identificare se le immagini del tuo sito attuale sono ottimizzate, usa questi strumenti:
- Google PageSpeed Insights (pagespeed.web.dev): analizza l'URL ed elenca le immagini con opportunità di riduzione, mostrando il guadagno stimato in KB per ciascuna.
- Chrome DevTools → Network → Img: filtra le richieste per tipo di immagine e guarda la dimensione di ogni file caricato. Ordina per dimensione per identificare le più pesanti.
- WebPageTest.org: analisi dettagliata con waterfall, che mostra quali immagini vengono caricate per prime e quanto tempo impiegano.
Errori più comuni di dimensione immagine nei siti
- Caricare foto direttamente dalla fotocamera: le foto di fotocamera hanno 3–12 MB e 4000–8000px di larghezza. Nessun sito ha bisogno di immagini così senza ridimensionarle e comprimerle prima.
- Usare il PNG per le foto: le foto in PNG diventano 5–10 volte più grandi rispetto a JPG o WebP senza alcun guadagno visivo. Usa il PNG solo per immagini con trasparenza o grafica con bordi netti.
- Non avere una versione mobile delle immagini: servire un'immagine di 1920px a uno smartphone di 390px è puro spreco. L'attributo
srcsetdell'HTML risolve questo automaticamente. - Dimenticare le immagini Open Graph: quando qualcuno condivide una pagina su WhatsApp o LinkedIn senza immagine di anteprima configurata, la piattaforma mostra una miniatura generica o vuota. Configura sempre il meta tag
og:imagecon un'immagine di 1200×630px. - Logo in JPG: lo sfondo bianco forzato del JPG appare in contesti con sfondo colorato o trasparente. Logo sempre in SVG o PNG.