placeholders.dev
Generate super-fast placeholder images in 270+ edge locations, powered by Cloudflare Workers
)
Info
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.
Technology
This project makes use of Cloudflare Workers, and Cloudflare Workers Sites via Workers KV. It also implements a HTMLRewriter to update the total Cloudflare PoPs in multiple locations.
Available API Options
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
textWrap- Wrap text to fit within the image (to best ability). Will not alter font size, so especially long strings may still appear outside of the image. Defaults to
false.
- Wrap text to fit within the image (to best ability). Will not alter font size, so especially long strings may still appear outside of the image. Defaults to
Example URL: https://images.placeholders.dev/?width=1055&height=100&text=Made%20with%20placeholders.dev&bgColor=%23f7f6f6&textColor=%236d6e71
Dev
Prerequisites
Wrangler
wrangler is a CLI tool from Cloudflare, designed to push projects to Cloudflare Workers. See Cloudflare's documentation for more information.
Run
npm run start:dev(this will usewrangler devto locally start the Cloudflare Worker for testing)
or
npm run publish(push toplaceholders-devworkers.dev)
or
npm run publish:staging(push toplaceholders-stagingworkers.dev)
Production
npm run publish:prod(publishes to placeholders.dev via Workers)