A placeholder should reveal layout problems early. A rectangle with the right aspect ratio is often more useful than an attractive stock photo because you can see cropping, alignment and empty space without being distracted by the artwork.
Choose the format for the job
| Format | Useful for | Watch for |
|---|---|---|
| SVG | Simple shapes, labels and scalable backgrounds. | A vector placeholder does not reproduce photo compression or a large photo download. |
| PNG | Lossless raster output and transparent edges. | Detailed content can produce larger files than JPEG or WebP. |
| JPEG | Opaque raster placeholders and checking photo-like image delivery. | No transparency; lossy compression can soften small text and edges. |
| WebP | A raster alternative with transparency support. | Confirm support in the target application, not only in your own browser. |
Reserve space before the image loads
Include width and height attributes so the browser knows the image ratio. Then use CSS to fit the available space. This reduces movement when the image appears. Replace the alt text with an appropriate description when the final image is meaningful.
<img
src="https://anyplaceholder.com/placeholder?width=1200&height=800&format=svg&text=Photo"
width="1200" height="800" alt=""
style="max-width: 100%; height: auto;"
>Make a custom placeholder image →
Try three shapes before settling on one
- Wide, 16:9: test hero areas, video-shaped frames and cards with short captions.
- Square, 1:1: test product tiles, avatar surroundings and equal-height grids.
- Tall, 2:3: test posters, covers and cards where a long image might push actions off screen.
A fixed container with object-fit: cover crops the image. A natural-height image preserves the whole image but changes the height of the page. Choose deliberately, then test with the longest title and narrowest supported viewport.
Use local fixtures for repeatable tests
A public image URL is convenient for a quick mockup. For visual regression tests, download the placeholder into your test assets so the test does not depend on network availability or later service changes. Keep the dimensions and purpose in the filename, for example product-card-600x400.png.
A flat background may be enough
When a region is decorative, a subtle pattern or gradient can establish spacing without pretending to be final photography. The SVG background tool creates dots, grids, stripes and gradients in your browser. It also provides CSS and a settings link so another person can reproduce the same background.
Before releasing the final screen
- Replace placeholder labels and check the final crop.
- Use meaningful alt text for informative images and empty alt text for decoration.
- Measure the final image bytes and loading behavior; a tiny placeholder cannot establish production performance.
For the browser behavior behind these examples, see the MDN img element reference.