Placeholder Image Generator
Generate placeholder images with custom size, color and text.
About the Placeholder Image Generator
The Placeholder Image Generator produces lightweight placeholder images on demand via the public placehold.co service. Specify width, height, colors, and optional caption text, and the service returns a PNG image you can embed directly in HTML, design mockups, slide decks, or prototype layouts — ideal for representing where a real image will eventually sit before the production asset is ready.
Placeholder images solve a real workflow problem: designers and developers need to lay out pages before the photography, illustration, or product images exist. Using a hardcoded 1x1 transparent GIF distorts the layout. Using a real image makes the mock misleading. A correctly-sized placeholder shows the exact dimensions, aspect ratio, and intended position of the eventual asset, so layout decisions can be made confidently before the asset team delivers.
The placehold.co service is free and requires no API key. Image requests are served from a CDN edge cache, so latency is typically under 50ms for cached sizes. The service supports arbitrary dimensions from 8×8 to 4000×4000, any valid hex color, and any UTF-8 caption text (including emoji, CJK characters, and Unicode symbols).
How It Works
The generator constructs a URL with the format https://placehold.co/[W]x[H]/[BG]/[FG]/[TEXT] where:
- W and H are integer pixel dimensions between 8 and 4000.
- BG is the background hex color (without the
#), 3 or 6 hex digits. - FG is the text hex color, also 3 or 6 digits.
- TEXT is the optional caption, URL-encoded.
If the caption is omitted, the service displays the dimensions (e.g., 640×360). This is the most common pattern — viewers immediately see the aspect ratio the layout was designed for.
The image is rendered server-side as a PNG with the requested background color, then the caption text is composited on top in the requested foreground color. Text is auto-sized based on the image dimensions: a 100×100 image gets smaller text than a 1000×1000 image. The text is centered horizontally and vertically.
The hex color validation regex ^[0-9a-fA-F]{3,8}$ accepts 3-digit shorthand (e.g., f00 for red), 6-digit full RGB (e.g., ff0000), and 8-digit RGBA with alpha (e.g., ff000080 for semi-transparent red). Invalid input falls back to the default light-gray cccccc background and dark-gray 333333 text.
For dynamic layouts, you can omit the dimensions entirely and use https://placehold.co/[SIZE] where SIZE is a CSS-style size like 300x200 or even 300x200/jpeg to force JPEG output (smaller file size for photographs, though placeholder images are usually flat colors where PNG is more efficient).
Worked Examples
The default settings produce a 640×360 image with light-gray background and dark-gray text, displaying the caption 640×360. This is the standard 16:9 aspect ratio used for video thumbnails, hero images, and YouTube-style embeds — perfect for mocking up a video-centric landing page.
Setting width 1200, height 630, no caption, and colors 1a1a2e background and e94560 foreground produces a 1200×630 social-share image placeholder (the Open Graph recommended size for Facebook and Twitter cards). When the real image is dropped in, it will already have the correct dimensions.
For a square Instagram-style thumbnail grid, use 300×300 with caption Instagram post. The text is auto-sized and centered, making the placeholder immediately recognizable in a grid layout.
For a hero banner, use 1920×1080 (Full HD) with caption Hero banner 1920×1080. The full caption is rendered even at large sizes, so anyone reviewing the mock can confirm the intended dimensions at a glance.
When to Use This Tool
- Wireframing page layouts before the production photography or illustration is ready.
- Generating Open Graph social-share image placeholders for blog post templates.
- Mocking up product card grids in e-commerce design comps.
- Embedding correctly-sized images in HTML email templates that will be replaced by a CMS.
- Creating slide deck backgrounds with the target dimensions visible.
- Building responsive-design test pages with images at common breakpoint sizes (320, 768, 1024, 1440).
- Demoing image carousel and gallery components without committing to real assets.
Limitations & Disclaimer
This tool relies on the third-party placehold.co service. While the service is free and reliable, it adds a third-party dependency to your development workflow and may be unavailable during outages. For production traffic, host the final image on your own CDN. The service may log requests including the IP addresses of viewers, which has privacy implications for production pages. Maximum dimensions are 4000×4000 pixels; larger images require a self-hosted solution. The auto-sized caption text uses a built-in font (typically a Helvetica or sans-serif fallback); custom fonts and complex layouts are not supported. See our disclaimer for full terms.
Frequently Asked Questions
Is the placehold.co service free?
Yes, completely free with no API key required. The service is operated by Ian Hancock and is widely used across the web development community. There is no published rate limit, but heavy use (hundreds of requests per second from one IP) may be throttled. For production traffic, consider self-hosting a placeholder service like <code>placeholder.js</code> or <code>ipsumimage</code>.
Can I use the generated image in production?
You can, but the placehold.co service is designed for development and prototyping. For production pages, host the actual final image on your own CDN or object storage. Relying on a third-party placeholder service for production traffic adds a single point of failure and a privacy concern (the service sees your visitors’ IP addresses and request patterns).
What is the maximum image size?
The service supports dimensions up to 4000×4000 pixels. Larger images are technically possible via direct URL manipulation but are not officially supported and may be rejected. For very large images (4K+ hero images), use a self-hosted placeholder service or generate the image locally with ImageMagick.
Why does my caption text look weird?
The service URL-encodes the caption, so special characters like <code>#</code>, <code>?</code>, <code>&</code>, and spaces need to be encoded. The generator handles this automatically via <code>encodeURIComponent</code>. If you construct URLs by hand, you must encode the text yourself. Some Unicode characters may not render if the service’s font does not include them.
Can I generate JPEG or WebP instead of PNG?
Yes. Append <code>/jpeg</code> or <code>/webp</code> to the URL after the colors. JPEG produces smaller files for large images with gradients (though placeholder images are usually flat colors where PNG is more efficient). WebP is supported by modern browsers and produces smaller files than both PNG and JPEG.
Can I use multiple lines in the caption?
Yes. Use the URL-encoded newline <code>%0A</code> in the caption. For example, <code>https://placehold.co/600x400/ccc/333/Line%201%0ALine%202</code> produces a two-line caption. This is useful for showing both the dimensions and a description, like <code>1200x630%0AOpen Graph</code>.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team