Header sito web - Dimensioni perfette per ogni layout

Le dimensioni dell’header di un sito web non hanno un numero unico valido per tutti: cambiano in base a layout, contenuto, tema WordPress e obiettivo della pagina. Se l’immagine è troppo piccola perde nitidezza, se è troppo grande pesa, taglia male su mobile o soffoca il messaggio principale. In questa guida raccolgo misure di partenza realistiche, differenze tra header, hero e banner, e il modo più semplice per scegliere la proporzione giusta senza andare a tentativi.

Quali misure funzionano davvero per l’header di un sito

Se devo dare un punto di partenza concreto, non parto da un numero astratto ma dallo сценарio d’uso. Per un visual molto ampio e scenografico, 1920×1080 px resta una base solida; WordPress.com la indica come misura massima prudente per immagini grandi, e io la considero una soglia utile quando l’header deve funzionare quasi come una hero section. Per una fascia più editoriale, invece, spesso è più sensato restare su altezze molto più contenute.

La differenza vera non è solo estetica. Più l’header è alto, più devi proteggere il centro dell’immagine; più è basso, più conta il contrasto tra sfondo, logo e testo. Per questo non mi fido delle misure “magiche”: guardo sempre il rapporto tra spazio utile e contenuto reale.

Header, hero e banner non coincidono

Qui si fa spesso confusione. L’header, in senso stretto, è la parte alta del sito che ospita logo, navigazione e spesso una fascia visiva. Il hero è la sezione di apertura che racconta subito un messaggio; il banner è una fascia grafica più generica, che può essere usata sia come intestazione sia come elemento promozionale.

Io li distinguo così:

• Header di navigazione: sta in alto, deve essere rapido da leggere, e spesso resta entro 72-96 px di altezza su desktop.
• Banner di testata: aggiunge identità visiva, ma non deve rubare spazio al contenuto principale.
• Hero section: supporta headline, sottotitolo e CTA, quindi può permettersi più altezza e più respiro.

Su un sito editoriale o informativo, come quelli dedicati a comunicazione digitale e media, un header troppo alto interrompe la lettura e rallenta l’ingresso nel contenuto. Su una landing page, al contrario, un visual più ampio ha senso solo se aiuta davvero a spiegare la proposta. La misura corretta nasce dal ruolo che quella fascia deve svolgere, non dal gusto del momento. E proprio qui entra in gioco il modo in cui l’immagine viene adattata ai diversi schermi.

Come scegliere la misura giusta in base al layout

Quando progetto un header, io parto da quattro domande molto pratiche: cosa deve comunicare, quanta navigazione deve contenere, quanto testo deve convivere con l’immagine e quanto il layout cambierà tra desktop e mobile. Se la risposta è “molto”, la composizione deve essere più prudente. Se la risposta è “poco”, posso spingere di più sul visual.

1. Misuro lo spazio reale disponibile. Un tema WordPress non è un foglio bianco: ha griglie, padding e menu che occupano parte della scena.
2. Decido il ruolo dell’immagine. Se deve solo dare tono, basta una fascia più contenuta; se deve vendere una storia, serve più altezza.
3. Proteggo l’area centrale. Testo, volto, logo o prodotto vanno tenuti lontani dai bordi, perché il crop mobile taglia soprattutto lì.
4. Preparo un’alternativa per schermi piccoli. Quando l’header è molto narrativo, un secondo ritaglio più stretto evita brutte sorprese.
5. Testo il risultato a tre larghezze. Io controllo almeno desktop, tablet e smartphone, perché la resa cambia più di quanto sembri sulla carta.

In pratica, un’immagine da 1920 px di larghezza è spesso un buon tetto per i layout ampi. Andare oltre ha senso solo se il soggetto è panoramico o se il tema usa davvero un hero molto esteso. Se invece il contenuto principale è un titolo con CTA, preferisco una composizione meno affollata e una fascia che non superi la soglia di lettura.

Questa logica cambia ancora di più quando entriamo in WordPress, perché il modo in cui il tema gestisce l’header determina buona parte del risultato finale.

Come gestirlo in WordPress senza perdere qualità

In WordPress la prima cosa da capire è se stai lavorando con un tema classico o con un block theme. Nei temi classici, il Customizer spesso indica una misura consigliata per l’header; in quelli più vecchi può capitare di trovare valori come 1200×280 px, che restano utili per una fascia sottile e ordinata. Nei block theme, invece, il lavoro passa spesso dal Cover block, dall’allineamento a larghezza piena e dal punto focale dell’immagine.

Qui il dettaglio tecnico conta, ma non deve complicare la vita. WordPress genera automaticamente più tagli dell’immagine e il browser sceglie quello più adatto, quindi non ha senso caricare un file enorme e sperare che il CSS faccia tutto il resto. Se l’immagine è sopra la piega e rappresenta il contenuto principale, io evito il lazy-load e penso piuttosto a compressione, dimensioni corrette e, se serve, preload. Come ricorda web.dev, formati moderni come WebP e AVIF riducono il peso e aiutano la resa del caricamento, soprattutto quando l’header è anche l’elemento visivo dominante della pagina.

• Classic theme: controlla sempre la dimensione suggerita dal tema prima di esportare l’immagine.
• Block theme: usa un Cover block full width e verifica il punto focale, non solo i pixel.
• Immagine di sfondo: se usi background-size: cover, accetta l’idea che una parte verrà tagliata.
• Header critico: se è l’elemento visivo principale, trattalo come LCP e ottimizzalo per il caricamento.

La regola pratica, qui, è semplice: non pensare all’immagine come a un file da “far stare dentro” al tema, ma come a un contenuto da comporre per quel tema. Quando fai questo salto mentale, la resa migliora subito. E proprio gli errori di composizione sono quelli che rovinano più spesso anche i progetti ben intenzionati.

Gli errori che fanno perdere leggibilità e velocità

Gli header sbagliati non sono quasi mai brutti per caso: sono sbagliati perché una scelta tecnica ha ignorato il comportamento reale del layout. Il problema più comune è usare un’unica immagine desktop e aspettarsi che funzioni identica sul telefono. Non succede. Il secondo errore è mettere il testo direttamente dentro l’immagine: su mobile si legge peggio, non si traduce bene e diventa fragile quando cambi formato.

• Crop non controllato: il soggetto finisce ai bordi e viene tagliato quando il layout si stringe.
• File troppo pesante: l’header diventa il collo di bottiglia della pagina, soprattutto se è sopra la piega.
• Contrasto insufficiente: logo e headline spariscono perché lo sfondo è troppo simile al testo.
• Proporzione sbagliata: un’immagine verticale infilata in una fascia orizzontale sembra sempre forzata.
• Affidarsi solo al ridimensionamento CSS: l’immagine “entra”, ma non per questo è davvero adatta.

Nel 2026 il punto non è solo far apparire l’header corretto, ma farlo apparire corretto senza rallentare il resto della pagina. Per questo io preferisco un’immagine leggermente più semplice ma molto leggibile, rispetto a un visual ricco che perde qualità appena il viewport cambia. La velocità aiuta anche la percezione del brand: un header pesante comunica disordine prima ancora di comunicare contenuto.

La regola pratica che uso per non sbagliare l’header

Se devo scegliere una sola strategia, uso questa: progetto prima la proporzione, poi la risoluzione, infine l’ottimizzazione. In altre parole, non parto dal file finale ma da come la fascia verrà vista davvero. Se il sito è editoriale o corporate, spesso basta una testata sobria tra 1200×280 px e 1600×400 px. Se l’obiettivo è impatto visivo e storytelling, salgo verso 1920×600 px o, nei casi più immersivi, 1920×1080 px.

• Metto il soggetto principale al centro.
• Lascio margine laterale sufficiente per il crop mobile.
• Esporto in WebP o AVIF quando possibile.
• Controllo il risultato su almeno tre larghezze di schermo.
• Se il file supera circa 500 KB e non è davvero necessario, lo rivedo.

Se devo lasciare un criterio semplice, è questo: un buon header non deve stupire solo nel mockup, deve restare chiaro quando viene ridotto, compresso e letto in movimento. Quando passa questa prova, la scelta delle dimensioni è quasi sempre quella giusta.