Dimensioni delle Immagini per Siti Web: la Tabella Completa
Guida alle Dimensioni delle Immagini per Siti Web
Dimensioni Immagini per Siti Web: Hero, Blog, Prodotto, Logo, OG | We.Inc
Una tabella con dimensioni in pixel, proporzioni e budget di peso per ogni spazio immagine di un sito web, più un calcolatore che trasforma la larghezza del layout in valori srcset.
Dimensiona ogni immagine per lo spazio più largo che occupa, poi raddoppia quella larghezza per gli schermi ad alta densità. Una hero a tutta larghezza funziona a 2560 per 1440, un'immagine nel corpo di un articolo a 1600 di larghezza, una foto prodotto quadrata a 2048 per 2048 su Shopify e un'immagine di condivisione social a 1200 per 630. Tieni le foto sotto i 200 KB circa.
Dimensioni rapide per gli spazi più comuni
Spazio
Pixel da esportare
Proporzioni
Hero a tutta larghezza
Immagine nel corpo del blog
Foto prodotto (Shopify)
Immagine di condivisione (og:image)
Logo
SVG, oppure PNG a 2x la dimensione visualizzata
Uguali a quelle del logo
Non esiste uno standard ufficiale per un'immagine hero o per un blog. Esiste invece una semplice aritmetica: quanti pixel CSS è largo lo spazio, moltiplicati per la densità di schermo su cui vuoi che appaia nitida. La tabella qui sotto applica questa regola a ogni spazio comune e, dove una piattaforma pubblica un proprio valore, come Shopify per i prodotti o Facebook per le immagini di condivisione, usiamo il valore pubblicato.
Trova lo spazio nella tabella, oppure misura quanto è largo nel tuo layout con l'ispettore del browser.
Inserisci quella larghezza CSS nel calcolatore e scegli le densità che vuoi coprire.
Esporta le larghezze indicate, comprimi ciascun file e incolla lo srcset generato nel tuo tag img.
Prima del caricamento, confronta il peso del file con la colonna del budget.
Esporta a 2x la larghezza visualizzata; 3x aggiunge peso che su una foto quasi nessuno nota.
Ritaglia nelle proporzioni giuste prima del caricamento, così il layout non deve mai stirare l'immagine o aggiungere bande.
Metti gli attributi width e height su ogni img, così il browser può riservare lo spazio prima che arrivi il file.
Preferisci SVG per loghi e icone, perché un file vettoriale resta nitido a qualsiasi dimensione con un solo piccolo download.
Lascia l'immagine di condivisione a 1200 per 630 anche sui siti stretti, perché le app social la scaricano separatamente dal tuo layout.
Domande frequenti
Che dimensione deve avere un'immagine hero?
Per una hero che occupa tutta la larghezza del browser, esporta 2560 per 1440 per gli schermi grandi e aggiungi versioni larghe 1280 e 1920 nello srcset, così telefoni e portatili scaricano meno. Se la hero sta dentro un contenitore di 1200 pixel, bastano 2400 di larghezza.
Che dimensioni hanno le immagini prodotto su Shopify?
Il centro assistenza di Shopify indica che le immagini prodotto quadrate di solito rendono meglio a 2048 per 2048 pixel. I caricamenti possono arrivare a 5000 per 5000 pixel e devono pesare meno di 20 MB. Mantieni le stesse proporzioni per tutte le foto prodotto, così le griglie delle collezioni restano allineate.
Che dimensione ha un'immagine di condivisione Open Graph?
La documentazione di Facebook sulla condivisione consiglia almeno 1200 per 630 pixel, un rapporto di 1,91 a 1 e un file sotto gli 8 MB. Immagini più piccole funzionano comunque fino a 600 per 315, ma vengono mostrate in formato ridotto.
Quanto deve pesare il file, oltre ai pixel?
Dimensione in pixel e peso del file sono cose separate. Una foto larga 1600 salvata in WebP o come JPEG ben compresso di solito pesa tra 80 e 200 KB. Se un'immagine supera di molto questo valore, abbassa la qualità o cambia formato prima di ridurne le dimensioni.
Mi servono immagini diverse per il mobile?
Di solito non servono ritagli diversi, solo copie più piccole dello stesso file elencate nello srcset. Usa l'elemento picture solo quando un telefono ha bisogno di un ritaglio diverso, per esempio una versione verticale di un banner largo.
L'unica regola dietro ogni numero
I browser impaginano le pagine in pixel CSS. Un telefono o un portatile retina concentrano due o tre pixel fisici in ciascuno di essi, quindi un'immagine esportata esattamente alla sua larghezza CSS appare sfocata. Raddoppiare la larghezza risolve il problema quasi per tutti.
Andare oltre 2x raramente conviene per le foto. Il file raddoppia di nuovo il peso più o meno e il dettaglio in più è difficile da notare a una normale distanza di visione.
Le proporzioni contano più dei pixel esatti
La maggior parte dei layout ridimensiona le immagini per adattarle alla colonna, quindi sono le proporzioni a decidere come un'immagine si inserisce nella pagina. Scegli una proporzione per ogni spazio, ritaglia ogni immagine di conseguenza e la griglia resta ordinata a qualsiasi larghezza.
Le scelte comuni sono 16:9 per hero e immagini degli articoli, 1:1 per prodotti e avatar, 4:5 per le card verticali e 1.91:1 per le immagini di condivisione.
I budget mantengono veloci le pagine
L'immagine più grande above the fold è spesso l'elemento che determina il Largest Contentful Paint. Una hero pesante rallenta la pagina più di qualsiasi altro singolo file, quindi merita la massima attenzione.
Fissa un budget per ogni spazio e rispettalo. Quando una foto non rientra nel budget con una buona qualità, prova WebP o AVIF prima di ridurre la risoluzione.
Dimensioni delle immagini per ogni spazio
Le larghezze degli spazi sono quelle tipiche dei layout desktop. Misura il tuo tema e applica la regola del 2x se le tue sono diverse.
Dimensioni di esportazione, proporzioni e budget di peso per spazio
Spazio
Larghezza CSS
Pixel da esportare
Proporzioni
Budget
Nota
Hero a tutta larghezza
100vw (fino a 1280+)
250 KB
Aggiungi copie larghe 1280 e 1920 nello srcset
Hero in un contenitore
200 KB
Il doppio della larghezza del contenitore
Banner a striscia
150 KB
Tieni il testo lontano dai bordi esterni; sui telefoni i lati vengono tagliati
Immagine in evidenza del blog
da 800 a 1200
da 1600 x 900 fino a 2400 x 1350
150 KB
Allineala alla larghezza dei contenuti del tuo tema
Immagine nel corpo del blog
da 720 a 800
16:9 o 3:2
150 KB
Le colonne del testo sono più strette delle hero
Foto prodotto
Card della griglia
200 KB
La dimensione quadrata consigliata da Shopify
Card di collezione o categoria
800 x 800 o 800 x 1000
1:1 o 4:5
80 KB
Usa una sola proporzione in tutta la griglia
Foto del team o avatar
40 KB
Spesso mostrata in un cerchio; centra il volto
Logo nell'header
circa 160
SVG, oppure PNG largo 320
Quelle del logo
20 KB
SVG resta nitido a ogni dimensione
Texture di sfondo
150 KB
Dietro al testo va bene una qualità più bassa
Immagine di condivisione (og:image)
Non mostrata nella pagina
Sotto 8 MB (punta molto più in basso)
La dimensione consigliata da Facebook
Favicon
da 16 a 32
SVG più ICO o PNG 32 x 32
5 KB
Vedi la guida alle favicon per tutte le dimensioni
Markup per una hero responsive
Hero a tutta larghezza con tre larghezze
Il browser sceglie il file più piccolo che copre comunque il viewport alla densità dello schermo. width e height fissano le proporzioni, così nulla salta durante il caricamento.
Calcolatore delle dimensioni delle immagini
Inserisci la larghezza che un'immagine occupa nel tuo layout, in pixel CSS, e scegli le densità di schermo da coprire. Il calcolatore elenca le larghezze in pixel da esportare e scrive lo srcset corrispondente.