Make the placeholder represent the asset slot
A placeholder image should use the same width, height, and aspect ratio as the asset it temporarily replaces. That makes it useful for finding overflow, awkward crops, and unexpected empty space before final photography or illustration is available. Use the Placeholder Image Generator to set a custom PNG size, background color, text, and text color in the browser.
Start from the layout contract, not from a convenient stock size. A card thumbnail that is displayed at 4:3 needs a 4:3 test image; a hero intended for 16:9 needs a 16:9 test image. If the design accepts several responsive crops, create one placeholder for each planned crop instead of stretching a single rectangle everywhere.
Test cards, heroes, and product grids differently
For responsive cards, create a placeholder that matches the image container rather than the full card. Label it with both its role and dimensions, such as “Article thumbnail — 800 × 600.” Populate several cards with the same ratio and then include one intentionally tall or wide source if the implementation permits uploaded media. This reveals whether object-fit behavior is explicit or accidental.
For hero media, use the final desktop ratio and a separate mobile ratio where the design calls for one. A centered label makes crop changes obvious when a narrow viewport removes too much of the image. Check that headings, calls to action, and image overlays remain readable against the planned background contrast.
For product grids, make placeholders for every supported product image shape. A 1:1 square, a 3:4 portrait, and a wide banner can expose inconsistent row heights or price alignment. Label each image with its intended role so a visual mismatch is easier to diagnose during review.
Add labels and colors that expose layout mistakes
Neutral gray is fine for a quick wireframe, but it can hide contrast problems. Choose a background roughly comparable to the expected visual weight, then select text color with clear contrast. Use short labels: a long sentence can create a text-wrapping problem that real image media will never have.
Dimension labels are especially helpful. A generated “1200 × 630” image confirms at a glance which source was placed in a slot. If an exported asset is later resized, the visible label helps a reviewer notice the mismatch before it reaches production.
The generator outputs a PNG. It creates a testing asset, not a final image optimization pipeline, and it cannot predict how a real photo’s focal point will crop. Replace placeholders with approved assets before launch and repeat the same breakpoint checks with the real media.
Verify the layout at the sizes users will see
Place the generated file in the target component, then inspect the page at desktop, tablet, and narrow mobile widths. Check for four things: the image does not distort, the container keeps the intended ratio, adjacent content aligns, and text remains readable when the image changes size.
Also test the empty and failure states. A missing asset should not collapse a card or shift surrounding content unexpectedly. When the final assets arrive, compare their dimensions with the placeholder contract; resize or crop them deliberately with the Image Resizer rather than relying on a browser to make an unsuitable source fit.
Common questions
What size should a placeholder image be?
Use the dimensions or aspect ratio specified by the layout slot. The displayed size may be responsive, but the placeholder should represent the intended source shape.
Should every placeholder be gray?
No. A neutral background is useful for wireframes, while a color closer to the final visual weight can reveal contrast and overlay issues earlier.
Can one placeholder test desktop and mobile?
Only when both layouts use the same crop. If mobile uses a different aspect ratio or focal area, generate a separate placeholder for that breakpoint.
Does a placeholder prove a real image will crop correctly?
No. It proves the container behavior with a known shape. Test real assets as well, especially images with people, text, or important edge detail.
Can I use generated placeholders as final production images?
They are best used as temporary layout assets. Replace them with approved media when the page needs meaningful visual content.