Generatore di immagini placeholder: PNG, JPG, WebP o SVG | We.Inc
Crea un'immagine placeholder di qualsiasi dimensione con i tuoi colori e la tua etichetta. Scarica PNG, JPG o WebP, oppure copia un data URL SVG inline che non richiede alcun hosting di immagini.
Generatore di immagini placeholder
Imposta larghezza, altezza, sfondo, colore del testo ed etichetta, e questo generatore disegna un placeholder nel tuo browser. Scaricalo come PNG, JPG o WebP, oppure copia un minuscolo data URL SVG da incollare direttamente in un tag img o nel CSS, così il tuo mockup non dipende mai da un servizio di immagini esterno.
Scegli il formato in base a dove va il placeholder
Formato
Ideale per
Note
SVG data URL
Prototipi ed esempi di codice
Nessun file, nessuna richiesta, nitido a ogni zoom
PNG
File di design, caricamenti in un CMS
Senza perdita, supportato da ogni browser
JPG
Posti che rifiutano il PNG
Con perdita, senza trasparenza
WebP
Testare il peso reale della pagina
Con perdita in questo caso, file piccoli
I servizi di placeholder online sono comodi finché uno non va giù o viene bloccato da un filtro di rete, e allora ogni riquadro grigio della tua demo si rompe. Questo strumento crea invece l'immagine in locale: ottieni un file vero oppure una stringa SVG autonoma che vive dentro il tuo codice.
Scegli una dimensione comune dall'elenco o scrivi la tua larghezza e altezza, fino a 4000 pixel per lato.
Scegli i colori di sfondo e del testo. Lascia vuota l'etichetta per stampare le dimensioni, oppure scrivi qualcosa come Foto hero.
L'anteprima viene disegnata come SVG nel tuo browser. Copia il data URL o il tag img già pronto per il codice.
Per un file vero, scegli PNG, JPG o WebP e scarica. Lo codifica il canvas del tuo browser, quindi non viene caricato nulla.
Mantieni sempre gli attributi width e height sull'img, anche per i placeholder, così il layout non salta quando arriva la foto vera.
Etichetta i placeholder con ciò che andrà lì, come Foto del team o Fronte prodotto, così chi gestisce i contenuti sa cosa fornire.
Usa uno sfondo grigio medio con testo più scuro; i riquadri bianchi puri spariscono sulle sezioni bianche della pagina.
Sostituisci ogni placeholder prima del lancio. Cerca data:image/svg+xml nel tuo codice per trovare quelli rimasti.
Domande frequenti
Queste immagini scadono?
No. Un file scaricato è tuo, e un data URL SVG è solo testo dentro la tua pagina, quindi non c'è nessun server dietro che possa sparire.
Perché il JPG scaricato non ha trasparenza?
JPEG non ha un canale alfa. Ogni placeholder qui ha comunque uno sfondo pieno, ma scegli PNG o WebP se modificherai il file in seguito e ti serve un'area trasparente.
Posso usare il data URL SVG nel CSS?
Sì. Racchiudilo in url("...") dentro background-image. Lo strumento sostituisce già le virgolette doppie con quelle singole e codifica #, < e > così la stringa funziona dentro il CSS e gli attributi HTML.
Quali browser possono esportare WebP?
L'esportazione dal canvas in image/png è obbligatoria per ogni browser, mentre JPEG e WebP sono facoltativi. Se un browser non riesce a creare WebP, restituisce silenziosamente un PNG, e il nome del file qui lo indicherà.
Placeholder che aiutano invece di nascondere i problemi
Un buon placeholder ha lo stesso rapporto d'aspetto dell'immagine finale. Se l'hero sarà una foto 16:9, fai il prototipo con 1920 per 1080, non con un quadrato, altrimenti il layout che approvi verrà ritagliato male in seguito.
Scrivi la dimensione prevista sul riquadro. Designer, copywriter e fotografi possono così vedere cosa consegnare senza aprire il codice.
Data URL o file
Un data URL mette i byte dell'immagine direttamente nell'src. Per un piccolo SVG costa meno di una richiesta di rete e rende lo snippet portabile: incollalo ovunque e viene visualizzato.
Per tutto ciò che caricherai in un CMS, salverai in un file di design o terrai a lungo, scarica invece un file vero. I data URL lunghi sono difficili da leggere in una code review.
Dimensioni comuni dei placeholder
Preset disponibili nel generatore
Uso
Larghezza
Altezza
Card Open Graph
Hero, 16:9
Miniatura del blog
Post quadrato
Storia verticale
Avatar
Foto prodotto, 4:5
Banner leaderboard
Placeholder in un tag img e nel CSS
Placeholder SVG inline, nessuna richiesta
Lo stesso riquadro grigio da 640 per 360 usato due volte: una come sorgente di immagine, una come sfondo CSS.
Card Open Graph
Hero, 16:9
Miniatura del blog
Post quadrato
Storia verticale
Avatar
Foto prodotto, 4:5
Banner leaderboard
Il tuo browser non è riuscito ad aprire un canvas.
Non è stato possibile codificare l'immagine.
Salvato {name} ({n} KB).
Crea un placeholder
Scegli una dimensione, i colori e un'etichetta facoltativa. Copia un data URL SVG o un tag img, oppure scarica un PNG, JPG o WebP creato nel tuo browser.