In breve: le immagini placeholder sono grafiche fittizie, grigie (o colorate), alle dimensioni esatte, che sostituiscono le foto reali mentre progetti. Il loro vero valore è che riservano lo spazio corretto in anticipo, così il layout si comporta allo stesso modo prima e dopo l'arrivo delle grafiche finali — niente reflow, niente sorprese. Questa guida copre quando usarle, quale formato esportare e come evitare i layout shift.
Aspettare la fotografia definitiva prima di costruire un layout è al contrario. Le immagini placeholder ti permettono di fissare prima le dimensioni, poi di inserire le grafiche reali senza che il design si sposti sotto di te.
Perché riservare lo spazio, non solo riempirlo
La cosa più preziosa che fa un placeholder è tenere la larghezza e l'altezza esatte che userà l'immagine reale. Se un layout è costruito attorno a immagini senza dimensioni riservate, inserire le grafiche finali fa saltare tutto — il testo va a capo, i pulsanti si spostano, e sul web questo compare come Cumulative Layout Shift. Progettare fin dall'inizio con placeholder di dimensioni corrette fa sì che lo scambio finale cambi l'immagine, non la posizione.
Rispetta dimensioni e proporzioni reali
Un placeholder è utile solo se corrisponde a ciò che arriverà. Imposta le dimensioni in pixel effettive e l'aspect ratio dell'immagine finale — un hero 16:9, un avatar 1:1, una thumbnail 4:3 — così il mockup rispecchia la realtà. Etichettare ogni placeholder con la sua dimensione (molti generatori la stampano sull'immagine) facilita l'individuazione di un disallineamento in fase di revisione.
Retina e alta densità
Su schermi ad alta densità un'immagine ha bisogno di più pixel fisici della sua dimensione di layout. Esportare un placeholder a 2×, 3× o 4× ti fa testare come apparirà l'asset reale sui display retina e confermare di aver pianificato il file più grande che servirà alla versione finale.
Quale formato esportare
- PNG / WebP — per mockup e prototipi a schermo.
- SVG — indipendente dalla risoluzione, minuscolo, ideale quando la dimensione esatta è ancora fluida.
- Base64 / Data URI — incorpora il placeholder direttamente in HTML o CSS, comodo per un prototipo autonomo senza file esterni.
Un flusso pratico
- Elenca gli slot immagine del tuo layout e le loro dimensioni reali.
- Generali nel Generatore di Immagini Placeholder — usa la modalità batch per produrre tutte le dimensioni in una volta.
- Inseriscili nel design e verifica che nulla si sposti quando ridimensioni la viewport.
- Sostituisci le grafiche reali una alla volta; poiché lo spazio è riservato, il layout resta fermo.
Se ti serve anche testo fittizio per riempire il contenuto attorno a quelle immagini, abbina il Generatore di Lorem Ipsum così l'intero mockup si legge con una densità realistica.
Errori comuni da evitare
- Usare placeholder con proporzioni sbagliate, così l'immagine reale viene ritagliata in modo imprevisto.
- Non riservare le dimensioni dell'immagine, causando layout shift quando arrivano le finali.
- Ignorare lo scaling retina e sottostimare le dimensioni del file.
- Mandare in produzione un placeholder perché non è mai stato sostituito.