How to use the placeholder image generator
- Enter Width (px) and Height (px), or press a button under Common sizes. The preview redraws as you type.
- Set Background and Text colors with the color picker or by typing a hex code such as
#e2e8f0or#fff. - Type your own words in Custom Text. Leave it empty to print the size, for example 600×400.
- Pick PNG or SVG under Format, then press Download or Copy Data URI.
How the image is made
The PNG is drawn on an HTML canvas: fillRect paints the background and fillText centers your text, then the browser encodes the result. The SVG is a short text file with one <rect> and one <text> element. The font size starts at one eighth of the shorter side, never below 12 px, and shrinks until the text fits inside 90 percent of the width. Nothing is uploaded; the file is built on your device. Canvas size limits differ by browser, which is why the tool stops at 4096 px (MDN, maximum canvas size).
Worked example
The defaults give a 600 by 400 image with a #e2e8f0 background and #64748b text that reads 600×400. The font size is 400 divided by 8, which is 50 px. As a PNG the file is about 12 KB, and as an SVG it is 322 bytes. Choose SVG and press Copy Data URI to get a string that starts with data:image/svg+xml;charset=utf-8,. Paste it into an <img src="..."> tag or a CSS url("...") and the placeholder shows without any network request.
Limits and edge cases
- A size below 1, an empty field or a non-number keeps the previous size and shows a message. Above 4096 the tool uses 4096. Decimals are rounded to whole pixels.
- A color that is not 3 or 6 hex digits is flagged, and the image keeps the last valid color until you fix it.
- PNG text uses your device fonts (system sans-serif), so it can look slightly different on another computer. SVG text uses the font of whatever opens the file.
- A data URI is about a third larger than the file in base64 and much longer than a file path, so use it for small images. For larger ones, download the file.
- Need a real picture later? Shrink it with the Image Compressor, or turn a PNG into text with the Image to Base64 converter.
Frequently asked questions
What size should a placeholder image be?
Use the size of the slot it will fill, so the layout behaves the same when the real picture arrives. Common sizes are 150 by 150 for avatars, 300 by 250 for a medium ad, 800 by 600 for blog images, 1200 by 630 for link-preview images and 1920 by 1080 for hero banners. The Presets buttons fill these in.
Should I choose PNG or SVG?
Choose SVG when you want a tiny file that stays sharp at any zoom or sits inside a CSS or HTML data URI. Choose PNG when the image goes somewhere that does not accept SVG, such as many email clients, or when you want to test real image loading and file size. The label under the preview shows the file size of the current format.
Why is my long text so small?
The text is scaled down until it fits inside 90 percent of the image width and height, so a long label never gets cut off. If the text is still too small to read, make the image larger or shorten the Custom Text.
Is there a size limit?
Yes. Width and Height accept whole pixels from 1 to 4096 for both PNG and SVG. Most browsers allow much larger canvases, but MDN notes that iOS devices have limited a canvas to 4,096 by 4,096 pixels, so 4096 is the size that works everywhere.
Sources: MDN Web Docs, canvas element, maximum canvas size; MDN Web Docs, SVG text element.