Generatore di immagini segnaposto

Un'immagine segnaposto è un elemento grafico provvisorio utilizzato quando la foto o l'illustrazione definitiva non è ancora pronta. Di solito è un rettangolo di colore uniforme con le dimensioni esatte dello spazio che occupa, spesso etichettato con le sue dimensioni — ad esempio un riquadro grigio 600×400 con la scritta "600 × 400". Designer e sviluppatori le inseriscono in mockup, wireframe e prototipi in modo che il layout sembri completo prima che arrivino le immagini reali. È conosciuta anche come dummy image, picture placeholder o immagine fittizia.

Punta un tag <img> sull'immagine. Il metodo più autonomo è un data URI, così non c'è nessun file separato da ospitare: <img src="data:image/svg+xml,…" width="600" height="400" alt="Segnaposto">. Clicca sulla scheda '<img>' qui e Copia: il tag completo — data URI con larghezza e altezza già impostati — si copia negli appunti, pronto da incollare. Puoi anche salvare il file scaricato e referenziarlo normalmente, ad es. <img src="/img/placeholder-600x400.png">.

Sì — ed è più rispettosa della privacy. Placehold.co, via.placeholder.com e dummyimage.com servono tutte le immagini dai loro server, il che aggiunge richieste di rete, può raggiungere limiti di utilizzo e significa che quei servizi tracciano quali pagine si collegano alle loro immagini. UtiloKit genera immagini segnaposto interamente nel tuo browser, quindi nessuna richiesta lascia mai il tuo dispositivo. Ottieni un file scaricabile o un data URI autonomo che funziona offline e non si interrompe mai se un servizio esterno va offline.

Le immagini segnaposto vengono utilizzate per mockup di siti web e app, wireframe, template email, consegna di design e sviluppo front-end mentre le risorse reali sono ancora in lavorazione. Riservano spazio esatto nel layout (il che previene il layout shift / CLS), aiutano a testare i breakpoint responsive e riempiono i contenuti dimostrativi nei template CMS e nelle librerie di componenti. Un singolo riquadro 1280×720 può sostituire ogni miniatura video in una griglia durante lo sviluppo, permettendo all'intero team di rivedere il layout senza aspettare le risorse di produzione.

Abbina le dimensioni esatte in pixel dello spazio che deve occupare, in modo che il layout non si sposti quando l'immagine reale viene caricata. Dimensioni comuni: 1200×630 per un'immagine di condivisione social/OG, 1080×1080 per un post quadrato su Instagram, 1280×720 per una miniatura video, 256×256 per un avatar, 1920×1080 per un banner hero a piena larghezza e 728×90 per un banner pubblicitario. Usa i preset di dimensioni e rapporto d'aspetto qui per impostarli con un solo clic, oppure digita qualsiasi larghezza e altezza personalizzata fino a 4000 px.

Digita la tua etichetta nel campo Testo — ad esempio "Hero", "Avatar" o "Slot annuncio 300×250". Lascialo vuoto e l'immagine si etichetta automaticamente con le sue dimensioni (es. "600 × 400"). Puoi impostare anche il colore del testo e la dimensione del carattere, così uno spazio in un mockup indica chiaramente cosa rappresenta. Questo è particolarmente utile nelle revisioni di design quando i clienti hanno bisogno di capire cosa rappresenta ogni area immagine senza vedere le risorse finali.

Per un riquadro a tinta unita con testo, SVG è di solito la scelta migliore: pesa solo poche centinaia di byte, rimane nitidissimo a qualsiasi dimensione e si incolla ordinatamente come data URI — ideale per il web. Usa PNG quando uno strumento richiede un file raster o desideri la trasparenza, JPG quando qualcosa richiede un formato fotografico, e WebP per il file raster più leggero. Questo strumento esporta tutti e quattro i formati, e SVG è il predefinito perché è il più pratico per i flussi di lavoro di sviluppo web.

Lorem Picsum (picsum.photos) serve fotografie reali casuali, il che è ottimo quando vuoi immagini realistiche, ma significa che ogni caricamento è una foto diversa prelevata da un server di terze parti. Questo strumento crea riquadri a tinta unita deterministici con le tue dimensioni, colori ed etichetta esatti — prevedibili, leggeri e generati offline nel tuo browser, quindi nulla viene caricato e il risultato non cambia mai tra un caricamento e l'altro. Usa Picsum per mockup fotografici realistici; usa questo per segnaposto di layout puliti e controllati.

I servizi ospitati come placehold.co ti forniscono un URL come placehold.co/600x400 perché un server renderizza l'immagine ad ogni richiesta. Questo strumento gira interamente nel tuo browser senza server, quindi invece di un URL di hotlink ti fornisce un data URI autonomo che puoi incollare ovunque vada un URL (un src di <img>, un url() CSS), oltre a un file SVG, PNG, JPG o WebP scaricabile. Nessuna richiesta di rete, nessun limite di utilizzo e funziona anche offline.

Imposta lo sfondo su un grigio chiaro come #e2e8f0 e il testo su un grigio medio come #475569 — questo è il classico aspetto neutro del segnaposto. Seleziona il preset di palette Grigio per applicare entrambi i colori in una volta, scegli le dimensioni e scarica. Il grigio si legge come "intenzionalmente vuoto", quindi il segnaposto non compete visivamente con il design circostante durante la revisione. Questa è la convenzione standard usata da Figma, Sketch e dalla maggior parte dei sistemi di design per gli slot segnaposto.

Sì, completamente. Lo strumento funziona in qualsiasi browser moderno, inclusi Safari su iPhone e Chrome su Android. Imposta le dimensioni, scegli i colori, aggiungi testo e scarica o copia il data URI direttamente dal tuo telefono. È particolarmente comodo quando si revisiona un layout responsive sul proprio dispositivo e si ha bisogno di riempire rapidamente uno spazio immagine per uno screenshot o una consegna di design. Non è richiesta l'installazione di alcuna app — apri semplicemente la pagina nel browser del tuo cellulare.

Seleziona un preset di rapporto d'aspetto (1:1, 4:3, 3:2, 16:9, 2:1 o 9:16) e l'altezza si aggiorna automaticamente in base alla larghezza — inserisci 1280 di larghezza con 16:9 e ottieni 1280×720. Attiva "Blocca rapporto d'aspetto" per mantenere quella proporzione mentre ridimensioni una delle due dimensioni. Questo è utile per gli slot immagine responsive che devono mantenere un rapporto fisso tra i breakpoint, o per progettare griglie di card dove ogni miniatura deve avere la stessa proporzione.

Sì — ogni immagine è gratuita, senza registrazione, filigrana, account o limite di utilizzo. A differenza di alcuni strumenti online che limitano gli utenti gratuiti a un certo numero di download al giorno o richiedono la registrazione via email, questo strumento non ha alcuna restrizione. È un'alternativa rispettosa della privacy a placehold.co, dummyimage.com e via.placeholder.com: invece di collegarti ai loro server generi l'immagine localmente e possiedi il file o il data URI in modo diretto, senza dipendere dalla disponibilità di servizi terzi.