Generatore di immagini segnaposto

Come funziona

1. Definisci le dimensioni: inserisci la larghezza e l'altezza in pixel della tua immagine di riempimento.
2. Personalizza l'aspetto: scegli il colore di sfondo, il colore del testo e l'etichetta da visualizzare (o lascia vuoto per visualizzare le dimensioni).
3. Usa o scarica: copia l'URL dell'immagine per usarla in HTML/CSS, o scarica direttamente il PNG per i tuoi mockup e design.

Perché usare il generatore di immagini di riempimento?

Durante lo sviluppo web e la creazione di mockup, spesso si ha bisogno di immagini prima che il contenuto reale sia pronto. Le immagini di riempimento occupano lo spazio dei layout per mostrare le proporzioni, testare il comportamento responsive e comunicare l'intento del design ai clienti. Invece di cercare foto di stock o creare immagini vuote a mano, questo strumento genera all'istante immagini correttamente dimensionate con le dimensioni e i colori desiderati.

Funzionalità

• Dimensioni personalizzate: qualsiasi larghezza e altezza in pixel, formati quadrato, ritratto, paesaggio o banner.
• Personalizzazione dei colori: definisci il colore di sfondo e del testo tramite codici hex o selettori di colore.
• Testo etichetta personalizzato: visualizza qualsiasi testo sull'immagine, o lascia per impostazione predefinita l'etichetta delle dimensioni (per es. 400×300).
• URL istantaneo: ottieni un URI di dati da incollare direttamente negli attributi src per testare.
• Download PNG: scarica l'immagine di riempimento come file PNG da usare nei tuoi strumenti di design.

Domande frequenti

Posso usarlo negli attributi src HTML?

Sì. L'immagine generata è disponibile come URI di dati che puoi incollare direttamente in un attributo <img src=""> del tuo HTML. Non è necessario alcun hosting né URL esterno.

Quali dimensioni sono comuni per le immagini di riempimento?

Dimensioni comuni: immagini principali (1200×630), miniature di articoli (400×300), avatar (100×100), immagini Open Graph (1200×628) e banner pubblicitari (728×90). Inserisci qualsiasi dimensione personalizzata in base alle tue esigenze.

Come usare le immagini di riempimento in CSS?

Copia l'URI di dati e usalo in sfondo CSS: background-image: url("data:image/png;base64,…"). Funziona in tutti i browser moderni e non richiede file esterni.

Breve storia dei servizi di immagini segnaposto

I servizi di immagini segnaposto sono emersi nel 2010 quando i web designer avevano bisogno di un modo rapido per riempire i mockup prima dell'arrivo degli asset definitivi. placehold.it, lanciato da Dave Reilly nel 2010, fu il primo servizio ampiamente utilizzato: incolla un URL come placehold.it/300x200 in qualsiasi tag <img> e ottieni un rettangolo grigio. placekitten.com seguì lo stesso anno, sostituendo i rettangoli con gattini casuali, e dummyimage.com (Russell Heimlich, 2010) aggiunse la personalizzazione dei colori. Le varianti capricciose proliferarono: fillmurray.com (foto di Bill Murray, 2013), placebeard.it (barbe, 2014), placecage.com (Nicolas Cage). I successori seri arrivarono più tardi: Lorem Pixel (defunto intorno al 2017) e Lorem Picsum di David Marby (2018), che serve foto casuali da Unsplash in qualsiasi dimensione. Intorno al 2014, Facebook ha reso popolare il pattern «skeleton screen»: mostrare forme grigie dove si caricheranno i contenuti. Entro il 2019, Wolt ha rilasciato BlurHash, una stringa di 20 byte che decodifica in un segnaposto sfocato a bassa risoluzione dell'immagine reale. Oggi, ThumbHash (Evan Wallace, 2023) e la proprietà CSS nativa aspect-ratio (Chrome 88, gennaio 2021) ti permettono di riservare lo spazio dell'immagine senza alcun servizio esterno.

Dimensioni standard delle immagini da memorizzare

• Open Graph (1200×630). La dimensione canonica per le anteprime di link definita dal protocollo Open Graph di Facebook. LinkedIn, Slack, Discord, Twitter (quando non è impostata una Twitter Card) ricadono tutti su questa. Rapporto 1,91:1.
• Twitter Card summary_large_image (1200×675). Rapporto 16:9 per le anteprime nel feed. Il 1200×628 che vedi citato è il vecchio standard, sostituito da 1200×675 nel 2023.
• Instagram (1080×1080 quadrato, 1080×1350 verticale, 1080×1920 story). Tutto ciò che supera 1080 di larghezza viene sottocampionato. Rapporto delle story: 9:16.
• Miniatura YouTube (1280×720). 16:9. YouTube genera queste automaticamente dai frame video; le miniature personalizzate caricate devono essere sotto i 2 MB.
• Dimensioni pubblicitarie IAB. L'Interactive Advertising Bureau ha standardizzato le dimensioni dei banner: 728×90 (leaderboard), 300×250 (rettangolo medio, la dimensione più acquistata a livello globale), 300×600 (mezza pagina), 160×600 (grattacielo largo), 320×50 e 320×100 (mobile).
• Favicons. 16×16 e 32×32 per le schede del browser, 180×180 per le icone Apple touch, 192×192 e 512×512 per manifest.json di Android, 512×512 minimo per i prompt di installazione PWA.
• Header email (600×200). La maggior parte dei client email limita la larghezza renderizzata a 600 px. Andare oltre viene schiacciato o appaiono barre di scorrimento in Outlook desktop.

Segnaposto e Core Web Vitals

I Core Web Vitals di Google (lanciati a maggio 2020) misurano l'esperienza dell'utente e alimentano il ranking di ricerca. Due delle tre metriche dipendono direttamente da come gestisci le immagini. CLS (Cumulative Layout Shift) penalizza i contenuti che saltano mentre la pagina si carica. La causa più comune: un <img> senza attributi espliciti width e height, che dà al browser zero spazio da riservare finché l'immagine non finisce di scaricarsi. Un punteggio superiore a 0,1 fallisce la metrica. La soluzione è banale: imposta sempre width e height, anche su immagini responsive, in modo che il browser possa calcolare il rapporto. LCP (Largest Contentful Paint) misura quando il più grande elemento visibile si carica. Per la maggior parte delle pagine quell'elemento è l'immagine hero. Qualsiasi cosa oltre 2,5 secondi fallisce. Strategie: servire formati moderni (WebP, AVIF), usare loading="lazy" sulle immagini sotto la piega (Chrome 76, agosto 2019), e usare fetchpriority="high" sull'hero. I segnaposto colmano visivamente il divario: skeleton screen per il layout, BlurHash o ThumbHash per un'anteprima istantanea della palette di colori dell'immagine reale.

Guida alla decisione dei formati immagine

• PNG (1996). Senza perdite, supporta la trasparenza, nessun problema di brevetti. Ideale per loghi, icone, screenshot, grafica con bordi netti. PNG-8 con colore indicizzato (256 colori) è drasticamente più piccolo di PNG-24 RGB e spesso invisibile per le icone UI.
• JPEG (1992). Con perdite, niente trasparenza, ottimizzato per le fotografie. Qualità 75-85 è il punto ideale per il web; visivamente indistinguibile dalla qualità 95 a metà della dimensione. Evita JPEG per qualsiasi cosa abbia bordi netti (testo, loghi): ottieni artefatti di ringing visibili.
• WebP (Google, 2010). 25-35% più piccolo di JPEG a parità di qualità visiva, anche più piccolo di PNG per il senza perdite. Supporta trasparenza, animazione, modalità con e senza perdite. Supporto browser: 97% al 2024. Scelta predefinita per i nuovi siti.
• AVIF (Alliance for Open Media, 2019). Basato sul codec video AV1. Circa il 50% più piccolo di JPEG, il 20% più piccolo di WebP. Costo CPU più elevato per la codifica. Supporto browser: ~93% al 2024, mancante sui Safari più vecchi. Usa dietro un fallback <picture>.
• SVG. Vettoriale. Scala all'infinito senza perdita di qualità. Un logo in SVG è spesso 500 byte contro 10 KB come PNG 512×512. SVG inline in HTML evita completamente una richiesta HTTP extra. Non usare per fotografie.
• Data URI. data:image/png;base64,... incorpora i byte dell'immagine direttamente in HTML o CSS. Risparmia una richiesta HTTP al costo di gonfiare il file circostante di ~33% (overhead base64). Vale la pena per minuscoli thumbnail segnaposto, mai per immagini hero.

Dove vengono effettivamente usate le immagini segnaposto

• Wireframe e mockup. Figma, Sketch, Adobe XD, Penpot supportano tutti il drag-and-drop di immagini segnaposto. I designer abbozzano layout prima che arrivi la direzione artistica, usando rettangoli grigi o il testo della dimensione come segnaposto visivi.
• Skeleton screen. Twitter, Facebook, YouTube, LinkedIn mostrano tutti segnaposto a blocchi grigi mentre i contenuti si caricano. La ricerca di Luke Wroblewski (2013) mostra che le skeleton screen fanno percepire il tempo di caricamento fino al 20% più veloce rispetto agli spinner.
• Storie dei design system. Storybook, Histoire e Ladle renderizzano anteprime di componenti che necessitano di immagini sostitutive. Un set coerente di segnaposto rende gli screenshot riproducibili tra le build CI.
• Mockup di email. Litmus, Email on Acid, i builder di template Mailchimp. I client email variano enormemente nel supporto delle immagini (Outlook desktop, Gmail web, iOS Mail), quindi i designer testano con segnaposto prima di passare agli asset di produzione.
• Prove di stampa. I layout di libri, le pagine di riviste e i design di confezioni usano segnaposto FPO («for position only») durante la composizione. Le dimensioni vivono nel layout molto prima che il fotografo consegni.
• Tutorial e documentazione. Quando scrivi «come costruire un componente card», hai bisogno di immagini sostitutive che non si rompano se la fonte cambia. I segnaposto auto-ospitati sopravvivono quando i servizi esterni chiudono (come ha fatto Lorem Pixel).
• Test A/B e prototipi. Testare rapidamente layout con tre diverse dimensioni di immagine è più veloce con segnaposto generati che ri-renderizzando gli asset reali.

Errori che danneggiano le prestazioni della pagina

• Dimenticare gli attributi width e height. La causa più comune di scarsi punteggi CLS. Anche con immagini responsive guidate da CSS, imposta i width e height intrinseci in modo che il browser riservi il rapporto corretto. I browser moderni calcolano aspect-ratio: width/height automaticamente da questi attributi dal 2020.
• Servire segnaposto 4096×4096 per display 200×200. Venti volte i byte senza alcun beneficio visivo. Abbina le dimensioni del segnaposto alla dimensione renderizzata effettiva, oppure usa srcset con varianti multiple.
• Testo alt vuoto o mancante. Gli screen reader annunciano «immagine» senza contesto. Per segnaposto puramente decorativi, usa esplicitamente alt="" per segnalare «salta questo». Per immagini di contenuto, scrivi la descrizione anche sui segnaposto in modo che il QA rilevi copy mancante.
• Inlining di data URI enormi. Un'immagine da 100 KB come base64 diventa ~133 KB all'interno del tuo HTML, blocca il parsing e rovina il caching (l'HTML solitamente non viene memorizzato nella cache in modo aggressivo, le immagini sì). Usa data URI solo sotto i ~2-4 KB.
• Dipendere da placehold.it / lorempixel / servizi esterni in produzione. Cadono. Lorem Pixel è scomparso intorno al 2017 e ha rotto migliaia di siti demo. Per tutorial, demo e storie, genera tu stesso i segnaposto o auto-ospitali.
• PNG per fotografie, JPEG per loghi. Una foto come PNG è 3-5 volte più grande della stessa immagine come JPEG. Un logo come JPEG ottiene brutti anelli di compressione attorno ai bordi. Scegli il formato per tipo di contenuto, non per abitudine.
• Saltare loading="lazy". Le immagini sotto la piega che si caricano ansiosamente competono per la larghezza di banda con l'hero. Aggiungi loading="lazy" a tutto ciò che è sotto il viewport. Nativo, nessuna libreria necessaria, supportato da Chrome 76 (agosto 2019) e Safari 15.4 (2022).

Altre domande frequenti

Perché l'etichetta della dimensione è così utile su un segnaposto?

Quando hai una dozzina di segnaposto in un layout in dimensioni diverse, l'etichetta ti dice immediatamente quale slot è quale. «400×300» su un rettangolo grigio è più informativo che indovinare se una card è 4:3 o 16:9. Designer e sviluppatori che rivedono un mockup possono individuare elementi mal dimensionati dall'altro lato della stanza.

Qual è la differenza tra BlurHash, ThumbHash e LQIP?

Tutti e tre codificano una minuscola anteprima di un'immagine che decodifica in un segnaposto sfocato. LQIP («low-quality image placeholder») è solo un piccolo JPEG (~100 byte a 2 KB). BlurHash (Wolt, 2019) codifica qualsiasi immagine in una stringa ASCII di 20-30 caratteri che memorizzi nel tuo database; il tempo di decodifica è in microsecondi. ThumbHash (Evan Wallace, 2023) è simile ma 30-50% più piccolo per la stessa qualità, e renderizza bordi più nitidi. I framework moderni (Next.js, Astro, Hugo) supportano tutti BlurHash di default.

Devo usare SVG o PNG per i thumbnail segnaposto?

SVG se il segnaposto è una forma semplice (rettangolo, icona, pattern geometrico). Un SVG inline di 50 byte batte ogni volta un PNG di 2 KB. PNG se ti serve un rendering del testo preciso al pixel o fallback di font specifici: il rendering del testo SVG varia tra browser e piattaforme. Per segnaposto dinamici generati lato client, questo strumento produce PNG perché il rendering del testo canvas è prevedibile tra i browser.

Il PNG generato include EXIF o metadati nascosti?

No. I PNG generati dalle API canvas HTML toBlob() o toDataURL() contengono solo i chunk IHDR, IDAT e IEND più un chunk tEXt minimo in alcuni browser. Niente GPS, niente info fotocamera, niente cronologia delle modifiche, niente identificatore utente. Confronta con i JPEG da fotocamera del telefono che fanno trapelare coordinate GPS e numeri di serie del dispositivo.

Viene inviato qualcosa a un server quando genero un'immagine qui?

No. L'immagine viene disegnata localmente tramite l'API Canvas 2D HTML5 nel tuo browser. Apri la scheda Network in DevTools durante la generazione: zero richieste in uscita per l'immagine. Sicuro per mockup riservati, NDA, lavoro per clienti e design di prodotti non rilasciati.