Placeholder Images for Developers — Why and How to Use Them
If you've ever built a website or app, you've faced this situation: the design is ready, the layout needs images, but the actual content images don't exist yet. That's where placeholder images save the day.
What Are Placeholder Images?
Placeholder images are temporary dummy graphics used during development. They typically show the dimensions (like "600×400") and have a neutral background. They serve as stand-ins until real images are ready.
Why Not Just Use Random Images?
Using random photos from the internet during development causes problems:
- Copyright issues — you might accidentally ship a copyrighted image
- Wrong dimensions — random images won't match your layout's aspect ratios
- Distracting — real photos distract stakeholders during UI reviews
- Inconsistent — different random images make the layout look messy
Placeholder images solve all of these: they're neutral, properly sized, clearly temporary, and free to use.
Common Use Cases
🖥️ Frontend development
Building responsive layouts? Placeholder images at exact dimensions (1200×630 for Open Graph, 1080×1080 for Instagram, 1280×720 for YouTube thumbnails) let you test layouts before real assets arrive.
🎨 Wireframing and prototyping
Figma, Sketch and Adobe XD designs often use grey boxes for images. Proper placeholders with dimension labels are cleaner and more communicative.
📊 Client presentations
When presenting a website mockup to clients before photography is done, branded placeholder images look more professional than empty boxes or random stock photos.
📝 Documentation and tutorials
Writing technical docs? Placeholder images clearly show where images should go without distracting from the content.
Generate Custom Placeholders Instantly
- Go to Placeholder Image Generator
- Pick a preset size or enter custom width and height
- Choose background and text colors to match your project's style
- Add custom text (or leave it to show dimensions automatically)
- Download as PNG, JPG or WebP — or copy the data URI for inline use
📐 Generate Placeholder Images Instantly
Any size, any color, custom text. Download or copy data URI. Free, no login needed.
Create Placeholder Free →Framework-specific patterns for placeholder images
How you use placeholders depends a lot on your stack. The patterns that work in vanilla HTML don't translate cleanly to React or Vue, and the patterns that work in static sites are different from those for image-heavy SPAs.
React with lazy loading. The modern React pattern is to show a low-quality placeholder while the real image loads, then swap in the real image. Libraries like react-lazy-load-image-component or Next.js's built-in <Image> component handle this automatically — you provide a placeholder URL and the real image URL, and the library handles the rest.
Vue and Nuxt. Vue's <img> binding works with any reactive source, so you typically reactive-swap the src as the real image becomes available. Nuxt's <NuxtImage> component handles placeholder generation automatically, including low-quality image placeholders (LQIP) generated at build time.
Static site generators (Astro, Eleventy, Jekyll). These often generate optimized placeholders at build time. Astro's <Image> component, for example, can generate tiny base64-encoded LQIP versions of your images automatically. Use these features — they're better than hand-managing placeholder files.
Plain HTML. Use the <img> tag with a placeholder src, then JavaScript-swap the src when the real image is ready. The native HTML loading="lazy" attribute helps too.
The LQIP technique — placeholders that look almost like the final image
Low-Quality Image Placeholders (LQIP) are tiny, blurry versions of the real image that load instantly and get replaced by the full version when it's ready. The user sees a blurry but recognizable preview immediately, then the sharp version appears. The transition feels much smoother than a blank box suddenly becoming a photo.
Generating LQIPs: typically you produce a version of each real image at 20–40 pixels wide, save as JPG at low quality (~30%), and base64-encode it. The result is a tiny inline placeholder (often under 1KB) that you can include directly in your HTML or CSS.
Major image services like Cloudinary, ImageKit, and Imgix handle this automatically. For self-hosted setups, build-time tools like sharp (Node.js) can generate LQIPs as part of your image pipeline. The visual improvement is dramatic — pages feel much faster even though the actual load time is similar.
When placeholder images become a performance problem
Placeholders are supposed to make pages feel faster, but a few common mistakes make them slower instead.
Loading placeholder images from external services. Using placeholder.com or similar services makes every page load wait for an external server. The point of a placeholder is instant display; if you're waiting for placeholder.com, you've lost the benefit. Always use generated PNG files or LQIP data URIs that don't require external requests.
Forgetting to set image dimensions. Without explicit width and height (or aspect ratio) on your image element, the browser doesn't know what space to reserve. When the real image loads, the layout shifts — bad for user experience and Core Web Vitals (CLS metric). Always set dimensions, even on placeholders.
Overdoing LQIP for above-the-fold images. The placeholder + real image swap pattern is a small extra cost. For the hero image that needs to be visible immediately, just load the real image with high priority instead of staging it.
Animating the swap with heavy transitions. Transitioning from placeholder to real image with elaborate CSS animations can cost more performance than skipping the placeholder altogether.
Designing placeholders for your design system
If you maintain a design system used across many product surfaces, placeholders deserve a place in the system. Define a small set of standard placeholder styles — colored solid blocks, branded gradients, icon-stamped boxes, dimension-labeled rectangles — and use them consistently across mockups and product surfaces.
The Figma/Sketch design files of mature products typically include placeholder component libraries: square avatars in standard colors, card-image placeholders that match real image dimensions, hero placeholders with brand identity baked in. When everyone on the design and engineering team uses the same placeholders, the in-progress product never looks unfinished — it looks intentionally pre-content.