A placeholder image in HTML is a substitute graphic that occupies an image slot in a layout, mockup, or prototype before the final asset is ready. The simplest way to make one is to generate a PNG file at the exact width and height your design requires, save it to your project, and reference it from an img tag whose width and height attributes match. Because the file is local, it loads without a network round trip, behaves deterministically in screenshot tests, and cannot change because a third-party placeholder service changed its response. The Placeholder Image Generator draws that PNG directly in your browser using the HTML5 Canvas API: you enter whole-pixel dimensions, pick a background and foreground color, optionally replace the default size label, and download the result as placeholder-WIDTHxHEIGHT.png. The preview you see on the page is only a visual fit; the downloaded file keeps the natural pixel resolution you typed. Nothing is uploaded, no account is needed, and no external service is involved.
What an Image Placeholder Does in HTML
An image placeholder is a stand-in graphic that reserves visual space in a webpage while the real photograph, illustration, or icon is still being designed, sourced, or optimized. In HTML it serves three practical jobs: it gives the browser correct intrinsic dimensions so layout does not jump when the final asset arrives (a property the Web Vitals program calls Cumulative Layout Shift), it lets developers style grids, cards, hero sections, and avatars before real media is committed, and it gives QA testers a stable fixture whose pixels never change between runs.
The phrase covers a wide range of artifacts. A wireframe might use neutral gray rectangles. A screenshot test might pin a fixed red square. A blog template might show a faded gradient with a "1200 × 630" label stamped in the middle so reviewers can see exactly which slot they are filling. The defining trait is that the file is on purpose cheap, predictable, and replaceable — not the actual content.
For HTML specifically, the most common way to insert a placeholder is the img tag with a real PNG src. That keeps the page semantically honest (it is still an image, not a styled div), makes the placeholder discoverable by accessibility tools, and lets you keep the alt attribute populated for screen readers while you decide on real copy.
Make the Placeholder PNG Step by Step
The fastest path to a local PNG is the Placeholder Image Generator. It runs entirely in the browser, so nothing you type leaves your machine.
- Open the tool and enter the exact output width and height in whole pixels. The page accepts any integer from 1 to 10,000 per side, and the total canvas must stay under 40 megapixels.
- Pick a background color and a text color using the native browser color controls — six-digit hexadecimal values such as #e5e7eb for the background and #111827 for the label.
- Optionally replace the default label. If you leave the field blank, the generator paints your dimensions in the center, formatted as something like 1200 × 630. Custom text is trimmed, capped at 80 Unicode characters, and shortened with an ellipsis if it would otherwise overflow.
- Select Create placeholder. The result line reports the validated dimensions, the label that was actually rendered, and the approximate file size of the PNG.
- Download the file. It is named placeholder-WIDTHxHEIGHT.png and lives in your browser's normal download folder.
A useful habit is to generate a small palette of placeholders up front — for example a 1600 × 900 hero, a 600 × 600 square card, and a 96 × 96 avatar — and keep them in a /placeholders/ folder inside your project. That way you can swap real assets in later without touching the HTML.
Wire the Placeholder Into Your HTML
Once the PNG is on disk, reference it like any other image. The cleanest pattern is to match the width and height attributes on the img tag to the dimensions you generated, so the browser reserves the correct space before the file even arrives:
<img src="/placeholders/placeholder-1200x630.png" width="1200" height="630" alt="Hero placeholder — replace with final image">
That attribute pair is what stops layout shift. If you need the image to scale with the viewport, wrap it in a container and let CSS handle the visual size while the width and height attributes still report the natural pixel dimensions. The PNG itself keeps its full resolution regardless of how CSS sizes it on screen.
For responsive art direction, you can list the same placeholder in a srcset with different sizes. Because the file is local, the browser picks the smallest entry that still beats the viewport width without making any cross-origin requests:
<img src="/placeholders/placeholder-1200x630.png" srcset="/placeholders/placeholder-600x315.png 600w, /placeholders/placeholder-1200x630.png 1200w" sizes="(max-width: 600px) 100vw, 1200px" width="1200" height="630" alt="Hero placeholder">
When you finally replace the placeholder with the real photo, swap the src (and the alt text) but leave the width and height alone. Browsers still use those numbers to reserve space, so the page does not jump as the new file loads.
Local Placeholder vs a Remote Placeholder URL
Many developers first reach for a remote service such as placehold.co or dummyimage.com because it requires no asset management. The trade-off is real, though, especially once a project moves past the sketch stage.
| Concern | Local PNG placeholder | Remote placeholder URL |
|---|---|---|
| Offline availability | Loads with no network; works in airplane mode and on internal staging | Fails when the host is blocked, rate-limited, or offline |
| Determinism | Pixels are identical run after run, which makes screenshot tests stable | Service may change rendering, color, or response shape without warning |
| Privacy | No request leaves the user's browser with project structure embedded in the URL | Every page view can ping the host with the placeholder's dimension in the path |
| Custom labels | Up to 80 Unicode characters of your own text, centered with bounded font size | Typically restricted to dimension text or a short query parameter |
| Dependency footprint | Zero external runtime dependency | Coupled to the host's CORS policy, uptime, and terms |
The Placeholder Image Generator commits to the first column by design: it draws on an HTML5 canvas using fillRect for the background, then writes the label with the canvas text-drawing API, encodes the result as PNG, and offers the file through a local object URL. No canvas pixel data is transmitted anywhere.
Limits That Affect What You Can Generate
Knowing the tool's contract up front saves a lot of trial and error. The generator is intentionally narrow, and each of these constraints is enforced before the canvas is allocated.
| Input | Accepted range or format |
|---|---|
| Width | Whole pixels, 1 to 10,000 |
| Height | Whole pixels, 1 to 10,000 |
| Total canvas budget | width × height must stay under 40 megapixels |
| Colors | Six-digit hex values via the browser color picker |
| Custom label | Optional, trimmed, capped at 80 Unicode characters |
| Label font size | Scaled from the shorter image dimension, clamped between 12 px and 96 px |
| Output format | PNG only, named placeholder-WIDTHxHEIGHT.png |
| Transparency | None — background is painted solid across the whole canvas |
Two consequences are worth internalizing. First, because the background is a flat solid color, the placeholder cannot be composited over a non-uniform page background without a visible seam — pick a background that matches the surrounding section if that matters. Second, because the tool does not silently adjust contrast, a light label on a near-white background is your responsibility to avoid; pick foreground and background colors with enough luminance difference.
Practical Layout Sizes for HTML Placeholders
The tool does not prescribe any "correct" size for any platform — it creates exactly the pixels you ask for. Still, picking a small set of reusable dimensions early in a project keeps your templates tidy. A reasonable starter kit covers the most common HTML slots:
- 1600 × 900 for a full-bleed hero or feature banner at a 16:9 aspect.
- 1200 × 600 for a 2:1 marketing strip that pairs with a text block beside it.
- 800 × 450 for a card image in a three-column grid where each card is around 320 CSS pixels wide.
- 600 × 600 for product thumbnails in a 3 × 3 grid.
- 96 × 96 for avatars and inline list icons.
The numeric relationships between these widths and heights are not magic — they are aspect ratios (16:9, 2:1, 16:9, 1:1, 1:1) that line up with the way most CSS grid templates are written. Generating placeholders that already match those ratios means swapping in real photography later will not require re-styling the surrounding markup.
Tips for Naming and Organizing Placeholder Files
The default filename, placeholder-WIDTHxHEIGHT.png, encodes the dimensions for free, which is useful when you are hunting for the right size in a file picker. If you want richer naming — say placeholder-hero-1600x900.png or placeholder-avatar-96x96.png — just rename the file after download. Browsers do not care about the file name; they read width and height from either the attributes you set in HTML or from the PNG header.
Two small operational habits pay off. First, keep placeholders in a dedicated folder (/placeholders/ or /public/mock/) so a final search for "placeholder" in your repository catches every leftover stub before launch. Second, when a placeholder is replaced by a real asset, update the alt attribute in the same commit — a meaningful alt is part of the work, not a finishing touch you remember later.
For production photography, branded artwork, or vector files, move to a proper design workflow. The placeholder exists to make the layout honest before the artwork is ready, and the page should still carry meaningful alternative text once the real image ships.