Web design · Browser tool
Placeholder image generator
Show the data URI
Set the width, height, colors and text. The preview redraws on every change, and the image is made on this page, so nothing is uploaded.
FreeNo account, no job limit, up to 4000 × 4000 px
- PNG, WebP, SVG or JPEG, with a quality slider for WebP and JPEG
- The image shows its own size by default, or any text you type; the text shrinks to fit
- Optional border and diagonal cross, drawn a little darker than the background
- Twelve common sizes as a batch, each saved as its own file
- Copy the image as a data URI for CSS or an img tag (shown up to 200 KB)
Several sizes in one go
Tick the sizes you need. Each one uses the colors, text rule and format you set above, and downloads as a separate file named by its size, for example placeholder-1200x630.png. Your browser may ask before it saves several files at once; allow it when it does.
What you get, and which format to pick
The file
A solid-color image at exactly the width and height you entered, with the text centred. Unless you type your own label, the text is the size itself, such as 1200 × 630, so a stretched or squashed slot is easy to spot on screen. The download is named placeholder-1200x630.png, or the same name with .webp, .svg or .jpg.
SVG or a pixel format
An SVG placeholder is a few hundred bytes of markup at any size and stays sharp when scaled, which suits mockups and design files. PNG and WebP are real pixel images, so they are the right choice when you want to test lazy loading, image decoding or a CDN resize step. JPEG has no transparency and handles flat color poorly, so use it only when a system accepts nothing else.
How the text is sized
The text size follows the shorter side of the image and is reduced until the text fits with a margin. On a 728 × 90 banner the height decides, on a 160 × 600 skyscraper the width. A long label keeps shrinking down to 8 pixels; beyond that it is clipped and a warning appears under the preview.
Size limit
Each side can be 1 to 4000 pixels, so the largest image is 16 megapixels. Some mobile browsers return a blank image for larger canvases instead of showing an error, which is why the limit is set there.
Questions before you run it
What image formats can I generate?
PNG, WebP, SVG and JPEG. SVG files are small at any size and scale without blurring. PNG and WebP are pixel images, which suits testing how a page loads real images. WebP and JPEG have a quality slider.
Can I generate multiple sizes at once?
Yes. In the batch section, tick any of twelve common sizes, such as 1920 x 1080, 1200 x 630, 512 x 512 and 728 x 90. Each size uses your current colors, text and format and downloads as its own file named by its size.
Can I customize the text on the placeholder?
Yes. By default the image shows its size, for example 1200 x 630. Type your own label to replace it and pick the text color separately from the background. The text size is set automatically so the text fits the image.
What is the largest image I can make?
Each side can be up to 4000 pixels, so 4000 x 4000 is the largest image. Some mobile browsers fail silently on bigger canvases, which is why the limit is there.
Are the placeholders suitable for CLS testing?
Yes. A placeholder with the same width and height as the final image makes the container reserve the right space, so you can check in development that nothing jumps when the real image loads.
Can I use these in Figma or Sketch?
Yes. SVG placeholders can be placed in Figma, Sketch or any design tool that accepts SVG. PNG and WebP work as bitmap fills. Each file is named by its size, for example placeholder-400x300.svg.
Is anything uploaded?
No. The images are drawn on this page in your browser. There is no request to a server behind the preview or the download.