via.placeholder.com

Placeholder images

Put the size in the URL and get an image back. The syntax is the one placehold.it introduced in 2010, so old via.placeholder.com links work again.

/150
/300x150/ff6600/ffffff
/300x150/1c1d19/ecf34d.svg?text=Hello+World

URL syntax

https://via.placeholder.com/<size>[@2x][/<background>[/<text colour>]][.<format>][?text=<text>]

Part	Values	Default
size	`150` (square) or `600x400` (width × height, `X` works too). 1 to 4000 px per side.	none, required
background	3 or 6 digit hex without `#` (`09f`, `ff6600`) or a CSS colour name (`navy`, `tomato`)	`cccccc`
text colour	same as background	`969696`
format	`.png`, `.jpg` / `.jpeg`, `.gif`, `.webp`, `.svg`, on any segment. `.avif` too, with one rule: see AVIF.	png
scale	`@1x` to `@3x` (also `@1.5x`) on the size segment: `600x400@2x`. See Retina.	`@1x`
text	`?text=`, URL-encoded (`+` or `%20` for spaces). Up to 120 characters; runs of whitespace become one space.	the size, e.g. `600 x 400`

Examples

https://via.placeholder.com/150150 × 150, grey
https://via.placeholder.com/600x400600 × 400
https://via.placeholder.com/600/92c952600 × 600, green background, default text colour
https://via.placeholder.com/600x400/ff6600/fffffforange background, white text
https://via.placeholder.com/600x400/navy/whitecolour names work too
https://via.placeholder.com/600x400.svgSVG: tiny, sharp at any zoom
https://via.placeholder.com/600x400.webpWebP
https://via.placeholder.com/300.png/09f/fffthe extension can go on any segment
https://via.placeholder.com/600x400?text=Hello+Worldyour own text
https://via.placeholder.com/1200x630/1c1d19/ecf34d.jpg?text=Open+Graph+imagea social card stand-in
https://via.placeholder.com/[email protected]retina: 1200 × 800 pixels, same layout as 600 × 400
https://via.placeholder.com/600x400.avifAVIF

Retina: @2x and @3x

Add a scale to the size segment and you get more pixels with the same layout. 600x400@2x is a 1200 × 800 image that looks exactly like 600x400, just sharper, and its default text still reads 600 x 400.

https://via.placeholder.com/600x400@2x1200 × 800 PNG
https://via.placeholder.com/600x400@3x/ff6600/fff.webp?text=Hi1800 × 1200, colours and text as usual
https://via.placeholder.com/[email protected]900 × 600: fractional scales work
https://via.placeholder.com/600x400.png@2xthe suffix can go before or after the extension
https://via.placeholder.com/[email protected]SVG: width="1200" height="800" with the 600 × 400 viewBox

The scale goes on the size segment only, between @1x and @3x. Higher values are treated as @3x, lower ones as @1x.
The output never exceeds 4000 px per side: the scale is lowered as needed, so 2500x1000@2x is 4000 × 1600.
?dpr=2 is ignored here, because these URLs answered before and keep their bytes. Use the @2x suffix. (Avatars and photos accept both.)

AVIF

Put .avif on the size segment, or anywhere once the size segment carries a scale:

https://via.placeholder.com/600x400.avifAVIF, default colours
https://via.placeholder.com/600x400.avif/ff6600/fffAVIF with colours
https://via.placeholder.com/600x400@2x/ff6600/fff.avifretina AVIF, extension on the last segment

Watch out: /600x400/ff6600/fff.avif (no scale, extension on a colour) is a PNG with the default text colour. That URL already meant something before AVIF existed (fff.avif is not a colour), so it keeps its old answer.

Images above 2.1 megapixels are served as WebP instead, at the same pixel size and with Content-Type: image/webp. 1920x1080.avif and 1600x1200.avif are AVIF; [email protected] (2400 × 1600) is WebP. Trust the Content-Type, not the extension.
AVIF is encoded with pinned settings, so the bytes are as stable as the other formats.

In HTML and CSS

<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="Product photo">

<img src="https://via.placeholder.com/400x300.webp"
     srcset="https://via.placeholder.com/[email protected] 2x, https://via.placeholder.com/[email protected] 3x"
     width="400" height="300" alt="">

<picture>
  <source type="image/avif" srcset="https://via.placeholder.com/400x300.avif, https://via.placeholder.com/[email protected] 2x">
  <img src="https://via.placeholder.com/400x300.jpg" width="400" height="300" alt="">
</picture>

.hero { background: url("https://via.placeholder.com/1600x600/eeeeee/999999.svg") center / cover; }

Always set width and height (or aspect-ratio) so the layout doesn't jump when the real image arrives.

Behaviour and limits

Size: 1 to 4000 px per side. A larger request still returns 200, with a 400 × 100 image that says Max size is 4000 x 4000, so a broken layout is easy to spot.
Colours: an unknown colour falls back to the default instead of failing.
Forgiving parser: HTML-escaped URLs (&), a missing ? (/600x400&text=Hi) and ?Text= all work, because old templates are full of them.
Methods: GET, HEAD and CORS preflight (OPTIONS). Images can be used from any origin, including fetch() and <canvas>.
Caching: Cache-Control: public, max-age=31536000, immutable. The same URL returns the same bytes forever, so visual regression tests stay stable.
SVG output is plain shapes and escaped text, and is served with a Content-Security-Policy that blocks scripts.
Unknown paths return 404 Not found as plain text.

Response headers

Header	Value
`X-Placeholder`	`via.placeholder.com`. Lets tests and monitoring tell placeholders from real assets.
`Cache-Control`	`public, max-age=31536000, immutable`
`Access-Control-Allow-Origin`	`*`
`Cross-Origin-Resource-Policy`	`cross-origin`
`X-Robots-Tag`	`noindex`

Making sure they don't ship

These classic images keep their exact historical bytes, so unlike avatars and photos they carry no embedded marker. That includes the new retina PNG, JPEG, GIF, WebP and SVG variants. The one exception is AVIF: a classic .avif carries the marker in its XMP metadata. They are detectable by their URL and the X-Placeholder header. If you link to them, placeholder-check finds the URL in your build output. If you download one into your repository, nothing in the file gives it away, so prefer linking.