Placeholder Image Generator
Generate placeholder images with custom size, color, and text.
About the Placeholder Image Generator
This Placeholder Image Generator produces URL-based placeholder images via the public placehold.co service. Paste the URL into an HTML <img src>, CSS background-image, Markdown ![](), or a Figma frame, and the service returns a PNG (or JPEG/WebP) of the exact dimensions and colors you specified — rendered on-the-fly and cached on Cloudflare’s CDN.
Placeholder images are the workhorse of front-end development. They fill slots in wireframes before real photography arrives, populate card grids in mockups so layout bugs surface early, and stand in for user-uploaded content during prototyping. Designers also use them to test responsive layouts across breakpoints — a 400x300 image at 16:9, 4:3, and 1:1 ratios exposes cropping bugs that only surface in production.
Unlike local placeholder libraries such as react-placeholder, a URL-based service needs no JavaScript bundle, works in any HTML context (emails, PDFs, static sites), and can be regenerated by tweaking the URL. The trade-off is a network dependency: if placehold.co is down, your placeholders will not load. For production, replace the placeholder URL with a real asset before launch.
How It Works
The tool builds a URL of the form https://placehold.co/300x200.png/0a4f3a/faf7f0?text=Hello. The path segments encode dimensions (300x200), format (.png), background color (0a4f3a), and foreground color (faf7f0). The text query parameter is URL-encoded per RFC 3986 and rendered as the overlay text.
The service validates the hex color to either 3 or 6 characters (CSS shorthand allowed). Invalid colors fall back to the default palette. The text is rendered using a system sans-serif font sized automatically based on the image’s smallest dimension — longer text shrinks the font, shorter text expands it.
The width and height are clamped to a maximum of 4000 pixels to match placehold.co’s server-side limit. PNG supports transparency and is preferred for UI mockups; JPEG is preferred for photography-style placeholders where file size matters; WebP provides roughly 30% smaller files than PNG at equivalent quality and is supported by all modern browsers.
Color inputs are stripped of any non-hex characters, so you can paste #0a4f3a or 0A4F3A and the tool normalizes to lowercase 6-character hex. If a color is invalid (wrong length or non-hex), it falls back to the tool’s default emerald palette to avoid a broken image.
Worked Examples
A 300x200.png/0a4f3a/faf7f0?text=HT99.icu image renders as a 300-pixel-wide by 200-pixel-tall PNG with a deep emerald background and cream text reading ‘HT99.icu’. The URL is 70 characters long and caches on Cloudflare’s CDN after the first request.
A 16x9 image with no color or text renders the default grey-on-grey placeholder with the dimensions overlaid. This is the canonical format for Figma wireframes where you want to see the box dimensions at a glance.
A 1920x1080.jpg image gives a 1080p Full HD placeholder suitable for testing hero-section video or full-bleed photography slots. JPEG compression brings the file size to roughly 15–20 KB regardless of the color, making it safe to embed in a slide deck or PDF mockup.
When to Use This Tool
- Wireframing responsive layouts before real assets are ready.
- Populating card grids in design mockups to expose layout bugs.
- Placeholder user avatars in chat or comment UIs during prototyping.
- Filling image slots in HTML email templates (JPEG works in most email clients).
- Testing
srcsetand<picture>responsive-image markup with multiple dimensions. - Markdown documentation that needs inline images without committing binary files.
- Demo environments for CMS previews where actual content is not yet uploaded.
Limitations & Disclaimer
This tool generates placeholder images via the public placehold.co service, which means image rendering depends on a third-party server and CDN. Do not use placeholder URLs in production — replace them with real assets before launch. Maximum dimensions are 4000 × 4000 px per the service’s limit. Color inputs are validated to 3- or 6-character hex; invalid colors fall back to the default palette. The service supports solid colors only — no gradients, no transparency for JPEG, and no animated GIFs beyond simple frames. See our disclaimer for full terms.
Frequently Asked Questions
What is placehold.co and is it free?
placehold.co is a free, CDN-backed placeholder image service with no API key required. It supports PNG, JPEG, GIF, and WebP output, custom dimensions up to 4000px, custom hex colors, and arbitrary overlay text. It has no rate limit for normal use but may throttle abusive traffic. For mission-critical production use, self-host your own placeholder service or replace the URL with a real image asset.
Can I use these images in production?
No — placeholder images are for development, design, and documentation only. They depend on a third-party service that may go down, change its API, or rate-limit your domain. Always replace placeholder URLs with real assets (uploaded to your own CDN or storage bucket) before deploying to production.
How do I make the placeholder image transparent?
PNG supports transparency. Use <code>placehold.co/300x200.png/transparent</code> for a fully transparent background with visible text. There is no alpha-channel support for JPEG; that format is opaque by design.
What is the difference between PNG, JPEG, and WebP?
PNG supports transparency and is lossless — ideal for UI mockups with text. JPEG is lossy but compresses photographic content well — ideal for image-style placeholders. WebP provides roughly 30% smaller files than PNG at equivalent quality and supports both transparency and animation; it is supported by all modern browsers (Chrome, Edge, Firefox, Safari 14+).
Why does my text appear cut off or oddly sized?
The service auto-sizes the font based on the image’s smallest dimension and the text length. Very long text shrinks to fit; very short text expands. For predictable sizing, keep text under 30 characters or break it with <code>\n</code> (URL-encoded as <code>%0A</code>) to insert line breaks.
Can I generate placeholder images with multiple colors or gradients?
This tool supports solid colors only via the URL path. For gradient placeholders, generate the SVG locally or use a service like <code>dummyimage.com</code> that supports more customization. For Lorem Ipsum-style content, use the dedicated <a href='/tools/lorem-ipsum-generator.php'>Lorem Ipsum Generator</a>.
Last updated: July 22, 2026 · Author: HT99 Tools Editorial Team