Placeholder Image Generator
Generate placeholder images for mockups and prototypes without depending on a placeholder service. That dependency matters more than it looks: a mockup wired to a third-party image URL breaks the day that service goes down or starts rate-limiting, and every page view tells them what you are building. Here the image is drawn on your own device and downloaded as a real file, so it works offline and keeps working forever. Pick a size or use one of the presets for common banner, card and ad dimensions, choose a background and foreground colour, add a pattern, and set your own label or let it show the pixel dimensions. The matching img tag with width and height filled in is provided to copy.
How it works
Set a size, pick a pattern and download a placeholder image. Nothing is fetched from a placeholder service, so the mockups you send out do not break when that service goes down, and no one is told what you are building.
The image is drawn on your own device and works offline. Leave the label empty to show the pixel dimensions.
Drawing…
<img src="placeholder-800x600.png" width="800" height="600" alt="800 × 600">
The width and height attributes are filled in, which is what stops the page jumping about while the image loads.
Frequently asked questions
Why not just use a placeholder service?
Because a mockup that fetches images from a third party breaks when that service goes down, and every view reports back to them. A downloaded file keeps working offline and forever.
What size can I generate?
Anything up to 8,000 pixels on a side. Presets cover the common banner, card, avatar and advertising sizes.
Can I put my own text on the image?
Yes. Leave the label empty and it shows the pixel dimensions instead, which is usually what you want while laying out a page.
What are the patterns for?
They make a placeholder obviously a placeholder, so nothing ships to production with a grey box that someone mistook for a real image.
What format is the download?
PNG by default, with JPEG and WebP also available. PNG is the sensible choice for flat colours and text.
Why does the img tag include width and height?
Because those attributes let the browser reserve the right space before the image loads, which stops the page jumping about as it renders.
Related tools
Image Format Converter
Convert an image between JPEG, PNG and WebP with adjustable quality, entirely in your browser.
Aspect Ratio Calculator
Work out the aspect ratio of any size, find a missing dimension, or scale an image to fit a box.
Lorem Ipsum Generator
Generate Lorem Ipsum placeholder text by paragraph, sentence, or word count for mockups and layouts.