Placeholder Image Generator
A lorem pixel placeholder image creator: pick any size, colors and label, then download a dummy image or copy an img tag.
The image is drawn on a canvas in your browser. Nothing is uploaded and no external image service is used.
How to use this tool
Set the width and height in pixels for the image you need. Choose a background color and a text color, either by clicking the color swatch or by typing a hex value such as #3366ff. Add your own label text, or leave it blank to print the dimensions on the image automatically. Pick a download format, then press Generate to draw the preview. Use Download image to save the file, or Copy img tag to grab a ready placeholder img tag built from a data URL that you can paste straight into your HTML.
How it works
Everything happens with the native HTML canvas API. The tool creates an off-screen drawing surface at the exact size you ask for, paints the background, centers the text, and then reads the pixels back out as a base64 data URL. Because a data URL embeds the whole image inside the string, the resulting img tag works offline and never calls a remote server like the classic lorempixel or placeholder.com services. That makes it a true client-side dummy image creator with custom dimensions.
A real example
Say you need a 600 by 400 hero placeholder with a light gray background and dark gray text. Enter 600 for width and 400 for height, set the background to #cccccc and the text to #666666, and leave the label blank. The tool prints "600 x 400" in the middle of a 600x400 PNG. Copying the img tag gives you something like <img src="data:image/png;base64,iVBORw0KGgo..." width="600" height="400" alt="600 x 400">, which renders instantly anywhere you paste it, no internet connection required.
Common questions
What is a placeholder image used for?
A placeholder, or dummy image, fills the space where a real photo will go later. Designers and developers use them to test layouts, check responsive behavior, and reserve image dimensions before the final assets arrive.
Does this replace lorempixel or placeholder.com?
Yes, for most needs. Those services build images on a remote server. This lorem pixel placeholder image creator draws everything locally and outputs a data URL, so your placeholders keep working offline and load with no extra network request.
Can I set any custom dimensions?
You can pick any width and height from 1 up to 4000 pixels. Very large sizes produce longer data URLs, so for big images you may prefer the Download image button over the inline img tag.
Why is my JPEG or WebP file smaller than the PNG?
PNG is lossless and keeps every pixel exactly, while JPEG and WebP compress the image. For flat placeholder colors the difference is small, but JPEG and WebP usually give a shorter data URL and smaller file.
Is the placeholder img tag safe to commit to my project?
Yes. The tag is plain HTML with an embedded data URL. It contains no tracking and no external link, so it is self-contained and safe to paste into a repository or a static page.