How many breakpoint variants should I generate?

Generate one image per unique size in your srcset or picture element. Typically 3-4 variants per image slot: mobile, tablet, desktop, and optionally ultrawide.

Should I use PNG, SVG, or WebP for responsive placeholders?

Use PNG for testing srcset and picture element behavior — browsers need raster files with specific pixel dimensions. SVG is useful for icons and logos that scale without breakpoints.

Can PlacePack generate images at custom aspect ratios?

Yes. Enter any width×height combination. PlacePack also supports aspect ratio syntax like 16:9@720w to generate at a specific width while maintaining the ratio.

Placeholder Images for Responsive Web Design Testing

Published March 11, 2026

Responsive web design requires images that adapt to different screen widths. During development, testing these layouts without real images reveals only half the picture — image loading, aspect ratio behavior, and art direction decisions all depend on having actual image data in the page. Placeholder images generated at every breakpoint fill this gap, letting you test responsive behavior with realistic image dimensions from day one.

Why responsive testing needs real image dimensions

CSS handles image responsiveness through `max-width: 100%`, `object-fit`, and the `<picture>` element's `srcset` attribute. Each of these mechanisms behaves differently depending on the image's intrinsic dimensions. A 1440px-wide image scales down gracefully; a 200px image scales up and gets blurry.

Using correctly sized placeholder images at each breakpoint lets you verify that your responsive CSS works as intended. You can see exactly how images behave at 375px (mobile), 768px (tablet), and 1440px (desktop) without waiting for final photography.

Common breakpoint sizes to generate

Generate placeholder images for the breakpoints your design system defines. A typical set:

- **Mobile**: 375×667 (iPhone SE), 390×844 (iPhone 14) - **Tablet**: 768×1024 (iPad), 810×1080 (iPad Air) - **Desktop**: 1280×800, 1440×900, 1920×1080 - **Ultrawide**: 2560×1080

For hero images and banners, generate at the full viewport width. For content images within a grid, calculate the image width based on your grid column count and gutter size.

Testing srcset and picture element behavior

The HTML `<picture>` element and `srcset` attribute allow browsers to select the best image source for the current viewport. To test this during development, you need actual image files at each specified size.

Generate one placeholder per `srcset` source in PlacePack. The label on each image includes the dimensions, making it easy to verify that the browser selected the correct source — if you see `hero / 768×400` on a tablet viewport, you know the right source was loaded.

Responsive image with srcset

<picture>
  <source media="(min-width: 1280px)" srcset="images/hero_1440x600.png" />
  <source media="(min-width: 768px)" srcset="images/hero_768x400.png" />
  <img src="images/hero_375x280.png" alt="Hero" width="375" height="280" />
</picture>

Preventing cumulative layout shift (CLS)

Layout shift happens when images load after the page renders and push content around. Setting explicit `width` and `height` attributes on `<img>` tags prevents this by reserving space before the image loads.

Placeholder images make CLS testing visible: if the page layout shifts when placeholders appear, it will shift the same way with real images. Fix the CSS now — add `aspect-ratio`, explicit dimensions, or `min-height` — and the fix carries over to production.

Generating retina variants

High-DPI displays (MacBook Retina, iPhone, modern Android) render images at 2x or 3x density. Without retina-aware images, content looks blurry on these devices.

PlacePack's retina multiplier generates @2x and @3x variants automatically. Add `@2x` to any size entry to get a double-resolution file. Use these in your `srcset` with the corresponding `2x` descriptor to test retina behavior during development.

Retina srcset

<img
  src="images/card_400x300.png"
  srcset="images/card_400x300.png 1x, images/card_400x300@2x.png 2x"
  width="400" height="300"
  alt="Product card"
/>

FAQ — Frequently asked questions

How many breakpoint variants should I generate?: Generate one image per unique size in your srcset or picture element. Typically 3-4 variants per image slot: mobile, tablet, desktop, and optionally ultrawide.
Should I use PNG, SVG, or WebP for responsive placeholders?: Use PNG for testing srcset and picture element behavior — browsers need raster files with specific pixel dimensions. SVG is useful for icons and logos that scale without breakpoints.
Can PlacePack generate images at custom aspect ratios?: Yes. Enter any width×height combination. PlacePack also supports aspect ratio syntax like 16:9@720w to generate at a specific width while maintaining the ratio.

Related guides

Ready to generate placeholder images?

Open the generator with the right preset pre-loaded and download your pack in seconds.

Try it in PlacePack →Learn more: PlacePack for Developers