Generatore di immagini segnaposto (immagini di esempio)

Basta indicare larghezza, altezza, colore di sfondo e colore del testo per generare nel browser un'immagine fittizia e scaricarla in PNG. L'immagine non viene inviata a un server.

Dimensioni tipiche delle immagini di esempio

Dimensione	Usi principali
300×200	Segnaposto per banner piccoli e spazi pubblicitari
800×600	Immagini inserite negli articoli di un blog, immagini provvisorie nei wireframe
1200×630	Immagine OGP (anteprima di condivisione su Facebook e X/Twitter)
1080×1080	Post quadrati su Instagram e altri social
1920×1080	Immagini hero in Full HD, sfondi per presentazioni a scorrimento
640×360	Miniature video in 16:9 e miniature nelle interfacce a schede

Che cos’è un’immagine segnaposto

Un’immagine segnaposto è un sostituto che tiene un posto finché la fotografia o l’illustrazione vera è ancora di là da venire. Non è altro che un rettangolo a tinta unita della misura che lei indica, di solito con quella misura scritta sopra, e serve a provare un impaginato o a montare un modellino. Proprio perché il suo contenuto nulla significa, lo sguardo resta sulla disposizione e sui margini anziché sull’immagine.

Dia a questo strumento una larghezza, un’altezza, un colore di sfondo e uno del testo: disegnerà all’istante un’anteprima che può salvare come PNG. Il testo sovrapposto è facoltativo: lasciandolo vuoto vi entrano da sé le cifre «larghezza × altezza», sicché più misure poste l’una accanto all’altra si distinguono a colpo d’occhio. I colori si scelgono dal selettore oppure si digitano come codici esadecimali, aderendo con esattezza alla tavolozza di un bozzetto. Tutto nasce nel browser: l’immagine non viene mai inviata a un server.

Come si fa un’immagine segnaposto

Stabilisca le misure Inserisca larghezza e altezza in pixel. Le impostazioni 300×200, 800×600, 1200×630 (OGP) e 1080×1080 riempiono entrambi i campi in una volta.
Scelga i colori Fissi il colore di sfondo e quello del testo. Oltre al selettore, può digitare direttamente un codice colore esadecimale.
Aggiunga del testo se occorre Il testo sovrapposto è facoltativo. Lasciandolo vuoto compare da sé «larghezza × altezza», che spesso basta.
Controlli l’anteprima Si ridisegna a ogni cambiamento. Guardi qui che il testo non si perda sullo sfondo.
Scarichi il PNG «Scarica PNG» lo salva sulla sua macchina. Il file è costruito interamente sul suo apparecchio e non va altrove.

Consigli per sfruttarlo al meglio

Con il preset «1200×630 (OGP)» ottenete subito un'immagine della dimensione standard, che nelle anteprime di condivisione di Facebook e X (già Twitter) non viene tagliata.
Lasciando vuoto il testo sovrapposto compaiono automaticamente i valori «larghezza×altezza»: quando confrontate più formati in un wireframe capite a colpo d'occhio quale sia quale.
I colori di sfondo e del testo si scelgono con il selettore oppure digitando direttamente il codice esadecimale, così da rispettare con precisione la palette del vostro mockup.
L'immagine generata viene solo scaricata in locale: non viene mai inviata né conservata sui server di questo sito.

Dove le immagini segnaposto sono utili

Montare wireframe e modellini

Ancor prima che le fotografie siano decise, collocare riquadri esattamente della misura prevista consente di far avanzare l’impaginazione. Poiché la misura è scritta sull’immagine, non se ne scambiano due.

Riservare la cornice di un’immagine OGP

1200×630 è la misura che compare in una scheda di condivisione senza venire tagliata. Tiene il posto finché il visual definitivo non è pronto.

Collaudare una funzione di caricamento immagini

Potendosi produrre all’istante un’immagine di misure qualsiasi, si presta a provare i limiti di un modulo e la tenuta della presentazione.

Saggiare un accostamento di colori

Ne allinei parecchie variando sfondo e testo e vedrà presto se il divario di chiarezza lasci il testo leggibile.

Quando vuole lavorare su un’immagine reale

Per mutare le misure di un’immagine che già possiede prenda il ridimensionamento delle immagini; per ritagliarne la sola parte voluta, il ritaglio delle immagini.

Termini sulle immagini segnaposto

Segnaposto: Elemento sostitutivo che tiene un luogo finché non sia pronto ciò che propriamente vi spetta. Oltre alle immagini, il Lorem Ipsum svolge il medesimo ufficio per il testo.
Modellino (mockup): Esemplare immobile fatto per verificare come apparirà una cosa una volta compiuta. Consente di giudicare disposizione e margini prima che il materiale vero arrivi.
Immagine OGP: L’immagine che compare come scheda quando una pagina è condivisa sui social. 1200×630 è la misura d’uso corrente; attenervisi rende improbabile il taglio ai bordi.
Codice colore esadecimale: Modo di scrivere un colore nella forma #RRGGBB, indicando l’intensità di rosso, verde e blu con due cifre ciascuna, da 00 a FF.
Pixel: L’unità minima di cui un’immagine è composta. Larghezza e altezza qui si indicano in tale unità.
PNG: Formato d’immagine a compressione senza perdita. Un’immagine fatta di un fondo a tinta unita e di poco testo vi si presta bene, e il file resta piccolo.

Domande frequenti

Si usano come «immagini fittizie» nei mockup e nei wireframe di siti e applicazioni, dove il materiale definitivo non è ancora pronto. Il vantaggio è poter procedere con il controllo dell'impaginazione e con lo sviluppo senza attendere le fotografie o le illustrazioni finali.

No. Lo strumento disegna e converte in PNG l'immagine esclusivamente nel browser tramite l'elemento <canvas>, quindi i dati non vengono mai caricati su un server. Premendo il pulsante di download il file viene salvato direttamente sul vostro dispositivo.

I principali social, fra cui Facebook e X (già Twitter), consigliano 1200×630 px (rapporto di circa 1,91:1). Con dimensioni molto inferiori l'immagine risulta sgranata, mentre con un rapporto diverso viene ritagliata e può tagliarsi in punti indesiderati.

Questo strumento accetta valori da 1 a 4000 px. L'elemento <canvas> dei browser ha comunque limiti implementativi propri, quindi è preferibile evitare dimensioni estreme, dell'ordine di decine di migliaia di pixel per lato.

A proposito — la cultura delle immagini segnaposto

Nella produzione web esiste da tempo l'abitudine di usare immagini segnaposto in attesa delle fotografie o delle illustrazioni definitive. È la stessa idea del «lorem ipsum» della tipografia, il testo fittizio usato quando i contenuti non sono ancora pronti: qui la parte del testo la fa l'immagine.

Nel 2014 è comparso «Lorem Picsum», un servizio che distribuisce fotografie reali scelte a caso e che si è diffuso ampiamente come fornitore di immagini segnaposto. Basta indicare larghezza e altezza nell'URL per ricevere una foto, e questa semplicità gli è valsa l'adozione in moltissimi mockup e tutorial. Dipendere da un servizio esterno, però, lo rende poco pratico offline o in progetti riservati.

Questo strumento sceglie invece di non appoggiarsi ad alcun servizio esterno e genera all'istante, con il solo <canvas> del browser, un'immagine a fondo pieno con un'etichetta di testo. Non ha il realismo di una fotografia, ma per verificare dimensioni e proporzioni o provare l'impaginazione di un'anteprima social — quando serve semplicemente «un'immagine della misura giusta» — svolge perfettamente il suo compito.

Vedi tutte le curiosità