Responsive Placeholder Images for Web Design
Generate placeholder images for responsive web design with multiple breakpoints. Learn about srcset, sizes, picture element, and art direction for responsive images.
Detailed Explanation
Responsive Placeholder Images
Responsive web design requires images that adapt to different screen sizes and pixel densities. During development, you need placeholder images at multiple resolutions to test responsive behavior before final assets are ready.
Common Responsive Breakpoints
Most CSS frameworks define breakpoints at standard widths:
| Breakpoint | Width | Common Usage |
|---|---|---|
| sm | 640px | Mobile landscape |
| md | 768px | Tablet portrait |
| lg | 1024px | Tablet landscape / small laptop |
| xl | 1280px | Desktop |
| 2xl | 1536px | Large desktop |
Generating a Responsive Placeholder Set
For a full-width hero image, generate placeholders at each breakpoint:
- 640×360 — Mobile (16:9)
- 768×432 — Tablet (16:9)
- 1024×576 — Small desktop (16:9)
- 1280×720 — Desktop (16:9)
- 1920×1080 — Large desktop (16:9)
Label each with its target breakpoint for easy identification.
Using srcset and sizes
The HTML srcset attribute lets browsers choose the best image source:
<img
src="placeholder-1280x720.png"
srcset="
placeholder-640x360.png 640w,
placeholder-768x432.png 768w,
placeholder-1024x576.png 1024w,
placeholder-1280x720.png 1280w,
placeholder-1920x1080.png 1920w
"
sizes="100vw"
alt="Hero placeholder"
/>
The browser selects the smallest image that fills the viewport width, reducing bandwidth on smaller screens.
Art Direction with Picture Element
When different breakpoints need different aspect ratios (e.g., square on mobile, wide on desktop), use the <picture> element:
<picture>
<source media="(max-width: 639px)" srcset="placeholder-640x640.png" />
<source media="(max-width: 1023px)" srcset="placeholder-768x432.png" />
<img src="placeholder-1280x720.png" alt="Hero placeholder" />
</picture>
Testing Tips
- Open browser DevTools and switch between device viewports to verify the correct image loads at each breakpoint
- Use the Network tab to confirm the browser is selecting the optimal image size
- Test with throttled connections (3G, 4G) to see the real-world impact of image sizes
Use Case
Front-end developers building responsive layouts need placeholder images at multiple sizes to test srcset behavior, picture element art direction, and CSS background-image media queries before final photography is available.