Placeholder Images for Responsive Design

Responsive design depends on images that adapt gracefully across screen sizes. During development, you need placeholder images that match the expected dimensions at each breakpoint — not generic squares that make your layout calculations meaningless. Choosing the right placeholder sizes and formats ensures your responsive grid, flexbox layouts, and CSS sizing rules work correctly before real images arrive.

Matching Placeholders to Breakpoints

A responsive layout typically defines three to five breakpoints. Each breakpoint has different image constraints based on the viewport width and the column structure at that size.

Common breakpoint values and their typical image widths:

The key principle: placeholder images should match the rendered size, not the natural size. A hero image displayed at 800×400 CSS pixels on desktop might need a 1600×800 natural resolution for crisp rendering on 2x displays.

Using srcset and sizes Correctly

The srcset attribute lets browsers choose the most appropriate image source based on the viewport. Your placeholder images should cover each candidate width:

<img
  src="https://placehold.co/400x225"
  srcset="
    https://placehold.co/400x225 400w,
    https://placehold.co/800x450 800w,
    https://placehold.co/1200x675 1200w,
    https://placehold.co/1600x900 1600w
  "
  sizes="(max-width: 480px) 100vw,
         (max-width: 768px) 50vw,
         33vw"
  alt="Placeholder: product card image"
  width="1600"
  height="900"
>

Setting explicit width and height attributes is critical. Browsers use these to calculate the aspect ratio before the image loads, preventing layout shift (CLS). Even with placeholders, omitting these attributes causes visible jitter as the browser reflows content after each image download.

The <picture> Element for Art Direction

When different breakpoints need different aspect ratios — not just different sizes — the <picture> element provides art-directed responsive images:

<picture>
  <source
    media="(min-width: 769px)"
    srcset="https://placehold.co/1200x400"
  >
  <source
    media="(min-width: 481px)"
    srcset="https://placehold.co/720x405"
  >
  <img
    src="https://placehold.co/400x400"
    alt="Placeholder: responsive hero image"
    width="400"
    height="400"
  >
</picture>

This pattern is common for hero banners: a wide cinematic crop on desktop, a standard 16:9 on tablet, and a square crop on mobile. Using matching placeholders ensures your CSS object-fit and object-position rules display correctly before production assets are available.

Aspect Ratio Strategies

Maintaining consistent aspect ratios across placeholders prevents layout instability when swapping in real images. CSS provides two approaches:

Using aspect-ratio (modern browsers):

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Using the padding hack (legacy support):

.card-image-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 56.25% for 16:9 */
  height: 0;
  overflow: hidden;
}

.card-image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The aspect-ratio property is supported in all modern browsers since 2021 and is the preferred approach. The padding hack is only necessary if you need to support Internet Explorer or older Safari versions.

Testing Layout Behavior

Placeholder images serve three distinct testing purposes:

1. Grid alignment: Verify that images with uniform aspect ratios maintain consistent row heights in CSS Grid and Flexbox layouts.
2. Overflow handling: Test what happens when a CMS user uploads an image with a different aspect ratio than expected. Use both matching and mismatched placeholders to confirm your CSS handles both cases.
3. Loading states: Measure Cumulative Layout Shift (CLS) using Chrome DevTools or Lighthouse. If CLS is above 0.1, you are likely missing explicit width/height attributes or aspect-ratio declarations.

Generate placeholder images in any dimension for responsive testing using /tools/placeholder-image, which supports custom widths, heights, background colors, and text overlays to match your design system tokens.