What size should placeholder images be?

The exact dimensions of the slot they will fill in the final design. A placeholder at the wrong aspect ratio hides layout bugs that only surface when real content arrives.

Can I use these placeholders in a client prototype?

Yes. There is no watermark and no attribution requirement, so they are fine for prototypes, design files and client presentations.

Is there a maximum image size?

4000×4000 pixels, which is well beyond any mobile layout slot. Generation happens in your browser, so very large sizes are limited by your device rather than a server.

floow.design

Placeholder Image Generator

Build placeholder images at any size as PNG, WebP or a sub-kilobyte SVG data URI — no third-party service.

Generate freeFree to download the whole mobile setNo sign-upNo watermarkRuns in your browser

Aspect ratio

Width (px)Height (px)LabelLeave blank to show the dimensions.Pattern

Background

Text

Show dimensions when no label is setRaster format

Size: 800 × 600
Ratio: 1.333
SVG size: 0.4 KB
Data URI: 0.7 KB

The SVG data URI is usually under 1 KB and needs no network request at all — unlike a third-party placeholder service, it keeps working offline and cannot log who is loading your mockups. Suggested text colour for this background: black.

Set dimensions, colours and a label, and get a placeholder image sized exactly for the slot you are filling.

Better than a grey box: a placeholder carrying its own dimensions tells you at a glance whether the layout is using the size you intended.

Why a labelled placeholder beats a grey box

A plain rectangle tells you nothing when a layout misbehaves. A placeholder that prints its own dimensions makes an incorrect slot obvious immediately — you can see that a 400×300 image is being rendered into a square container without opening dev tools. The diagonals do the same job for aspect ratio: any distortion shows up as asymmetric crossing lines.

Placeholders at the real aspect ratio

The most common layout bug found late is an image slot that was designed square and populated with 16:9 photography. Using placeholders at the true aspect ratio of the eventual content surfaces that mismatch while it is still cheap to fix.

Test with awkward content

Real apps get portrait photos where landscape was expected, and images that fail to load entirely. Generate a few placeholders at hostile ratios and check your layout survives them, rather than designing only against the ideal case.

How to use the placeholder image generator

Pick an aspect ratio preset, or set a custom width and height.
Leave the label blank to print the dimensions on the image itself — usually more useful than a caption.
Match the colours to your app's surfaces so the placeholder does not visually shout over the layout.
Generate a couple at hostile ratios too, to check the layout survives unexpected content.
Download the PNG and drop it into your design or prototype.

Use it with

Aspect Ratio Calculator — Work out the missing width or height for any ratio, with the common phone and store ratios one click away.
Phone Mockup Generator — Drop screenshots into realistic iPhone and Android frames, then export every combination as PNG and SVG.
WebP Converter — Batch-convert PNG, JPEG, WebP and AVIF in your browser, with a quality slider, optional resize and a live size comparison.

Frequently asked questions

What size should placeholder images be?: The exact dimensions of the slot they will fill in the final design. A placeholder at the wrong aspect ratio hides layout bugs that only surface when real content arrives.
Can I use these placeholders in a client prototype?: Yes. There is no watermark and no attribution requirement, so they are fine for prototypes, design files and client presentations.
Is there a maximum image size?: 4000×4000 pixels, which is well beyond any mobile layout slot. Generation happens in your browser, so very large sizes are limited by your device rather than a server.