How to make a placeholder image
- Pick a preset such as Open Graph image, or type your own width and height.
- Choose the background and text colors. Leave the text empty to print the size, or type your own words.
- Select a format, then press Download, or Copy data URL to paste the image straight into your code.
The text is centered and sized to fit automatically. Turn that off to set an exact font size. The image uses your device's system font, so the preview matches the file.
Questions
Is anything uploaded?
No. The image is drawn by your browser, and the download or data URL is made on your device. Nothing is sent to a server.
Which format should I pick?
PNG is sharp and lossless. JPG and WebP are smaller, and you can set the quality. SVG stays crisp at any size and is tiny, but it is text-based, so it suits web pages and mockups more than uploads to sites that only accept photos.
What is a data URL and when do I need one?
A data URL holds the whole image inside a string, so you can paste it into an img tag or a CSS background without a separate file. It is handy for quick prototypes and emails. For large images prefer the downloaded file, because data URLs are about a third bigger.
What sizes can I make?
Any size from 1 to 4000 pixels on each side. The presets cover common needs such as Open Graph share images (1200 by 630), avatars, banners, and 16:9 video frames.
Can I use these images anywhere?
Yes. They are plain colored rectangles with your own text, so there is nothing to license. Replace them with real images before you publish.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.