Generatore di immagini segnaposto (placeholder)

A cosa serve un’immagine segnaposto

Un’immagine segnaposto (in inglese placeholder) è un’immagine provvisoria con le dimensioni esatte di quella definitiva. Serve a progettare e collaudare pagine web, app, newsletter e presentazioni prima di avere le foto vere: il layout prende forma, si vede subito se le proporzioni funzionano e non si perde tempo a cercare immagini di prova. Il segnaposto mostra di solito le sue dimensioni, così chi sviluppa sa quale immagine servirà al suo posto.

Questo generatore crea il segnaposto nel tuo browser, senza servizi esterni e senza collegamenti a URL che un giorno potrebbero non rispondere più: il file è tuo e puoi tenerlo nel progetto.

Come usare il generatore

Scegli una misura pronta o scrivi larghezza e altezza in pixel. Poi decidi lo sfondo: tinta unita, sfumato con l’angolo che preferisci oppure scacchi, utile per ricordare che l’immagine finale potrà avere trasparenza. Il colore del testo viene scelto in automatico con il contrasto migliore sullo sfondo (rapporto di contrasto calcolato con la formula WCAG), ma puoi impostarlo a mano. Puoi scrivere un testo, scegliere il carattere, arrotondare gli angoli e aggiungere un’icona. L’anteprima si aggiorna subito.

Misure comuni per sito, social e schermi

Queste sono le misure che compaiono più spesso nei progetti. Scegliendole dal menu “Misura pronta” le imposti con un clic.

Queste misure sono indicative: le piattaforme social cambiano di tanto in tanto i formati consigliati, quindi controlla le indicazioni aggiornate di ciascuna prima della pubblicazione.

PNG, JPG, WebP o SVG: quale formato scegliere

L’SVG è un disegno vettoriale: si scala senza perdere nitidezza e il file pesa poche centinaia di byte, ideale per prototipi e mockup. Il PNG è un’immagine a pixel senza perdita e mantiene la trasparenza degli angoli arrotondati. Il JPG è pensato per le fotografie e non gestisce la trasparenza: per questo gli angoli arrotondati vengono riempiti di bianco. Il WebP è più leggero a parità di qualità e oggi lo leggono tutti i browser moderni. Se non sai quale usare, scegli il formato che userai per le immagini vere, così il collaudo è realistico anche per il peso della pagina.

Versioni Retina e file ZIP con più dimensioni

Gli schermi ad alta densità mostrano le immagini nitide solo se hanno più pixel di quelli indicati nel layout. Per questo puoi scaricare ogni segnaposto anche a 2x e 3x: il file ha il nome con il suffisso @2x o @3x. Per un progetto con molte immagini diverse apri il riquadro “Più dimensioni in un colpo solo”, scrivi una misura per riga, scegli formati e densità e scarica un solo ZIP con tutto: per esempio 5 misure in PNG a 1x e 2x sono 10 file pronti da trascinare nel progetto.

Snippet pronti per HTML, Markdown, CSS e React

Sotto l’anteprima trovi il codice da incollare. Il tag HTML include larghezza e altezza, che aiutano il browser a riservare lo spazio prima del caricamento ed evitano salti del layout. Per il CSS è pronta la regola con aspect-ratio. Con l’opzione “Data URI SVG” il segnaposto è incorporato direttamente nel codice, comodo per i prototipi di una sola pagina e per le email di prova.

Segnaposto e prestazioni: qualche buona pratica

Un segnaposto serve solo in sviluppo: prima della pubblicazione sostituiscilo con l’immagine vera, con un testo alternativo descrittivo, perché un’immagine che dice “800 × 600” non aiuta chi usa un lettore di schermo né i motori di ricerca. Mantieni le stesse dimensioni e le stesse proporzioni dell’immagine finale: è il modo più semplice per non avere sorprese quando arrivano le foto.

Privacy

Tutto avviene nel tuo browser: il disegno, la conversione nei vari formati e la creazione dello ZIP. Nessun dato viene inviato a un server.

Domande frequenti