CDRN

Generare un'immagine placeholder

  • Documentazione
  • API

Come usarlo?

Specificate la dimensione dell'immagine desiderata direttamente nell'URL di chiamata. Potete usare le immagini generate nei vostri HTML o CSS seguendo l'esempio

Il primo parametro definisce la larghezza dell'immagine

Il secondo parametro definisce l'altezza dell'immagine. Questo è opzionale. Se non viene definito, l'altezza sarà identica alla larghezza dell'immagine (l'immagine sarà quadrata).


        <img src="https://cdrn.fr/60" alt="placeholder image">
        <img src="https://cdrn.fr/120x100" alt="placeholder image">
        <img src="https://cdrn.fr/80x100" alt="placeholder image">
placeholder image placeholder image placeholder image

Esempi

Immagini quadrate


        <img src="https://cdrn.fr/32" alt="placeholder image">
        <img src="https://cdrn.fr/64" alt="placeholder image">
        <img src="https://cdrn.fr/96" alt="placeholder image">
        <img src="https://cdrn.fr/128" alt="placeholder image">
placeholder image placeholder image placeholder image placeholder image

Immagini con altezze specifiche


        <img src="https://cdrn.fr/100x60" alt="placeholder image">
        <img src="https://cdrn.fr/200x120" alt="placeholder image">
        <img src="https://cdrn.fr/75x120" alt="placeholder image">
        <img src="https://cdrn.fr/150x240" alt="placeholder image">
placeholder image placeholder image placeholder image placeholder image

Domande frequenti

In quale formato viene servita l'immagine generata?

Le immagini vengono restituite nel formato JPEG, ottimizzato per il web. Il peso resta minimo anche per grandi dimensioni, il che rende lo strumento adatto ai mockup HTML e CSS che contengono molti placeholder. Il contenuto visivo è un gradiente o un colore di riempimento neutro, mai una vera foto soggetta a diritti d'autore.

C'è un limite di dimensione per le immagini generate?

Le dimensioni ragionevoli vanno da 16 px a circa 2000 px per lato. Oltre, il rendering resta possibile ma la generazione diventa lenta senza utilità reale, poiché i placeholder sono destinati a mockup più modesti. Per un visual hero di 1920 x 1080, lo strumento risponde senza problemi.

L'URL è stabile e utilizzabile in produzione?

L'URL /image/<larghezza>/<altezza> è deterministico, potete incollarlo così com'è nei vostri tag <img> senza download preliminare. Per un ambiente di produzione, preferite ospitare le immagini definitive da voi: questo servizio è destinato prima di tutto ai mockup, agli storybook e ai test di integrazione.

Qual è la differenza con Lorem Picsum o Placeholder.com?

Lorem Picsum restituisce vere foto casuali, simpatiche per dare realismo a un mockup. Placeholder.com serve immagini con etichetta di dimensioni. Il generatore cdrn restituisce placeholder semplici e rapidi, senza chiamate esterne né dipendenze terze nel vostro progetto front-end.

Si può scegliere il colore del placeholder?

Non in questa versione. Le immagini sono generate con un rendering neutro predefinito. Se avete bisogno di controllare precisamente il colore di sfondo per validare un layout con dei contrasti, create un file statico di qualche kilobyte nella tonalità desiderata o usate direttamente un div CSS con background-color.

Quale interesse per uno sviluppatore front-end?

Testare rapidamente un layout senza dover fornire un'immagine reale, validare la responsività di una griglia inserendo vari rapporti, alimentare uno storybook o una preview Figma-verso-HTML. Per i marketer e designer, lo strumento serve a abbozzare wireframe ad alta fedeltà senza dipendere da foto sotto licenza.

questo strumento non espone un'API di esecuzione