Placeholder Image Generator

Download it or inline it

Pick a format for the job. SVG is a few hundred bytes for a simple placeholder and stays sharp at any size. PNG keeps flat colours and text crisp and is the most widely accepted bitmap. WebP works in every current browser and is usually smaller than PNG, also for flat colours. JPG is for tools that insist on it: it has no transparency and can show banding on gradients. For bitmaps, choose @2x or @3x to get a sharp image on high-density screens at the same CSS size; very large images are scaled down to about 16 megapixels, the canvas limit of Safari and many phones.

Copy as gives you the image embedded as a data URI in the code you need: an <img> tag with width and height, Markdown for READMEs and docs, a CSS background-image with the matching aspect-ratio, or a React <img>. The SVG is URL-encoded rather than base64-encoded, so the code stays readable and is usually no larger than base64 would be.

Need a URL like /600x400?

Online placeholder services return an image for a URL such as /600x400. They are convenient until one of them shuts down or changes its URLs, and every mockup that hot-linked it breaks at once; they also add a third-party request to each page view. An inline data URI is a self-contained replacement: copy it once and it works offline, in prototypes, Storybook stories and test fixtures. Two exceptions: many email clients, Gmail included, don’t display data-URI images, so download a PNG for emails; and very large inline images make your HTML heavy, so download big ones as files.

Three meanings of “placeholder image”

• Dummy image during design: a box of the right size that stands in for a photo still to come — what this generator makes.
• Fallback or default image: what users see when content has no picture, such as a product without a photo or a profile without an avatar. Make it neutral, keep the final aspect ratio and give it alt text that says what is missing.
• Loading placeholder: a tiny blurred preview or a solid colour shown while the real image loads, such as blurDataURL in Next.js. A small solid or gradient SVG from this page works as one.

Common placeholder sizes

Social networks change their recommended sizes from time to time, so check the platform’s current specification before you produce final artwork.

Placeholders that don’t hurt your layout

• Always set width and height (or CSS aspect-ratio) on the image. The browser then reserves the space before it loads and the page doesn’t jump — the layout shift that Core Web Vitals measure as CLS.
• Use the final aspect ratio, so cropping problems with responsive images and object-fit: cover show up early.
• Keep the dimensions as text in design reviews, so everybody sees which asset size is still missing.
• Give decorative placeholders alt="" and replace every dummy image before launch: a placeholder in production is a bug.