HTML Placeholder Image
Updated: May 2026
There are three main ways to use a placeholder image in HTML: as an img tag with a src, as a CSS background-image, or as inline SVG. Each technique suits different contexts. This page shows the code for each approach.
Copy HTML · Copy CSS · Copy Data URL · Free
Method 1 — img tag with a data URL
The most direct approach is to generate a placeholder, copy its Data URL, and paste it as the src attribute. The data URL is a base64-encoded image embedded directly in the HTML — no external file needed.
The Flowfiles generator provides a Copy HTML button that builds this snippet automatically from your current settings. The data URL is complete — just paste and go.
When to use: Quick prototypes, email templates, or any context where hosting a separate image file is not practical. Data URLs increase HTML file size, so prefer a hosted file for production.
img with a hosted file
Download the PNG, JPEG, or SVG from the generator, add it to your project, then reference it normally:
Always include explicit width and height attributes to prevent layout shift (CLS) as the page loads.
Method 2 — CSS background-image
For decorative placeholder slots controlled by CSS, use background-image with a data URL or a hosted file path:
The Copy CSS button in the generator produces a ready-to-paste snippet with your exact dimensions and background color.
Tip: If you only need a solid color placeholder (no label text), skip the image entirely and use background-color: #cccccc; with a fixed width and height.
Method 3 — Inline SVG
SVG placeholders can be embedded directly in HTML without any external file or base64 encoding. The SVG is human-readable and can be styled with CSS:
This is the structure the Flowfiles generator builds internally for SVG export. You can paste it directly into HTML, modify it with a text editor, or use it as a src via a data URL.
Frequently asked questions
Which HTML method is best for production?
Use a hosted file (img src="/path/to/placeholder.svg") in production. Data URLs bloat the HTML and cannot be cached by the browser independently. For development, data URLs are fine.
Should I use img or CSS background for placeholders?
Use <img> when the image is content (a product photo slot, an avatar). Use CSS background-image when the image is decorative (a section background, a card overlay). Screen readers skip CSS backgrounds but announce img alt text.
How do I make a placeholder image responsive in HTML?
Set max-width: 100%; height: auto; on the img element and include explicit width and height attributes for proper aspect ratio reservation. For background images, use background-size: cover; with a percentage-based container.