Skip to content

Generating placeholder images for a layout

4 min read API guides

generate placeholder images

To generate placeholder images, you need the right dimensions before the real asset exists. A grey box at the final size is enough to check spacing, cropping and responsive behaviour. A placeholder service saves you from creating a file for every size.

The Image placeholder endpoint returns a PNG with the requested width, height and background colour.

curl "https://api2.globus.studio/v2/ph_image?width=600&height=400&color=eeeeee" -o placeholder.png

Parameters

To generate placeholder images, pass width and height in pixels. color is a hex value without the hash. The response is an image, so the content type is image/png. Defaults keep the call short when you only need a square.

Where to generate placeholder images

Use it in a component library, a design review or a test fixture. The same URL can serve several sizes and stay cacheable. A prototype that uses real photos can hide layout problems; a plain block exposes them. When you generate placeholder images for a card grid, use the same aspect ratio as the final artwork so the text block does not move when the real file arrives.

<img src="https://api2.globus.studio/v2/ph_image?width=600&height=400"
     width="600" height="400" alt="">

Alt text

When you generate placeholder images for a review, treat the result as decorative. Use an empty alt attribute so a screen reader skips it. If the image carries meaning in a demo, write a short description instead.

Why the size is capped

A large image consumes memory on the server. The endpoint caps the pixel count to keep one request from exhausting the process. Request a smaller image and scale it in CSS when you need a large preview.

Caching

A generate placeholder images response can be cached by the browser. Add a version or a size to the URL when you change the design. Do not use the placeholder in production content where a real image belongs. A cached placeholder can outlive the review, so keep the test URLs in the design notes and out of the content plan.

Limits

The endpoint returns a solid colour, not text or gradients. Read the endpoint documentation for the parameter list and limits.

Responsive images

A placeholder can demonstrate a srcset without a real asset. Generate two or three sizes and let the browser choose. The markup stays the same when the real image arrives, which makes the layout test more useful.

<img src="https://api2.globus.studio/v2/ph_image?width=600&height=400"
     srcset="https://api2.globus.studio/v2/ph_image?width=1200&height=800 2x"
     width="600" height="400" alt="">

Colour and contrast

When you generate placeholder images for a test page, a mid-grey fill shows both light and dark text. A white placeholder can hide a contrast problem. Pick a colour that differs from the page background so the image bounds are visible during the review.

Sizes for a review

A review usually needs three sizes: a card, a wide banner and a square thumbnail. Generate all three from the same colour and ratio, then check how the text wraps around each one. If a heading collides with the image at the narrow size, the problem is in the layout, not in the file. Fix it while the asset is still a placeholder.

Print and social previews

A placeholder can stand in for an Open Graph image while you build the page. Generate the size the network expects, then replace it with the final artwork. Do not ship the placeholder as the permanent social image; a grey rectangle gives a shared link no context.

For print, generate at the physical size and resolution you need. A 600-pixel image stretched to a poster looks soft. The endpoint caps the pixel count, so a large print piece needs a different source.

Related reading

When you generate placeholder images for a test page, pair them with placeholder text. If the layout needs a link or a label, a QR code can stand in for the final asset. Keep the placeholder out of the Open Graph tags until the real image is ready.

Further reading: W3C WAI image guidance.

Custom work

Need an API that does not exist yet?

Describe the task and the response format. We will estimate the endpoint, the integration and the maintenance.

Start a conversation