NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
BackgroundColour pickerCompress & convertCropFaviconHEIC to JPGMemePlaceholderRedactResizeSVG optimizeWatermark

Placeholder Image Generator

Blank images of any size with a label.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

The image is drawn in your browser and saved straight from it. Unlike placeholder services, nothing is fetched from another server, so the images keep working offline and in pages that are not public yet. The text uses your system font, so it can look slightly different on another computer when you pick SVG.

How to use it

  1. Type a width and height or pick a preset, such as 1200 × 630 for social share images.
  2. Choose the colours and the text. Leave the text empty to show the size.
  3. Pick PNG, JPG, WebP or SVG and download, or copy it as a data URL to paste straight into code.

Questions

Which format should I pick?

SVG is tiny and sharp at any size, which is ideal for mock ups in code. PNG is best when a tool needs a normal image file. JPG and WebP are smaller for large sizes.

What size is a social share image?

1200 × 630 pixels is the size Facebook, LinkedIn and most chat apps use for link previews. X uses the same image, cropping it slightly in some layouts.

Can I use these images on a live site?

Yes. They are plain images you made yourself, with no watermark and no link back to anyone.

What is a data URL?

The whole image written as text, starting data:image. You can paste it into an img src or CSS background to show the image without a separate file. It suits small images; large ones make the page heavy.

About this tool

About the placeholder image generator

When a layout is being built before the real photos exist, a placeholder of the right size keeps the design honest. This tool draws one with the dimensions, colours and label you choose and saves it as a normal file.

Options

  • Size: type any width and height, or pick a preset such as 1200 by 630 for social share images.
  • Colours and text: set the background and text colours. Leave the text empty and the image shows its own size, such as 800 by 600.
  • Format: PNG, JPG, WebP or SVG, or copy it as a data URL to paste straight into an img tag or a CSS background.

Why make them locally

Placeholder services load each image from someone else's server. If that service is slow, blocked or shut down, your mock-up breaks. Images made here are plain files with no watermark and no link back to anyone, so they work offline and on pages that are not public yet.

Which format to choose

SVG is tiny and sharp at any size, ideal in code. PNG suits tools that want a normal image file. JPG and WebP are smaller at large sizes. Keep data URLs for small images, since big ones bloat the page.

Everything is drawn in your browser; nothing is fetched or uploaded.

Related tools