Immagine segnaposto
Placeholder Image
Genera un segnaposto a tinta unita o sfumato di qualsiasi dimensione, con le misure scritte sopra.
Un rettangolo grigio della dimensione esatta che serve, con sopra scritte le dimensioni, per un'impaginazione che aspetta le fotografie vere. Esce come data URI SVG da incollare dritto nel CSS, che è più piccolo di qualsiasi PNG e non costa nessuna richiesta.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI SVG
580 byteCodificato in percentuale anziché in base64: circa il 25% più piccolo, e resta leggibile. Incollalo direttamente in background-image: url("…")
Come si usa
Impostare la dimensione
Le dimensioni in pixel esatte dello spazio da riempire. Con l'etichetta attiva vengono disegnate sull'immagine, ed è quello che rende evidente in un'impaginazione un riquadro della dimensione sbagliata.
Scegliere fra tinta unita, sfumatura e rumore
La tinta unita e la sfumatura restano SVG. Il rumore deve essere un PNG, perché un campo casuale pixel per pixel scritto in SVG sarebbe qualche megabyte di rettangoli.
Copiare il data URI
Codificato in percentuale invece che in Base64: circa il 25% più piccolo, e nel foglio di stile resta leggibile.
Domande frequenti
Perché per il rumore non è disponibile la versione SVG?
Perché l'SVG non ha una primitiva di casualità per pixel che venga disegnata identica su tutti i motori. Esprimerlo alla lettera vuol dire un rettangolo per pixel, che per un riquadro di 400 × 300 fa 120.000 elementi.
Il rumore cambia ogni volta?
No: parte da un seme, quindi le stesse impostazioni danno la stessa immagine. Un segnaposto che cambiasse a ogni disegno renderebbe inutile una suite di test visivi.
Si possono usare in produzione?
Il data URI sì: sono poche centinaia di byte e non danno mai 404, cosa che di un servizio esterno di segnaposto non si può dire. Basta ricordarsi di toglierli, perché un segnaposto andato in produzione in una revisione del codice non si vede.
Può ricevere da
BlurHash e ThumbHash
BlurHash / ThumbHash
Codifica un’immagine in una breve stringa BlurHash o ThumbHash da usare come segnaposto durante il caricamento.
Generatore di lorem ipsum
Lorem Ipsum Generator
Genera paragrafi, frasi o parole segnaposto in latino, inglese, coreano, giapponese o cinese.
Generatore di avatar
Avatar Generator
Genera da un nome o da un indirizzo e-mail un identicon o un avatar con le iniziali sempre uguale a sé stesso, in SVG o PNG.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
BlurHash e ThumbHash
BlurHash / ThumbHash
Codifica un’immagine in una breve stringa BlurHash o ThumbHash da usare come segnaposto durante il caricamento.
Mockup su dispositivo
Device Mockup
Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.
Da immagine a Base64 o data URI
Image to Base64 / Data URI
Codifica un’immagine in una stringa Base64 o in un data URI pronto da incollare in CSS, HTML o JSON.
Togliere lo sfondo
Background Remover
Elimina uno sfondo piatto o di un colore solo lavorando in OKLab e restituisce un PNG trasparente, con un pennello per rifinire i bordi.
Togliere i dati EXIF
EXIF Remover
Elimina dalle foto i metadati di fotocamera, GPS e modifica, lasciando i pixel intatti.
Generatore di favicon
Favicon Generator
Produce l’intero corredo di favicon — ICO, PNG, icona per Apple touch, manifesto web — più l’HTML da incollare.