Placeholder Image Generator

About Placeholder image generator

Makes flat, labeled dummy images in any size from 1 to 4000 pixels, so layouts and mockups can be built before real pictures exist. You control colors, label and format, and can download the result as SVG, PNG or JPEG.

How to use it

1. Click a Preset size such as Square, Landscape 16:9, Portrait 4:5, Banner, Avatar or OG image, or type your own Width and Height.
2. Set Background colour and Text colour using the pickers or hex codes.
3. Enter Label text, or leave it empty to show the size. Line breaks become separate lines, up to eight.
4. Leave Font size at 0 to scale it to the image, or set a value up to 400 pixels.
5. Pick a Format (SVG, PNG or JPEG) and select Download, or use Copy SVG markup.

A small two-line hero stand-in

Width 300, Height 200, default colors, Label text: Hero, then a line break, then image, Format JPEG

A 300 x 200 slate-gray-on-light-gray image with two centered lines, Hero and image, drawn at 25 px because the automatic size is the shorter edge divided by 8. It downloads as placeholder-300x200.jpg.

When to use it

• Filling an image grid in a prototype so spacing and aspect ratios can be judged.
• Producing an avatar stand-in at 256 by 256 for a user list demo.
• Creating a 1200 by 630 image to test how a link preview card lays out.
• Adding labeled boxes to a wireframe that a client can annotate.

Questions about Placeholder image generator

When should I choose SVG over PNG or JPEG?

SVG is tiny and stays sharp at any size, which suits mockups in a browser. Pick PNG or JPEG when the destination, such as a design tool or slide deck, will not accept SVG.

What colors can I type?

Hex codes with 3, 4, 6 or 8 digits, such as #e2e8f0. Anything else shows an error, and a half-typed value falls back to the default color so the preview never breaks.

How is the automatic font size chosen?

It is one eighth of the shorter side, never below 10 pixels. A 1280 by 720 image therefore uses 90 pixel text, and you can override it with any value up to 400.

Is an outside placeholder service used?

No. The image is drawn locally with SVG, and PNG or JPEG copies are rasterized with a canvas element in your browser.

Related tools

• Lorem Ipsum GeneratorGenerate Lorem Ipsum placeholder text
• Barcode generatorGenerate Code 128 and EAN-13/EAN-8 barcodes as SVG or PNG entirely in your browser.
• Random name generatorGenerate random people names, usernames, and company names from built-in offline wordlists.
• UUID v4 GeneratorGenerate a random UUID v4
• Slug GeneratorGenerate a slug from text
• Password GeneratorGenerate a secure random password