Le scelte giuste partono dal layout, non dal file più grande
- WordPress genera più versioni della stessa immagine e usa srcset e sizes per servire il file più adatto.
- Per articoli e card editoriali, come base affidabile considero spesso 1200-1600 px di larghezza, con crop coerente.
- Per immagini a tutta larghezza, 1920-2560 px sono spesso sufficienti; oltre questa soglia WordPress può ridimensionare l’originale.
- JPEG, WebP e AVIF coprono la maggior parte dei casi; PNG resta utile per trasparenze e grafiche piatte.
- Se cambi le misure del tema, conviene rigenerare le miniature già presenti nella libreria media.
Prima di tutto conta dove l’immagine verrà mostrata
Quando progetto un sito, parto sempre dal contenitore, non dal file. Una foto che entra in una colonna da 900 px non ha bisogno di arrivare a 4000 px di larghezza “per sicurezza”: nella pratica, una versione tra 1400 e 1800 px basta quasi sempre per coprire bene schermi standard e display ad alta densità. Se invece l’immagine occupa davvero tutta la larghezza della pagina, allora ha senso salire ancora, ma solo fino al punto in cui il guadagno visivo è reale.
Qui entra in gioco anche il rapporto d’aspetto. Un’immagine orizzontale 16:9 funziona bene per hero, cover e anteprime editoriali; una 1:1 è più stabile nelle card e nelle griglie; un 3:2 lascia più respiro al contenuto senza diventare troppo “cinematografico”. Io considero il crop una scelta di impaginazione, non un dettaglio tecnico: se il ritaglio è sbagliato, anche la foto migliore perde forza.
In altre parole, la domanda utile non è “quanto grande può essere il file?”, ma “quanto grande deve essere in quel punto della pagina”. Da qui diventa più facile scegliere le misure giuste per i layout più comuni.
Le dimensioni pratiche che uso nei layout WordPress più comuni
Le misure qui sotto non sono regole assolute, ma punti di partenza solidi. Le uso perché bilanciano bene resa visiva, peso del file e flessibilità del tema.
| Contesto | Rapporto consigliato | Dimensione di partenza | Perché funziona |
|---|---|---|---|
| Miniature e card archivio | 1:1 | 800x800 o 1200x1200 px | Riempie le griglie in modo ordinato e regge bene il ritaglio. |
| Immagine nel contenuto | 3:2 o 16:9 | 1600 px di larghezza | Copre bene le colonne editoriali e resta nitida anche su schermi retina. |
| Featured image dell’articolo | 16:9 | 1600x900 o 1920x1080 px | È un equilibrio solido tra impatto visivo e peso del file. |
| Hero o cover full width | 21:9 o 16:9 | 2400x1350 o 2560x1440 px | Ha senso solo se il layout occupa davvero tutta la larghezza della pagina. |
| Logo o marchio | Fisso, meglio vettoriale | SVG se il flusso lo consente, altrimenti 600x300 px | Evita sfocature nel menu, nell’header e nei footer. |
La dimensione giusta, quindi, è quasi sempre una combinazione di larghezza utile, rapporto d’aspetto e coerenza con il blocco che la ospita. Una volta chiarito questo, il passo successivo è scegliere il formato più adatto.
Formato e peso del file contano quasi quanto i pixel
Su WordPress non mi limito a chiedere “JPEG o PNG?”. Guardando il contenuto dell’immagine, spesso la scelta migliore cambia subito. Le foto rendono bene con JPEG, WebP o AVIF; le grafiche con trasparenza restano spesso nel perimetro PNG; i loghi sono più stabili in SVG, se la pipeline del sito lo permette in sicurezza.
| Formato | Quando lo uso | Punti forti | Limiti da ricordare |
|---|---|---|---|
| JPEG | Fotografie, reportage, immagini editoriali | Compatibilità ampia e peso contenuto | Niente trasparenza; con compressione aggressiva compaiono artefatti. |
| WebP | Quasi tutte le immagini del sito | Ottimo compromesso tra qualità e dimensione | Va verificato il comportamento del tema e della pipeline di esportazione. |
| AVIF | Foto ad alta qualità e pagine dove la performance conta molto | Compressione molto efficiente e resa elevata | Il supporto dipende anche dalle librerie immagine del server. |
| PNG | Loghi, screenshot, elementi con trasparenza | Perfetto per bordi netti e canale alpha | Pesa di più sulle fotografie e sui contenuti molto ricchi di colore. |
La documentazione ufficiale di WordPress indica che AVIF è supportato dall’editor dalla versione 6.5, ma questo non significa che ogni hosting lo gestisca allo stesso modo. Se la tua stack di elaborazione immagini non è aggiornata, il file può essere accettato ma non sempre lavorato con la stessa fluidità di JPEG o WebP.
Nel mio flusso editoriale uso alcune soglie pratiche: 120-300 KB per una foto dentro l’articolo, 300-600 KB per una hero molto visibile e meno di 50 KB per icone o piccoli elementi raster. Sono valori operativi, non leggi universali, ma aiutano a tenere sotto controllo i tempi di caricamento senza sacrificare la resa. A questo punto il tema non è più solo il formato: conta anche come WordPress crea e distribuisce le varianti della stessa immagine.
Come WordPress genera e serve le immagini
WordPress non pubblica una sola immagine, ma ne costruisce diverse versioni al momento dell’upload. La documentazione ufficiale ricorda che dal 4.4 il markup include srcset e sizes, così il browser può scegliere il file più adatto in base allo spazio disponibile. In pratica, questo significa che una foto ben preparata può servire bene sia su mobile sia su desktop senza dover caricare ogni volta l’originale.
| Versione | Dimensione tipica | Uso pratico |
|---|---|---|
| thumbnail | 150x150 px | Miniature, griglie, anteprime molto piccole. |
| medium | 300x300 px max | Preview leggere e contenuti laterali. |
| medium_large | 768 px di larghezza | Taglio intermedio utile per layout responsive. |
| large | 1024x1024 px max | Immagini standard in articoli e pagine interne. |
| full | Originale o copia scalata | Da usare solo quando il layout richiede davvero il massimo dettaglio. |
Per le immagini molto grandi c’è un’altra regola da conoscere: WordPress applica una soglia di sicurezza a 2560 px. Se il file supera quel limite in larghezza o altezza, il sistema può creare una versione scalata che diventa la più grande effettivamente usabile sul front end. Questo evita di servire file eccessivi, ma cambia anche il modo in cui devi pensare agli originali: caricare 5000 px non ti garantisce un vantaggio reale se il tema non li mostra mai.
Per i temi, poi, esiste una differenza che molti sottovalutano: la featured image usata da the_post_thumbnail() non coincide sempre con la miniatura gestita in Settings > Media. Se sviluppo o personalizzo un tema, registro dimensioni dedicate con add_image_size() e, se serve, imposto la featured image con set_post_thumbnail_size(). Quando cambio queste regole, però, devo sempre rigenerare le miniature già presenti, altrimenti la libreria rimane incoerente. Ed è proprio qui che nascono molti dei problemi pratici nei siti WordPress.
Gli errori che vedo più spesso nei siti WordPress
Le immagini create male quasi mai dipendono da una sola scelta sbagliata. Di solito si sommano piccole imprecisioni che, alla fine, rendono il sito più lento o meno pulito visivamente.
- Caricare file enormi “per stare tranquilli” e poi usare solo una piccola porzione dell’immagine: si spreca banda e spazio senza migliorare la qualità percepita.
- Usare lo stesso crop per ogni blocco: una card, una hero e una gallery hanno esigenze diverse e non meritano lo stesso ritaglio.
- Cambiare le misure del tema senza rigenerare le immagini: le vecchie versioni rimangono nel sito e il risultato diventa incoerente.
- Ignorare il mobile: un’immagine perfetta su desktop può tagliare male volti e dettagli sullo smartphone.
- Confondere la featured image con la miniatura media: il fatto che WordPress mostri una certa size non significa che sia quella giusta per ogni template.
La conseguenza più comune è doppia: da un lato peggiora la resa visiva, dall’altro si allungano i tempi di caricamento. Nei siti editoriali e nelle homepage ricche di immagini questo si sente subito, soprattutto nel caricamento iniziale e nel layout delle card.
Per evitare questi errori non servono soluzioni complicate. Serve una routine semplice e ripetibile, che io applico prima di pubblicare ogni pagina importante.
La checklist che uso prima di pubblicare una pagina
Se devo consegnare una pagina pulita e leggera, controllo sempre gli stessi punti. È un passaggio rapido, ma fa una differenza concreta nella qualità finale.
- Definisco prima il contenitore reale dell’immagine, non il file originale.
- Esporto il file a 1,5-2 volte la larghezza visibile, senza superare inutilmente i 2560 px quando non serve.
- Scelgo il formato in base al contenuto: JPEG, WebP o AVIF per le foto; PNG per trasparenze e grafiche; SVG per i loghi, se il progetto lo consente.
- Controllo che il crop non tagli elementi importanti come volti, testi o marchi.
- Verifico il peso finale del file e guardo l’anteprima sia su desktop sia su mobile.
- Se ho cambiato il tema o le size, rigenero la libreria media prima di considerare chiuso il lavoro.
Quando tengo questa disciplina, WordPress lavora a mio favore: serve immagini più adatte grazie a srcset, mantiene la qualità dove serve e non trascina file inutili nel resto del sito. La regola migliore, in pratica, non è caricare la foto più grande possibile, ma caricare la versione giusta per il layout giusto.
