# Placeholder

> A placeholder image generator. Put a size in the URL and get an image back.
> No account, no upload, no tracking. MIT licensed.

Base URL: https://placeholder.fugte.com
Source: https://github.com/Made4Uo/placeholder

## The one thing to know

    https://placeholder.fugte.com/600x400

That returns a 600 by 400 placeholder image, as SVG. Use it directly in an
`<img>` tag. Everything else on this page is optional.

## Sizes

    https://placeholder.fugte.com/600x400        an explicit size
    https://placeholder.fugte.com/600            a square
    https://placeholder.fugte.com/16:9?w=800     a ratio, scaled to a width (returns 800x450)
    https://placeholder.fugte.com/16:9?h=450     a ratio, scaled from a height
    https://placeholder.fugte.com/16:9           a ratio with no width given, defaults to 1200 wide
    https://placeholder.fugte.com/600x400.png    the format as a file extension

Sizes are capped at 5000px per side. Raster output is capped at 4 million
pixels after any scaling. PNG and WebP renders are rate limited per address
(HTTP 429 with Retry-After); SVG, the default, is not.

## Parameters

All optional, all query parameters.

    text, t        The caption. Default is the size, e.g. "600x400".
                   \n starts a new line, up to 8. text= on its own is blank.
    bg             Background. Hex with or without the #, a colour name, or
                   "transparent". Two to six comma-separated colours make a
                   gradient. Default e2e8f0.
    gradient       Gradient direction: degrees (90), a keyword (to-right,
                   to-bottom-left), or "radial". Default to-bottom. Needs two
                   or more colours in bg.
    color, fg      Text and icon colour. Default is chosen automatically to
                   clear WCAG AA against the background.
    icon           Any Lucide icon name, e.g. shopping-cart. 2077 available,
                   listed at https://placeholder.fugte.com/icons.json
    iconsize, is   Icon size in pixels, or a percentage of the shorter side
                   (40%). Capped at the shorter side. Default is 30% of it.
    type           A preset: image, avatar, card, product, video, text.
                   An icon plus behaviour, e.g. avatar rounds itself.
    radius, r      Corner radius in pixels, a percentage (50%), or "full".
    border, b      "2", "2,cbd5e1", or a bare colour for a 1px rule.
    opacity, o     0 to 100.
    blur           0 to 100. Applies to the caption and icon, not the plate.
    font           sans, serif, mono, or a bundled family:
                   inter, lato, montserrat, noto-sans, open-sans, oswald, poppins, pt-sans, raleway, roboto, source-sans, lora, playfair, jetbrains-mono.
                   Any other family works in SVG if the viewer has it.
    fs, fontsize   Caption size in pixels. Default is fitted to the box.
    fw, weight     100 to 900. Default 600.
    format, f      svg, png or webp. Default svg.
    scale, dpr     1 to 4. Raster output only.
    q, quality     1 to 100. WebP only.

Colour names use the Tailwind 500 scale rather than the CSS one, because CSS
"red" is #ff0000 and that is not a colour anyone wants behind a caption:
transparent, white, black, slate, gray, grey, zinc, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, navy, brown, silver, light, dark.

## Worked examples

    https://placeholder.fugte.com/600x400
    https://placeholder.fugte.com/600x400?text=Hero+image
    https://placeholder.fugte.com/600x400?bg=0c6fd0&color=ffffff
    https://placeholder.fugte.com/600x400?bg=0c6fd0,6c5ce7&gradient=to-right
    https://placeholder.fugte.com/600x400?bg=6c5ce7,0f172a&gradient=radial
    https://placeholder.fugte.com/600x400?bg=0c6fd0,transparent
    https://placeholder.fugte.com/16:9?w=800&bg=0f172a&type=video
    https://placeholder.fugte.com/160?type=avatar&bg=6c5ce7
    https://placeholder.fugte.com/400x400?icon=shopping-cart&bg=0c6fd0
    https://placeholder.fugte.com/400x400?icon=shopping-cart&iconsize=70%
    https://placeholder.fugte.com/600x400?radius=24&border=2,cbd5e1
    https://placeholder.fugte.com/600x400?bg=0c6fd0&blur=6&text=Loading
    https://placeholder.fugte.com/600x400?format=png&scale=2

## Other endpoints

    https://placeholder.fugte.com/            the playground: every parameter, wired up live
    https://placeholder.fugte.com/icons.json  every icon name, as JSON
    https://placeholder.fugte.com/?u=<url>    opens the playground with that URL loaded

## Notes

SVG is the default. It is a few hundred bytes, stays sharp at any zoom, and
needs no pixel work. Ask for PNG or WebP when you need real pixels.

Every URL is immutable: the same URL returns the same bytes and is cached for
a year. Change a parameter to get a different image.

CORS is open and Cross-Origin-Resource-Policy is set, so these can be drawn
into a <canvas> without tainting it.

An unparseable parameter returns HTTP 400 with a sentence saying what was
wrong, rather than a silently incorrect image.