Placeholder image
Generate custom placeholders for mockups, drafts and sites under construction: pick the size, colors and text, then download the ready-to-use PNG.
What placeholder images are for
When a page or mockup doesn't have its final photos yet, a placeholder with the exact dimensions keeps the layout stable: blocks won't "jump around" once the real image arrives, and anyone reviewing the draft immediately sees how much space it will take. Unlike services such as placehold.co or placekitten, this PNG is generated locally: it works offline too, and it won't vanish if an external service shuts down or slows to a crawl.
Common sizes worth knowing
A few recurring formats: 1200×630 for Open Graph social previews, 1280×720 for 16:9 video thumbnails, 1080×1080 for square Instagram posts, 300×250 for medium rectangle banner ads and 150×150 for avatars. The text scales itself to fit the image: leave it empty and the dimensions get printed instead, the most useful convention for spotting placeholders at a glance in a mockup.
Why a placeholder keeps a page standing
A block without an image has zero height until the photo arrives, and when it arrives it pushes everything else down: it is the flaw readers experience as «the page jumping while I look at it». It even has a name in Google's metrics, which measures it as layout shift and treats it as a quality problem.
A placeholder of the exact dimensions occupies the space from the first instant, and the page stays still. It is the same reason why, on the finished site, images should always declare width and height: not to fix their size, but to tell the browser how much room to reserve before it has even downloaded them.
The recurring sizes
1200 by 630 is the preview that appears when a link is shared: it is the size required by Open Graph metadata, and a page without it gets shared with an ugly or empty preview. 1280 by 720 is 16:9, that is video covers and presentations. 1080 by 1080 and 1080 by 1920 are the square and the vertical of social media.
For images inside an article the practical size is around 1600 pixels wide, which covers most screens including high-density ones without producing enormous files. And for thumbnails 400 pixels is enough: loading a 3000-pixel image to show it at 300 is the commonest waste on the web.
Placeholder or real image: when to stop
A grey placeholder with the dimensions written on it is for designing: checking that the surrounding text works, that the proportions hold on a phone, that the grid does not break. For that it is better than a photograph, because it does not distract and does not let the design be judged on the beauty of the picture.
It becomes a problem when it survives into production: that happens more often than people think, and a published site with grey boxes communicates abandonment. It is worth keeping placeholders in an unmistakable colour, so they cannot be taken for finished content.
The alternatives, and their limits
Many people use online services that generate placeholders from a URL: they are convenient, but they tie a page to an external site that can slow down, change or disappear, and every load tells that service who is looking at the page. For a prototype that is fine, for a published site it is not.
The lightest alternative of all is not even an image: it is a coloured rectangle drawn with the stylesheet, which weighs zero bytes. Downloaded placeholder images are needed instead when the file has to be a real file: a mockup to send to a client, a presentation, a document.
Nearby tools
For the dimensions of a real image there are Resize photo and Photo dimensions and info, for size Compress image. For mock graphics Random colour and Gradient generator, and for dummy text Lorem ipsum generator.