Image Placeholder Generator

When You Need a Placeholder

Your real hero image takes 400ms to load. Without a placeholder, the page text reflows when the image arrives -- that's Cumulative Layout Shift (CLS), and Google measures it as a Core Web Vital. A placeholder reserves exact dimensions so layout stays stable.

What It Generates

• SVG color blocks: Tiny (few hundred bytes), infinitely scalable. Use during dev or when the final image is a flat color or gradient.
• LQIP (Low-Quality Image Placeholder): A small (~1KB) base64 JPEG embedded in the HTML. Shows a blurred preview of the actual image before full load.
• BlurHash: A ~20-character string that unpacks to a smooth gradient preview without any network call. Decoded client-side with a small library.

Workflow Picks

• Dev: SVG placeholder with image dimensions and overlay text. The dev server doesn't need the final image source yet.
• Staging/Prod with BlurHash: generates the string at build time, embeds it as data attribute, decodes client-side.
• Next.js Image: use the placeholder='blur' prop with blurDataURL set to a data URI.

Practical Tips

1. Match placeholder dimensions to the exact final dimensions. Don't use a large placeholder for a small thumbnail.
2. Use viewBox over explicit width/height so the placeholder scales.
3. Add loading="lazy" for below-the-fold images.
4. Prefer empty alt attributes on placeholder images (screen readers shouldn't announce placeholder text).

FAQ

Q: File format? A: SVG for non-photographic content. JPEG LQIP or BlurHash for photographic content (a color block alone conveys insufficient structural information). Q: Matching final colors? A: Use the dominant color of the final image as the placeholder background. Visually bridges the gap between placeholder and loaded image.