How to Use Placeholder Images in HTML
Using placeholder images in HTML is straightforward — you use the placeholder image URL as the src attribute of an <img> tag. This guide covers every HTML context where placeholder images are useful, with copy-ready code examples.
Basic HTML Placeholder Image
The simplest way to add a placeholder image in HTML:
<!-- Basic placeholder image -->
<img
src="https://placeholderimage.co/600x400"
width="600"
height="400"
alt="placeholder image"
/>Always set width and height attributes. This prevents Cumulative Layout Shift (CLS), which is a Core Web Vitals metric that affects your Google search ranking. Browsers use these attributes to reserve space for the image before it loads.
Placeholder Image with Custom Color and Text
Add a background color, text color, and custom label to your placeholder image:
<!-- Custom colors and text -->
<img
src="https://placeholderimage.co/600x400/1c1c1e/22c55e?text=My+Project"
width="600"
height="400"
alt="project placeholder image"
/>
<!-- CSS named colors -->
<img
src="https://placeholderimage.co/600x400/coral/white?text=Warning"
width="600"
height="400"
alt="warning placeholder image"
/>Responsive Placeholder Image in HTML
To make a placeholder image responsive, use CSS classes or inline styles. Do not rely solely on percentage widths in the HTML attributes — use both attributes for browser space reservation and CSS for visual sizing:
<!-- Responsive using CSS -->
<img
src="https://placeholderimage.co/1200x600"
width="1200"
height="600"
alt="placeholder image"
style="width: 100%; height: auto;"
/>
<!-- Responsive with srcset (retina support) -->
<img
src="https://placeholderimage.co/600x400"
srcset="https://placeholderimage.co/600x400 1x, https://placeholderimage.co/600x400@2x 2x"
width="600"
height="400"
alt="placeholder image"
/>CSS Background Placeholder Image
<!-- HTML -->
<div class="hero-banner"></div>
/* CSS */
.hero-banner {
background-image: url('https://placeholderimage.co/1920x600/1c1c1e/22c55e');
background-size: cover;
background-position: center;
width: 100%;
height: 400px;
}Placeholder Image as Error Fallback
Use a placeholder image when the real image fails to load, using the onerror attribute:
<img
src="/path/to/real-image.jpg"
onerror="this.onerror=null; this.src='https://placeholderimage.co/400x300/EEEEEE/31343C?text=Image+Not+Found'"
width="400"
height="300"
alt="product image"
/>The this.onerror=null prevents infinite loops if the placeholder URL itself fails.
HTML picture Element with Placeholder
<picture>
<source media="(min-width: 1024px)" srcset="https://placeholderimage.co/1200x400" />
<source media="(min-width: 768px)" srcset="https://placeholderimage.co/800x300" />
<img
src="https://placeholderimage.co/400x200"
width="400"
height="200"
alt="responsive placeholder image"
/>
</picture>PNG Format for Maximum Compatibility
SVG is the default format and best for most cases. For email templates or environments that do not support SVG, use PNG:
<!-- Force PNG format -->
<img
src="https://placeholderimage.co/600x400/EEEEEE/31343C/png"
width="600"
height="400"
alt="placeholder image png"
/>User / Person Placeholder Image in HTML
For user profile pictures and avatars in HTML:
<!-- Profile avatar placeholder -->
<img
src="https://placeholderimage.co/200x200/1c1c2e/a3a3a3?text=User"
width="200"
height="200"
alt="user placeholder image"
style="border-radius: 50%;"
/>
<!-- Small avatar -->
<img
src="https://placeholderimage.co/48x48/1c1c2e/a3a3a3"
width="48"
height="48"
alt="avatar placeholder"
style="border-radius: 50%;"
/>