Placehold.co:
The AI-Era Developer's Complete Guide
One URL. Any image. Zero setup. In the age of AI-generated visuals, rapid prototyping and streaming interfaces, placeholder images are no longer a "nice to have" — they are part of your architecture. This guide teaches you every feature of Placehold.co with live, copy-paste-ready examples you can ship today.
Why Placeholder Images Matter More Than Ever in 2026
Five years ago, placeholders were just grey boxes in a wireframe. Today they sit at the centre of three massive shifts in how we build software:
AI-generated media pipelines
When an AI model takes 8–40 seconds to render an image, the UI must show something immediately. Placeholders are the bridge between "request sent" and "asset ready" — and they keep your layout from collapsing during that gap.
Streaming & skeleton UIs
LLM chat interfaces, infinite feeds and progressive dashboards all rely on skeleton loaders. A well-coloured placeholder communicates more in 200 bytes than a spinner ever will.
Design-to-code handoff
Designers describe a 1200×630 OG image. Developers need it now, not after the asset pipeline finishes. A single URL keeps both sides unblocked and honest about dimensions.
Zero cost, zero lock-in
No API key to rotate, no billing dashboard, no vendor SDK. It's just a URL — which means
it works in <img>, CSS, Markdown, emails, Figma plugins and even
plain text files.
The core promise Placehold.co is a simple, fast and completely free image placeholder service. Everything is driven by the URL itself — no account, no rate limits, no watermarks.
How The URL Works — The Only Pattern You Need
Every Placehold.co request follows one predictable structure. Learn it once and you've learned the entire service:
https://placehold.co/{size}/{background}/{text-color}/{format}?text={text}&font={font}# The simplest possible placeholder
https://placehold.co/600x400That's it. No query string, no configuration. Placehold.co returns a crisp SVG with the dimensions printed in the centre.
Live output · 600×400
Reading the URL from left to right
- Size — always required, written as
width x height. - Background color — optional, hex or CSS color name.
- Text color — optional, but must be paired with the background.
- Format — optional, defaults to SVG. Use
/pngor.png. - Query string — optional
?text=and&font=modifiers.
Order matters
Path segments must appear in the order above. /600x400/fff/000 is valid;
/600x400/000/fff/png is valid; /600x400/png/000/fff is not.
Size — Width, Height and Squares
The size segment uses a lowercase x between two numbers, with no spaces. If you
omit the height, Placehold.co produces a perfect square.
# Standard rectangle
https://placehold.co/600x400
# Square — height omitted
https://placehold.co/400600x400 · rectangle
400 · square
Minimum: 10 × 10 px
Anything smaller returns an error. This is rarely a practical limit — 10px is smaller than a favicon.
Maximum: 4000 × 4000 px
That's 16 megapixels — more than enough for hero banners, OG images and print mockups.
Common presets
1200x630 OG image · 1920x1080 hero · 400x400 avatar ·
800x600 card · 160x600 skyscraper.
Responsive tip
Request one large placeholder and scale it with CSS instead of generating dozens of variants. Fewer requests, faster pages.
Image Formats — SVG, PNG, JPEG, GIF, WebP, AVIF
The default output is SVG: razor-sharp at any zoom, typically under 1 KB, and perfect for wireframes. When you need a raster format, append it to the URL. Both slash and extension notation produce identical results:
# Slash notation
https://placehold.co/600x400/png
# Extension notation — identical result
https://placehold.co/600x400.png
# Combined with colors (format always comes last)
https://placehold.co/600x400/000000/FFFFFF/png
https://placehold.co/600x400/000000/FFFFFF.pngSVG · default
Infinitely scalable, tiny file size, no blur at any resolution. The right default for wireframes, mockups and documentation.
PNG
Lossless with full alpha transparency. Best when you need an exact pixel-perfect raster or a transparent overlay.
JPEG
Small file sizes and universal support. Ideal for photographic placeholders and legacy email clients.
GIF
Rarely needed today, but useful for maximum compatibility in older systems and CMS uploaders.
WebP
Excellent compression with alpha support. A great choice for performance-conscious production mockups.
AVIF
The next-generation format with the smallest file sizes. Perfect for testing modern image pipelines.
Which one should you use? Stick with SVG for 90% of cases. Switch to WebP or AVIF when you're testing real image pipelines, and JPEG only when legacy compatibility is non-negotiable.
Colors & Transparency
Background and text colors are two consecutive path segments. You can use hex values, any
CSS color name, or the special transparent keyword.
Hex values
# 3-digit and 6-digit hex both work — omit the # symbol
https://placehold.co/600x400/000000/FFF
https://placehold.co/600x400/4f46e5/ffffffCSS color names
https://placehold.co/600x400/orange/white
https://placehold.co/600x400/rebeccapurple/gold
https://placehold.co/600x400/tomato/ivoryTransparent backgrounds
# Perfect for overlays, icons and UI mockups
https://placehold.co/600x400/transparent/F00
https://placehold.co/600x400/transparent/4f46e5/pngGolden rule Background and text color must be specified together. Supplying only one produces an unexpected result — always give both, or neither.
Live palette
0f172a / 38bdf8
4f46e5 / ffffff
db2777 / ffffff
06b6d4 / 0f172a
orange / white
10b981 / ffffff
Custom Text & Line Breaks
By default the placeholder prints its own dimensions. The text query parameter
lets you say something far more useful — like what the image is actually for.
# Spaces become + signs
https://placehold.co/600x400?text=Hello+World
# Line breaks use a literal \n
https://placehold.co/600x400?text=Hello\nWorld
# Combine both for multi-line labels
https://placehold.co/800x450/4f46e5/ffffff?text=Product+Image\nComing+Soon?text=Hello+World
?text=Hello\nWorld
Encoding spaces
Every space in your label must become a +. If you build URLs in JavaScript,
encodeURIComponent() handles this for you.
Encoding line breaks
A backslash followed by n creates a new line. Combine with +
for readable multi-line labels.
Why label at all?
During design reviews, "Hero Image" tells a stakeholder far more than "1200 x 600". It turns a mockup into a conversation.
Keep it short
Long strings shrink to fit and become unreadable. Two to four words per line is the sweet spot.
Fonts — Twelve Typefaces at Your Fingertips
Match the placeholder type to your design system using the font query parameter.
The default is Lato.
https://placehold.co/600x400?font=roboto
# Fonts with spaces use + or %20
https://placehold.co/600x400?font=open+sans
https://placehold.co/600x400?font=playfair+display
# Combined with custom text
https://placehold.co/800?text=Hello+World&font=robotoSide-by-side comparison
Lato
Playfair Display
Oswald
Poppins
Designer tip Use Playfair Display or Lora for editorial mockups, Oswald for bold headlines, and Inter-adjacent options like Poppins or Montserrat for modern product UI.
Retina Images & Responsive Delivery
On a Retina, 4K or modern phone display, a standard-resolution image looks noticeably soft.
Placehold.co solves this by letting you append @2x or @3x directly
to the size segment.
# 2× resolution
https://placehold.co/600x400@2x.png
https://placehold.co/800@2x.png
# 3× resolution
https://placehold.co/600x400@3x.png
https://placehold.co/800@3x.png
Format restriction
Retina suffixes only work with raster formats — PNG, JPEG, GIF, WebP and
AVIF. SVG is already resolution-independent, so it ignores @2x.
Pattern 1 — CSS downscaling
Request a double-size image and display it at the original dimensions. The browser downsamples, producing a crisp result on high-DPI screens.
<img src="https://placehold.co/600x400@2x.png"
width="600" height="400"
alt="Retina placeholder">/* CSS background version */
.hero {
background-image: url("https://placehold.co/1200x800@2x.png");
background-size: 600px 400px;
background-repeat: no-repeat;
background-position: center;
}Pattern 2 — the modern srcset approach
This is the pattern you should use in production. It lets the browser choose the perfect resolution for the user's device — no wasted bandwidth on standard screens, full sharpness on Retina.
<img
src="https://placehold.co/600x400.png"
srcset="https://placehold.co/600x400.png 1x,
https://placehold.co/600x400@2x.png 2x,
https://placehold.co/600x400@3x.png 3x"
alt="Responsive placeholder"
loading="lazy">
Always set width and height
Adding the width and height attributes lets the browser reserve
space before the image loads. This eliminates layout shift (CLS) — one of Google's Core Web
Vitals.
Real-Life Use Cases — Where This Actually Saves You Time
Theory is fine. But here's where placeholder URLs genuinely change how you work, especially in AI-driven and streaming-heavy applications.
1 · AI chat & streaming UIs
While an LLM streams tokens, image slots fill asynchronously. A branded placeholder keeps the conversation layout stable and communicates "content is coming" without a spinner.
2 · AI image generation fallback
Show a dimension-matched placeholder with the prompt text while your model renders. Users perceive the app as instant, even when generation takes 30 seconds.
3 · E-commerce product grids
Build the full category grid before a single product photo exists. Matching aspect ratios mean zero rework when real assets land.
4 · Blog & CMS templates
Every post card gets a correctly sized 1200×630 OG image and a 600×400 thumbnail — consistent, on-brand and instantly available.
5 · User avatars & profiles
Generate 400×400 avatar placeholders with initials, matching your brand palette. Perfect for seed data and demo accounts.
6 · Dashboard widgets
Mock up analytics cards, chart containers and media panels with exact dimensions before the data layer exists.
7 · Email templates
Placeholders survive most email clients. Design and test responsive email layouts without hosting a single asset.
8 · Responsive testing
Request several sizes and verify how your grid behaves at every breakpoint — without ever opening a design tool.
Copy-paste snippet: AI image slot with graceful fallback
Here's a production-ready pattern. The placeholder shows immediately; when the AI-generated asset arrives, it fades in over the top.
<figure class="ai-slot">
<img
src="https://placehold.co/1024x1024/4f46e5/ffffff/png?text=Generating...\nPlease+wait"
width="1024" height="1024"
alt="AI image generating"
class="placeholder">
<img
src="/generated/result.png"
width="1024" height="1024"
alt="AI generated result"
class="result"
loading="lazy">
</figure>
<style>
.ai-slot { position: relative; aspect-ratio: 1/1; }
.ai-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai-slot .result { opacity: 0; transition: opacity .6s ease; }
.ai-slot .result.loaded { opacity: 1; }
</style>Copy-paste snippet: React component
function Placeholder({
width = 600,
height = 400,
bg = "4f46e5",
fg = "ffffff",
text,
font,
format,
}) {
const params = new URLSearchParams();
if (text) params.set("text", text);
if (font) params.set("font", font);
const size = height ? `${width}x${height}` : `${width}`;
const ext = format ? `/${format}` : "";
const src = `https://placehold.co/${size}/${bg}/${fg}${ext}?${params}`;
return (
<img
src={src}
width={width}
height={height || width}
alt="Placeholder"
loading="lazy"
decoding="async"
/>
);
}Live Placeholder Playground
Tweak the controls and watch your placeholder update instantly. Copy the URL or the HTML snippet straight into your project.
https://placehold.co/600x400/4f46e5/ffffff<img src="https://placehold.co/600x400/4f46e5/ffffff" alt="Placeholder">Complete Cheat Sheet
Every Placehold.co feature in one table. Bookmark this — it's genuinely all you need.
| Feature | URL Pattern | Notes |
|---|---|---|
| Rectangle | https://placehold.co/600x400 |
Width × height, lowercase x |
| Square | https://placehold.co/400 |
Height omitted |
| Format (slash) | https://placehold.co/600x400/png |
svg · png · jpeg · gif · webp · avif |
| Format (extension) | https://placehold.co/600x400.png |
Identical to slash notation |
| Hex colors | https://placehold.co/600x400/000000/FFF |
Background / text — omit the # |
| Named colors | https://placehold.co/600x400/orange/white |
Any valid CSS color name |
| Transparent | https://placehold.co/600x400/transparent/F00 |
Best with PNG, WebP or AVIF |
| Custom text | ?text=Hello+World |
Spaces become + |
| Line break | ?text=Hello\nWorld |
Literal backslash + n |
| Font | ?font=roboto |
12 fonts available |
| Retina 2× | https://placehold.co/600x400@2x.png |
Raster formats only |
| Retina 3× | https://placehold.co/800@3x.png |
Raster formats only |
| Everything combined | https://placehold.co/800x450/4f46e5/ffffff/png?text=Hello+World&font=poppins |
The full-power pattern |
Pro Tips From Real Projects
1 · Default to SVG
SVG placeholders are a few hundred bytes and stay sharp at any zoom. Only switch to raster when you specifically need to test raster behaviour.
2 · Always label your placeholders
?text=Hero+Image beats a blank box every single time. Design reviews move
faster when everyone can read the intent.
3 · Set width and height
Reserve layout space before the image loads. This kills cumulative layout shift and keeps your Core Web Vitals green.
4 · Add loading="lazy"
Below-the-fold placeholders should never block the initial render. Combine lazy loading
with decoding="async" for best results.
5 · Match your brand palette
Pull exact hex values from your design tokens. Mockups instantly feel like the real product, which makes stakeholder feedback far more useful.
6 · Never ship placeholders
Before deploying, search your codebase for placehold.co and replace every
hit. A one-line grep saves a very awkward production bug.
7 · Use consistent aspect ratios
Pick a small set — 16:9, 4:3, 1:1 — and stick to them. Your grid will look intentional instead of accidental.
8 · Wrap it in a component
Build a tiny <Placeholder /> component so the URL logic lives in one
place. Changing brand colors later becomes a one-line edit.
Handy: CSS utility class
.placeholder-box {
background: url("https://placehold.co/1200x800/4f46e5/ffffff?text=Loading...") center/cover no-repeat;
aspect-ratio: 3 / 2;
border-radius: 12px;
background-color: #eef2ff;
}Frequently Asked Questions
Is Placehold.co really completely free?
Yes — free for personal and commercial use, with no signup, no API key, no watermark and no billing dashboard. The service is driven entirely by URL parameters.
What is the largest image I can generate?
The maximum is 4000 × 4000 pixels, and the minimum is 10 × 10 pixels. Requests outside those bounds return an error image.
Why doesn't @2x work with SVG?
SVG is a vector format — resolution-independent and already perfectly sharp at any pixel density. Retina suffixes only apply to raster formats: PNG, JPEG, GIF, WebP and AVIF.
How do I add a line break in the text?
Use a literal backslash followed by n:
?text=Hello\nWorld. Regular spaces are written as +.
Can I specify only a background color?
No — background and text colors must be provided together. Give both, or give neither and let the defaults apply.
Which format should I use for production mockups?
For wireframes and layout work, SVG is ideal. For realistic performance testing, use WebP or AVIF. Use JPEG only when legacy browser support is critical.
Does it work inside Markdown, email and CMS editors?
Absolutely. Because it's just a URL, it works anywhere a URL fits — Markdown images, HTML emails, CMS uploaders, Figma plugins, design tools and plain text documents.
Can I use it for AI-generated image fallbacks?
Yes, and it's one of the best use cases. Show a dimension-matched placeholder with the prompt text while your model renders, then fade in the real asset when it arrives. Users perceive the interface as instant.
FreeLearning365 Resource Hub
Everything below is completely free — no signup, no paywall. Pick what you need and keep building.
🎯 Career & Interview Preparation
🤖 AI-Powered Tools
🧮 Calculators & Utilities
📚 Education & Question Banks
🛠️ Our Services
Thanks for reading 🎉
You now know every feature of Placehold.co — and more importantly, where to use it in real, AI-driven products. Bookmark this page, share it with your team, and go build something great.
FreeLearning365.com@gmail.com
0 Comments
thanks for your comments!