Blog API Guides 8 min read

Banner Placeholder Presets for Heroes and Ads (IAB Sizes)

Use banner placeholder URLs sized to IAB standard ad dimensions for prototyping layouts, testing responsive ads, and filling empty slots in production.

banner placeholder 728x90IAB ad sizesplaceholder imagesbanner imagesad placeholders
Banner Placeholder Presets for Heroes and Ads (IAB Sizes)

The IAB (Interactive Advertising Bureau) defines standard ad unit dimensions used by virtually every display ad network and publisher. Designers and developers working on ad-supported layouts need placeholder images at these exact sizes to prototype grids, test responsive behavior, and fill empty ad slots when inventory is unavailable.

fallback.pics provides a banner route for common rectangular banner dimensions, and any arbitrary IAB size is accessible via the standard dimension URL pattern. The output includes the dimensions as a text label by default, making it easy to identify which ad unit is which in a multi-unit layout.

IAB standard sizes

The most common IAB ad unit dimensions and their use cases

The IAB defines over a dozen standard ad units, but a handful account for the majority of display ad inventory. The 728×90 leaderboard sits at the top or bottom of a page. The 300×250 medium rectangle is the most common unit — it fits sidebars, in-content slots, and mobile feeds. The 160×600 wide skyscraper runs in right-hand sidebars.

Newer IAB Rising Stars units include the 970×250 billboard (a double-height leaderboard), the 300×600 half-page unit, and the 320×50 mobile banner. Each has a specific expected position in a page layout. When designing around these units, placeholder images at the exact dimensions prevent layout miscalculation during development.

Getting dimensions wrong during development is common. A 728×91 placeholder in a leaderboard slot causes a 1px layout shift when the real 728×90 ad unit loads. Using correct IAB dimensions from the start — even for placeholder content — prevents this class of bug.

Banner URL syntax

Generating IAB banner placeholders from fallback.pics

Use the standard dimension URL pattern with the exact IAB pixel dimensions. The default SVG output includes a centered text label showing the dimensions, which helps identify units in multi-placement layouts. Customize the background color to match your site's empty state or ad container style.

For ad containers that use a gray background to indicate an unfilled slot, use E4E4E7 as the background color with a 71717A text color. For branded placeholders that match the site's primary palette, use the brand color as the background.

Implementation text
<!-- IAB Leaderboard: 728×90 -->
<img
  src="https://fallback.pics/api/v1/728x90/E4E4E7/71717A?text=728x90+Leaderboard"
  width="728"
  height="90"
  alt="Ad leaderboard placeholder"
/>

<!-- IAB Medium Rectangle: 300×250 -->
<img
  src="https://fallback.pics/api/v1/300x250/E4E4E7/71717A?text=300x250+Rectangle"
  width="300"
  height="250"
  alt="Ad rectangle placeholder"
/>

<!-- IAB Half Page: 300×600 -->
<img
  src="https://fallback.pics/api/v1/300x600/E4E4E7/71717A?text=300x600+Half+Page"
  width="300"
  height="600"
  alt="Ad half-page placeholder"
/>

<!-- IAB Billboard: 970×250 -->
<img
  src="https://fallback.pics/api/v1/970x250/E4E4E7/71717A?text=970x250+Billboard"
  width="970"
  height="250"
  alt="Ad billboard placeholder"
/>

Mobile sizes

Mobile banner placeholders for responsive ad layouts

The 320×50 mobile banner and the 320×100 large mobile banner are the dominant mobile ad unit sizes. When building responsive ad layouts that swap between a 728×90 leaderboard on desktop and a 320×50 mobile banner on phones, use correctly sized placeholder images for each breakpoint.

Use the picture element or CSS container queries to swap between desktop and mobile ad placeholder URLs. This prevents the layout from reflowing when breakpoints change, and it ensures the ad container reports the correct expected size to the ad server when header bidding is active.

Implementation text
<!-- Responsive banner: 728x90 desktop, 320x50 mobile -->
<picture>
  <source
    media="(min-width: 768px)"
    srcset="https://fallback.pics/api/v1/728x90/E4E4E7/71717A?text=Leaderboard"
  />
  <img
    src="https://fallback.pics/api/v1/320x50/E4E4E7/71717A?text=Mobile+Banner"
    width="320"
    height="50"
    alt="Ad banner placeholder"
  />
</picture>

Hero banners

Using banner placeholders for website hero sections

Website hero sections follow different conventions than ad banners. Common hero dimensions include 1920×1080 (full-width desktop), 1440×600 (standard hero with safe zone), 1200×400 (compact hero or article header), and 2560×1440 (high-DPI hero). None of these are IAB ad units.

Use the standard dimension URL for hero section placeholders. Add a descriptive text label to identify the hero slot in multi-section layouts. For hero images where the final content will be a photo, request a JPEG or WebP format from the placeholder API to match the expected final format.

Hero placeholder images used in development should match the exact aspect ratio of the production hero. If the production hero is 1440×600 with the subject centered, a 1920×1080 placeholder will change the page geometry when the final hero loads — producing a CLS event on the first real-user impression.

Implementation text
<!-- Hero section placeholder: standard 1440×600 -->
<img
  src="https://fallback.pics/api/v1/1440x600/18181B/FFFFFF?text=Hero+Image"
  width="1440"
  height="600"
  fetchpriority="high"
  loading="eager"
  alt="Hero banner placeholder"
/>

<!-- Blog post header: 1200×400 -->
<img
  src="https://fallback.pics/api/v1/1200x400/7C3AED/FFFFFF?text=Article+Header"
  width="1200"
  height="400"
  loading="eager"
  alt="Article header placeholder"
/>

Programmatic ads

Placeholder behavior when ad inventory is unavailable

When an ad server has no fill for a slot — passback, floor price not met, or direct deal not ready — the slot shows either blank space or a house ad. If you use placeholder images instead of blank space, the layout remains stable and users see a neutral container rather than a jarring empty area.

The placeholder should match the ad unit's dimensions exactly. Set the container min-height to the ad unit height as well, so the space is reserved even if the img element itself is hidden or fails to load. This prevents the layout from collapsing when the ad loads asynchronously.

IAB size reference

Complete reference for common banner dimensions

For a quick reference, the most widely used IAB ad unit dimensions are: 728×90 leaderboard, 300×250 medium rectangle, 300×600 half page, 160×600 wide skyscraper, 970×250 billboard, 320×50 mobile banner, 320×100 large mobile banner, and 250×250 square. Each of these can be requested directly from fallback.pics by using the dimension in the URL.

Less common but still supported units include: 468×60 full banner, 234×60 half banner, 120×600 skyscraper, and 120×240 vertical rectangle. IAB also defines video and rich media units, but for standard display ad prototyping these rectangular units cover the vast majority of placements.

Implementation text
# API docs
https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/

# Related posts
https://fallback.pics/blog/square-placeholder-images-presets/
https://fallback.pics/blog/responsive-placeholder-images-cards-banners-grids/

Key takeaways

What to standardize before shipping

  • Use exact IAB dimensions (728×90, 300×250, 300×600) for ad unit placeholders to prevent layout miscalculation during development.
  • The fallback.pics standard dimension URL works for any IAB size — no special preset required, just use the pixel dimensions directly.
  • For responsive ad layouts, use picture element breakpoints with correct placeholder dimensions for desktop and mobile units.
  • Hero section placeholders should match the production hero aspect ratio exactly to avoid CLS on first impression.
  • Reserve ad slot height with both an img and a min-height CSS rule on the container, so layout remains stable when ads load asynchronously.

Production fallback layer

Use fallback.pics anywhere an image URL is accepted.

Start with one deterministic URL and standardize fallback behavior across your design system.

Read the docs