What a placeholder image is for
A placeholder image stands in for a picture you do not have yet. Designers put them in mockups and wireframes, developers use them to build a layout before the real photos arrive, and template makers use them to show where an image goes and how big it should be. A good placeholder says its own size, so everyone who sees the layout knows what to deliver: an image that reads 1200 × 630 is a clear brief.
This placeholder image generator makes that file in your browser. Set the width and height, pick a background and text color, choose a label and download the image as PNG, JPG, WebP or SVG. Nothing is sent to a server, and you do not depend on an outside image service that could be slow or go offline in the middle of a demo.
PNG, JPG, WebP or SVG
| Format | What it is | Pick it for |
|---|---|---|
| SVG | A text file that describes the shapes and the label | Web mockups and code. Tiny, sharp at any zoom, editable in any text editor. |
| PNG | A bitmap with lossless compression | Exact pixels and crisp text, for tools that need a plain image file. |
| JPG | A bitmap with lossy compression | Small files where slight blur around the text does not matter. |
| WebP | A bitmap format for the web; saved here with lossy compression | Small files for web pages. If your browser cannot save WebP, the tool tells you. |
PNG, JPG and WebP are drawn on a canvas in your browser at exactly the width and height you set. JPG and WebP are saved at quality 0.92 on the browser's scale from 0 to 1. The SVG has the same layout, written as a few lines of markup with a width, height and viewBox, so it keeps its pixel size in a page and still scales cleanly.
Sizes, shapes and presets
Type any width and height from 1 to 16,384 pixels. The shape buttons keep your width and set the height for a ratio: with a width of 1200, 16:9 gives 675 and 1:1 gives 1200. The common sizes are plain dimensions that come up often in layouts, such as 300 × 250, 800 × 600 or 1920 × 1080. For social media posts, covers and profile pictures, the social media size list fills in the size each platform recommends in its own help pages. To work out other shapes, the aspect ratio calculator finds the missing side for any ratio.
Bitmap formats have a limit: they are drawn on a canvas, and as MDN notes, the maximum size of a canvas depends on the browser and the device. The generator checks the limits for the browser you are using, per side and in total pixels, and says so when a size is too big. SVG has no such limit, because it is a description of the drawing, not a grid of pixels.
Text, font size and patterns
By default the label is the size, like 1200 × 630, centered in bold. Type your own label to say what belongs there, such as Hero image or Team photo. The placeholders {w} and {h} insert the width and height, so "Ad {w}x{h}" becomes Ad 300x250. With automatic font size the label fills about 80% of the width and at most 40% of the height: on a 300 × 250 image the default label is 44 px. Switch to pixels to set the size yourself; a label wider than the image is cut off at the edges.
The grid pattern draws thin lines in the text color at a tidy step, about eight cells across the shorter side, 80 px on a 1200 × 630 image, which helps you see the scale of the image in a layout. The cross pattern draws both diagonals and a 1 px frame, the classic sign for "image goes here" in wireframes. With either pattern, the label gets a small box in the background color, so it stays readable.
The text uses Arial, with Helvetica and the browser's default sans-serif font as fallbacks. In bitmap formats the text is drawn with the font installed on your device. In SVG the font is named in the file, and whoever opens it later sees it in their own installed font, which can make the label a little wider or narrower.
SVG code and data URIs
Copy SVG code gives you the markup to paste straight into HTML. Copy data URI gives you the whole image as one line of text that works wherever a URL does, for example in the src of an img tag or in a CSS background. For SVG the data URI is URL-encoded, which is often shorter than Base64; for PNG, JPG and WebP it is Base64. The image to Base64 converter does the same for any image file, and the SVG to PNG converter turns other SVG files into bitmaps.
How to use the placeholder image generator
- 1Type a width and height, or pick a shape, a common size or a social media size.
- 2Choose the background and text colors, a label if you want one, the font size and a pattern.
- 3Pick PNG, JPG, WebP or SVG and download the image, or copy the SVG code or a data URI.
- 4For many sizes at once, open Several sizes as a ZIP, list the sizes and download them together.
Frequently asked questions
Which format should I pick?
SVG for web mockups and code: the file is tiny, stays sharp at any zoom and you can paste it straight into HTML. PNG when a tool needs a plain bitmap with exact pixels. JPG or WebP when you need a small bitmap file and do not mind slight blur around the text, since both formats compress with some loss.
Can I put my own text on the image?
Yes. Type any label, like Hero image or Product photo. Write {w} and {h} in the text to insert the width and height, which is handy in a batch: "Banner {w}x{h}" becomes Banner 300x250 on one image and Banner 728x90 on the next. Leave the field empty for the default label, the size itself.
Why can I not make a PNG of 20,000 pixels?
The generator draws bitmap images on a canvas, and the largest canvas a browser can draw depends on the browser and the device. The generator checks the limit of the browser you are using and tells you when a size is too large. SVG has no such limit, because it is a drawing description rather than a grid of pixels.
Are the images uploaded or stored anywhere?
No. Your browser builds every image and saves it on your device. Nothing is sent to a server, and the copied link only holds the size, colors and options, not your label text.
How do I use the data URI?
A data URI holds the whole image in one line of text that works wherever a URL does. Put it in the src of an img tag or in a CSS background-image, and the placeholder shows without a separate file. For SVG the URI is URL-encoded, which is usually shorter than Base64.
Can I make many sizes at once?
Yes. Open "Several sizes as a ZIP", type up to 50 sizes such as 300x250, 728x90 and 1200x630, and download one ZIP with an image for each size in the format you picked. Colors, text and pattern apply to all of them.