Placeholder images,
from a URL.
Write the size into the address and you get an image of exactly that size back. /640x360 is a 640×360 SVG, /640x360.png the same thing as a PNG. Colours, the label and the font are query parameters. There's no account and no key.
The preview is the real response from that URL, exactly what your page would load.
Where a placeholder earns its keep.
A placeholder is a real file with a real size. Anything that measures, lazy-loads or crops images behaves the way it will once the real pictures arrive.
Layouts before the content exists
Fill a product grid or a blog index with images at the aspect ratio the real ones will have, so nothing shifts when the photos land. A /400x300 in every card is enough to judge spacing, cropping and how the grid wraps on a phone.
Ad slots at standard sizes
IAB units like 300×250, 728×90 and 160×600 are just URLs. Label each one with ?text= so whoever reviews the staging page can tell which slot is which without opening the code.
Seed data and test fixtures
Point avatar_url and cover_image columns at placeholder URLs in seed scripts. Image components, srcset logic and aspect-ratio boxes get real files to work with, and there are no binaries to commit to the repo.
Docs, tutorials and bug reports
Show where an image goes in an example without attaching one. A readable URL like /1200x630?text=Your+cover explains its own purpose to the next person who reads the code.
Everything the URL accepts.
The size lives in the path; everything else is an optional query parameter, in any order. Colours are six-digit hex without the #.
| Parameter | Values | Default | What it does |
|---|---|---|---|
| /{w}x{h} | 1–4000 each | required | Width and height in pixels, written into the path: /600x400. |
| .{ext} | svg png jpg webp gif | svg | File type. Leave it off for SVG, a few hundred bytes of text. The other formats are drawn on the server. |
| bg | hex, no # | cccccc | Background colour. |
| color | hex, no # | auto | Label colour. Left out, it is black or white, whichever has more contrast against bg. |
| text | URL-encoded text | {w} x {h} | The label in the middle. Use + or %20 for spaces. |
| size | pixels | min(w, h) ÷ 5 | Font size of the label. The automatic size never goes below 12px. |
| font | CSS font family | sans-serif | SVGs use the viewer's fonts; drawn formats use the fonts installed on the server. |
<img
src="https://imgsrc.pub/640x360.png?text=Hero"
width="640" height="360"
loading="lazy" alt="">Paste it where the image goes.
There is nothing to install. The response is an ordinary image file, so it works anywhere a URL to an image does.
- Set width and height on the tag. The browser reserves the space before the file arrives, so nothing jumps.
- Pick the format with the extension. No extension means SVG.
- Cached for a year. Changing any parameter gives you a new file.
Six URLs and what they return.
Each image below is the live response to the path under it.
/300x250.png?bg=111827&color=A5B4FC&text=MRECPNG · IAB medium rectangle
/728x90.png?bg=EEF2FF&color=3730A3&text=Leaderboard&size=28PNG · IAB leaderboard
/1080x1080.jpg?bg=F97316&color=FFFFFF&text=1:1JPG · square post
/128x128.png?bg=8B5CF6&color=FFFFFF&text=AB&size=48PNG · avatar/1200x630?bg=0F172A&color=E2E8F0&text=Cover+imageSVG · share size
/160x600.webp?bg=E0F2FE&color=0369A1&text=160x600WebP · skyscraperPlaceholder images, answered.
Is the placeholder image API free?+
Yes. There is no account, no API key and nothing to install. Every response is sent with a one-year immutable cache header, so a page that shows the same placeholder a thousand times is drawn once.
Should I use SVG or PNG?+
SVG is the default and the lightest: a few hundred bytes of text that stays sharp at any zoom. Use PNG, JPG or WebP when whatever consumes the image can't take SVG, such as next/image without dangerouslyAllowSVG, most email clients and og:image tags.
How do I put spaces or symbols in the label?+
URL-encode the value. Spaces can be written as + or %20, so ?text=Hero+banner and ?text=Hero%20banner give the same image. Characters outside Latin work in SVG; in drawn formats they depend on the fonts installed on the server.
What is the largest size I can request?+
4000 by 4000 pixels. A larger, zero or malformed size returns a 400 response with a one-line explanation instead of an image.
Does it work with the Next.js Image component?+
Yes, once imgsrc.pub is listed in images.remotePatterns in next.config. Ask for .png, .jpg or .webp rather than SVG, because next/image refuses remote SVG unless you turn on dangerouslyAllowSVG.
Do I have to set the colours?+
No, both are optional. Without bg the image is light gray (#cccccc). Without color the label is black or white, picked from the background's brightness so it stays readable.
The rest of the toolbox.
Five more free endpoints, and three AI tools for when a placeholder won't do.
Placeholder video
FreeLooping H.264 MP4s from 50 to 1280 px, for players and hero sections you haven't shot yet.
QR code
FreeA PNG for any link or text, at the highest error correction, so it still scans when printed small.
Share card
FreeA 1200×630 Open Graph image drawn from a title and one line of text. Point og:image at it.
Favicon
FreeAny site's icon by domain. It reads the page's link tags and falls back to /favicon.ico.
Logo resizer
FreeOne square logo in; favicon.ico, Apple, Android and PWA icons and a web manifest out. It runs in your browser.
AI image
1–30 creditsSquare, landscape or portrait, at 1024×1024, 1536×1024 or 1024×1536.
AI logo
30 creditsA 1024 px mark, delivered on a solid background and on a transparent one.
AI share card
30 creditsA 1200×630 illustrated Open Graph image for a launch, post or product page.
Need the real picture?
Describe it instead.
GPT Image 2 renders images, logos and share cards from a prompt, from 1 credit a draft.