Placeholder Images, Explained
After reading this you will know exactly how a placeholder image encodes its size, colour and label, how to pick dimensions that match real ad and social slots, and how to avoid the small mistakes that make a mockup look wrong.
What a placeholder image is
A placeholder image is a solid rectangle of a known width and height, usually stamped with a label that reports its own dimensions. You drop it into a layout while the real photo or ad creative is still being made. It holds the space, so you can see whether a 300x250 box crowds the text next to it before anyone shoots a single frame.
The hook is speed. A designer needs a banner that is exactly 728 pixels wide and 90 pixels tall. Instead of opening an editor, creating a canvas, filling it and typing text, they generate the rectangle in one step. The label 728x90 printed in the middle means nobody has to measure it later.
Placeholders are throwaway by design. They carry no real content, so they should be tiny in file size and instantly reproducible. Two people who ask for the same size and colour should get the same image.
When to use one, and when not to
Use a placeholder when the layout matters but the content does not yet exist. Filling every ad slot on a page with grey boxes labelled by size tells you at a glance whether the grid holds together. Use one to test how an image loads: a 2000x2000 placeholder is a quick way to see how your CSS handles a large square.
Do not ship a placeholder to production. A grey box labelled 300x250 on a live page is a missing asset, not a design choice. Do not use a placeholder to test compression quality either, because a flat colour with one line of text compresses to almost nothing and tells you nothing about how a real photo will behave. For that, generate the real image or measure a sample photograph.
Name your files by size, such as banner-728x90.png. When you later swap in real creative, a mismatch between the filename and the slot is easy to spot.
The size and colour math
The core numbers are simple. Width and height in pixels set the canvas. The total pixel count is their product.
Here N is the number of pixels, w is the width and h is the height. A 300x250 rectangle holds 300 \times 250 = 75{,}000 pixels. The aspect ratio is the width divided by the height, reduced to lowest terms.
The greatest common divisor of 300 and 250 is 50, so the ratio is 6:5. A 728x90 banner has a divisor of 2, giving 364:45, which is why it looks like a long thin strip.
Colours are three channels: red, green and blue, each from 0 to 255. A hex code packs them as two hex digits per channel. The value #CCCCCC means red, green and blue are all \text{CC}_{16} = 204, a light neutral grey. To keep label text readable, the label colour should differ enough in brightness. A rough brightness measure is:
This weights green most because the eye is most sensitive to it. For #CCCCCC, Y = 0.299 \cdot 204 + 0.587 \cdot 204 + 0.114 \cdot 204 = 204. A background at 204 is fairly bright, so dark text near Y = 60 reads well against it.
A worked example with the demo data
Building the default 300x250 placeholder
The demo button uses the field defaults: a 300x250 canvas, a light grey fill, dark label text and PNG output. Work through what that produces.
- Canvas: 300 pixels wide, 250 tall, so 300 \times 250 = 75{,}000 pixels total.
- Aspect ratio: \gcd(300,250) = 50, giving
6:5, a nearly square block. - Fill colour
#CCCCCC: brightness Y = 204. - Label text: the string
300x250centred, in a dark grey near Y = 60, so the contrast is 204 - 60 = 144 on the 0 to 255 scale. - Format PNG: because the image has one flat colour plus text, PNG stores it in a handful of kilobytes, far smaller than the 75,000 raw pixels would suggest.
Click the demo button and you get exactly this rectangle. Change only the width to 600 and the pixel count doubles to 150,000, but the file size barely moves, because a wider flat colour still compresses to almost nothing.
Why the file stays small
Raw pixel data for a 300x250 image at 3 bytes per pixel is 75{,}000 \times 3 = 225{,}000 bytes, about 220 KB. The saved PNG is usually under 3 KB. The gap comes from run-length and dictionary compression: a row of 300 identical grey pixels is stored as "grey, repeat" rather than 300 separate values.
This is the opposite of a photograph, where almost every pixel differs from its neighbour and compression saves little. The chart below shows how the compressed size of a flat placeholder grows slowly as the pixel count climbs, while a photograph of the same dimensions grows nearly in step with the pixel count.
Reading and choosing sizes
Common ad and social slots have fixed pixel dimensions. Matching them exactly prevents the browser from scaling your placeholder, which would blur the label. The table lists the sizes you meet most often.
| Name | Width | Height | Pixels | Ratio |
|---|---|---|---|---|
| Medium rectangle | 300 | 250 | 75,000 | 6:5 |
| Leaderboard | 728 | 90 | 65,520 | 364:45 |
| Wide skyscraper | 160 | 600 | 96,000 | 4:15 |
| Social square | 1080 | 1080 | 1,166,400 | 1:1 |
| Link preview | 1200 | 628 | 753,600 | 300:157 |
When you generate a batch, you get one image per row in a set like this. Each one carries its own size label, so a folder of them reads like a size chart.
A link preview at 1200x628 has an odd ratio of 300:157, close to 1.91:1. That is the shape Facebook and similar sites crop link images to, which is why the number looks arbitrary.
Explore contrast and readability
The label only helps if you can read it. The single most instructive thing to move is the brightness gap between the fill and the text. Slide it and watch the label fade or snap into focus.
Common mistakes
The most frequent error is generating a placeholder at the wrong size and letting CSS stretch it. If your slot is 728 wide but you make a 700 wide image, the browser scales it up by a factor of 728 / 700 = 1.04, and the label edges soften. Always match the exact slot.
The second mistake is low contrast. A fill of #DDDDDD (brightness 221) with a label at #BBBBBB (brightness 187) gives a gap of only 34, and the size text is nearly invisible. Keep the gap above about 90.
The third is choosing the wrong format. A placeholder saved as JPEG at high quality can look fine, but JPEG adds soft ringing around the sharp text edges. PNG keeps the label crisp and, for flat colour, produces a smaller file too.
Do not reuse a placeholder as a favicon or an app icon. Those need real artwork at exact small sizes such as 32x32 and 512x512, and a size label shrunk to 32 pixels is unreadable.
Related tools
Once your layout is filled with placeholders, other generators help with the real assets. Make a scannable code with the QR Code Generator & Reader, or a retail code with the Barcode Generator. If you are building a game or an icon set, the Sprite Sheet Generator & Splitter packs many frames into one file. For stylised effects, try the Dithering Tool or turn a picture into text with ASCII Art from Image.
Frequently asked questions
Are my placeholder images uploaded anywhere?
No. Everything runs locally in your browser, and your images are never sent to any server. The rectangle is drawn on a canvas on your own machine.
What size should a placeholder be for a Facebook link preview?
Use 1200x628, a ratio close to 1.91:1. That matches the crop most social platforms apply, so nothing important gets cut.
Why is my placeholder file so small?
A flat colour with one line of text compresses to a few kilobytes because long runs of identical pixels store as a single instruction. A real photo of the same dimensions can be 50 to 100 times larger.
Should I pick PNG or JPEG?
Choose PNG. It keeps the label text sharp and, for a single flat colour, produces a smaller file than JPEG. JPEG blurs the crisp edges of the text.
How do I know my label text is readable?
Compute the brightness of both colours with Y = 0.299 R + 0.587 G + 0.114 B and keep the difference above about 90. The default grey fill at 204 with dark text at 60 gives a gap of 144, which reads clearly.
Related tools
Handwriting Font Maker
Turn your handwriting into a real font: print the template, write, photograph, download a TTF.
QR Code Generator & Reader
Make QR codes and decode them from images.
Barcode Generator
EAN, UPC, Code 128 and more as PNG or SVG.
ASCII Art from Image
Turn any picture into text-mode art.
Dithering Tool
Floyd-Steinberg, Atkinson and ordered dithering effects.
Sprite Sheet Generator & Splitter
Pack images into a sprite sheet or slice one apart.