Placeholder Image Generator

How it works

1. 1Type a width and height in pixels, or pick one of the common sizes.
2. 2Choose a background colour and a text colour. Use a colour picker or type a hex code.
3. 3Type text for the image, or leave the box empty to show the size.
4. 4Pick PNG, JPG, WebP or SVG.
5. 5Check the preview, then press Download.

How to use the Placeholder Image Generator

Start by typing the width and height in pixels. Both must be whole numbers from 1 to 4000. The tool opens at 800 × 600, so you can also start from there.

Next, pick your colours. The background opens at a light grey and the text opens at a dark grey. You can change either one with the colour picker or by typing a hex code.

When the preview looks right, choose a format and press Download. The file is saved with the size in its name, such as placeholder-800x600.png.

What a placeholder image is for

A placeholder image holds a space in a page layout, wireframe or mock-up. It lets you test how the page looks before the real picture exists. Setting the exact size makes the layout show the right amount of room.

By default, the image shows its size as text. Someone looking at the page can see at a glance how big the slot is. This helps in documentation and demos too.

Common uses include:

• Page layouts
• Product-card mock-ups
• Tests of image slots
• Documentation and demos

Sizes: common buttons and the limit

The tool has six common size buttons. 150 × 150 is a small square. 300 × 200 is a card thumbnail. 640 × 480 and 800 × 600 are 4:3 pictures.

1200 × 630 is a size often used for link-preview images. 1920 × 1080 is a Full HD 16:9 banner. You can type any other whole-number size too.

The largest image you can make is 4000 × 4000 pixels, which is 16 million pixels in all. A bigger size, a size that is not a whole number, or a colour that is not a hex code shows a short message and turns off the buttons.

Colours and text on a placeholder image

Colours can be typed as hex codes with or without the #. Both 3-digit and 6-digit codes work, so #fff and 12AB9f are both valid.

The text colour sets the colour of the words on the image. The text sits on one centred line in your device's default sans-serif font, in semi-bold. If you leave the text box empty, the image shows the size, such as 800 × 600.

The text is sized to fit inside 80% of the width and 40% of the height, with a minimum of 6 pixels. A long text on a small picture will look small. Because the font comes from your device, letters can look a little different on another computer.

PNG, JPG, WebP or SVG?

PNG is a lossless format that suits flat colours and sharp text. JPG and WebP are saved at a fixed quality of 92 out of 100. There is no quality slider.

If your browser cannot make a WebP file, the tool tells you. Choose PNG in that case.

SVG is a small text file with a coloured rectangle and a text element. It stays sharp at any size, and its width and height match the size you typed.

None of the formats has a transparent background. The background is always the solid colour you picked.

Copy a data URL

The Copy data URL button copies the whole picture as one line of text. The line starts with "data:image/". You can paste it into an image address or a stylesheet.

A data URL is long, and a large picture makes a very long line. Use a smaller size if the line is hard to handle.

Make a placeholder image from code with the API

The render API can make a PNG or JPG from HTML with one request. Send a POST to /v1/render with your API key in the Authorization header. The body holds the html, the output ("png" or "jpeg") and options with the viewport width and height in pixels.

The request returns a job with the status queued. Read the job until its status is succeeded, then download the file from download_url.

curl -X POST https://api.aiipworld.com/v1/render \
  -H "Authorization: Bearer $AIIPWORLD_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<body style=\"margin:0;width:800px;height:600px;background:#d1d5db;color:#4b5563;font:600 64px sans-serif;display:flex;align-items:center;justify-content:center\">800 &times; 600</body>","output":"png","options":{"viewport":{"width":800,"height":600}}}'

# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"

The API limits the viewport to 100 to 4000 pixels on each side. It makes PNG and JPG only, so WebP and SVG come from this page. A render costs 1 credit, and the free plan has 100 credits a month.

There is no ready-made placeholder address. You send HTML and get an image back. See the screenshot API page and the API docs for more.

Limits of this tool

The tool makes a solid background only. It has no gradient, pattern, photo or transparent background. The text is one line, in your device's font, so it can look different on other computers.

Privacy: made in your browser

The image is drawn on your device in your browser. Nothing is uploaded when you make or download it. The page itself does not call the API.

Questions