Last updated
What Are Image Placeholders?
Image placeholders are temporary images used during development and design mockups to represent images that haven't been created yet. They show the intended dimensions and optionally display text labels. Placeholder services generate these images on-the-fly based on URL parameters.
Popular Placeholder Services
| Service | URL Format | Features |
|---|---|---|
| placeholder.com | https://via.placeholder.com/300x200 | Custom text, colors |
| picsum.photos | https://picsum.photos/300/200 | Real photos, blur, grayscale |
| placehold.co | https://placehold.co/300x200 | Custom colors, fonts |
| dummyimage.com | https://dummyimage.com/300x200 | Custom text, formats |
Generating Placeholders with SVG
JavaScript
function createPlaceholder(width, height, text, bgColor = '#cccccc', textColor = '#666666') {
const label = text || `${width}×${height}`;
const svg = `<svg xmlns="http://www.w3.org/2000/svg"
width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
<rect width="${width}" height="${height}" fill="${bgColor}"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
font-family="Arial,sans-serif" font-size="${Math.min(width, height) * 0.15}"
fill="${textColor}">${label}</text>
</svg>`;
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}
// Usage
const img = document.createElement('img');
img.src = createPlaceholder(400, 300, 'Product Image');
img.alt = 'Product placeholder';