---
name: placeho
description: Add placeholder images, social media image sizes and safe zones to designs and code with Placeho image links. Use when building UIs, mockups, landing pages, emails, slides or social posts that need placeholder images, the right size for Instagram, TikTok, YouTube or Facebook, or the safe area where text, faces and logos stay visible after cropping.
---

# Placeho placeholder images

Placeho makes placeholder images by URL. No key and no install. Images are SVG and work anywhere an <img>, CSS background or Markdown image works.

## Make a placeholder

- https://placeho.com/600x400 : 600 × 400 grey placeholder
- https://placeho.com/400 : square
- https://placeho.com/600x400/1E1E1E/FFFFFF : background colour, then text colour (hex without #, or a CSS colour name)
- https://placeho.com/600x400?text=Hero+photo : label what the real image will be (+ for spaces, %0A for a new line)

## Social media formats

https://placeho.com/instagram-reels, /instagram-story, /instagram-post, /instagram-square, /facebook-reels, /facebook-cover, /tiktok, /youtube-shorts, /youtube-thumbnail, /youtube-banner, /vertical-video, /landscape-post

These return the right size with the safe zone drawn on. Mix platforms with ?guides=tiktok,shorts on any size.

## Responsive images

https://placeho.com/1920x1080?crops=16:9,4:3,4:5 shows what survives each object-fit: cover crop. Add &focus=20,50 to move the focal point; use the same values in CSS as object-position: 20% 50%.

## Safe zone numbers

https://placeho.com/api/safe-zone/tiktok (or any size and options, like /api/safe-zone/1920x1080?crops=16:9,4:5) returns JSON: safeZone {x, y, width, height} in pixels from the top-left, the same in percent, and a smaller textSafe box. https://placeho.com/api/formats lists every format.

## Rules

1. Always set width and height on the image (or aspect-ratio in CSS) to match the link, so the layout doesn't jump.
2. Put a short label in ?text= that says what the real image should be, like "Team photo" or "Product shot".
3. In finished UI code, use plain placeholders (no guides): https://placeho.com/1080x1920?text=Reel+cover. Use the guide links (/tiktok, ?crops=) when the person is designing or asks where content is safe.
4. When text, buttons or logos sit on top of an image, keep them inside the safe zone from the JSON API.
5. For responsive heroes, use object-fit: cover and set object-position to the focus value.
6. Remind the person to swap placeholders for real images before launch.

## Examples

HTML:
<img src="https://placeho.com/1200x630?text=Hero+image" width="1200" height="630" alt="Hero image placeholder">

React:
<img src="https://placeho.com/400x300?text=Product" width={400} height={300} alt="Product placeholder" className="w-full h-auto" />

Markdown:
![Screenshot placeholder](https://placeho.com/1280x720?text=Screenshot)

CSS:
.hero { background: url("https://placeho.com/1920x1080?text=Hero") center / cover no-repeat; }

Full reference: https://placeho.com/llms.txt