Generate super-fast placeholder images in 200+ edge locations, powered by Cloudflare Workers
placeholders.dev generates custom placeholder images on the fly, such as the examples above. All of these images are generated on Cloudflare's Edge, at 200+ locations, ensuring the best possible performance for all of your users. All images are cached for lengthy periods of time.
width
- Width of generated image. Defaults to
300
.
- Width of generated image. Defaults to
height
- Height of generated image. Defaults to 150.
text
- Text to display on generated image. Defaults to the image dimensions.
fontFamily
- Font to use for the text. Defaults to
sans-serif
.
- Font to use for the text. Defaults to
fontWeight
- Font weight to use for the text. Defaults to
bold
.
- Font weight to use for the text. Defaults to
fontSize
- Font size to use for the text. Defaults to 20% of the shortest image dimension, rounded down.
dy
- Adjustment applied to the dy attribute of the text element to appear vertically centered. Defaults to 35% of the font size.
bgColor
- Background color of the image. Defaults to
#ddd
- Background color of the image. Defaults to
textColor
- Color of the text. For transparency, use an rgba or hsla value. Defaults to
rgba(0,0,0,0.5)
- Color of the text. For transparency, use an rgba or hsla value. Defaults to
Example URL: https://images.placeholders.dev/?width=1055&height=100&text=Made%20with%20placeholders.dev&bgColor=%23f7f6f6&textColor=%236d6e71
wrangler
is a CLI tool from Cloudflare, designed to push projects to Cloudflare Workers. See Cloudflare's documentation for more information.
Install it with npm:
npm i @cloudflare/wrangler -g
After install run wrangler config
and follow the prompts to add your Wrangler API token. Follow the instructions in Cloudflare's docs for information on this.
wrangler build
npm run start:dev
(this will usecloudworker
to run a server onlocalhost:3000
mimicking the API Worker)
or
npm run publish
(push toplaceholders-dev
workers.dev)
or
npm run publish:staging
(push toplaceholders-staging
workers.dev)
or
npm run publish:preview
(push to Cloudflare Workers preview builder)
npm run publish:prod
(publishes to placeholders.dev via Workers)