Why the Guidelines Matter
The Interactive Advertising Bureau (IAB) creates a set of standards that help advertisers, agencies, publishers, and technology providers speak the same language. The Display & Mobile Advertising Creative Format Guidelines are the most widelyreferenced rules for building banner, video, rich media and native ad units that run on desktop, tablet and smartphone screens.
Following the guidelines yields three core benefits:
- Consistency: Creatives render similarly across dozens of inventory sources, reducing technical surprises.
- Performance: Proper file sizes, dimensions and markup improve load times, clickthrough rates and overall ROI.
- Compliance: Advertisers avoid policy violations that could cause ads to be blocked or cause penalties.
Key Components of the Guidelines
1. Standardized Sizes
The IAB defines a catalog of core and expanded dimensions that reflect the most common placements on the web. Some of the most frequently used sizes include:
- 300250 Medium Rectangle
- 72890 Leaderboard
- 160600 Wide Skyscraper
- 32050 Mobile Leaderboard
- 30050 Mobile Banner
- 970250 Billboard
Using these standard sizes makes it easier for ad servers to match inventory and for creatives to be repurposed across multiple sites.
2. File Size and Weight Limits
Heavy files hurt page performance. The current IAB recommendation is:
- Static image ads 150KB (PNG, JPEG, GIF)
- Animated GIFs 200KB
- Rich media (HTML5) 200KB compressed (excluding any hosted assets such as videos)
- Video ads 100KB or less for the VAST tag; the video file itself follows the platforms specific thresholds (often 5MB for short prerolls).
Compress assets, use sprite sheets, and minify HTML/CSS/JS to stay within limits.
3. Technical Specifications
All HTML5 creatives must meet these baseline technical rules:
- Document type: HTML5 with a
<!DOCTYPE html>declaration. - All external resources (images, fonts, scripts) must be referenced via absolute or protocolrelative URLs.
- Use CSS3 for animations; avoid deprecated HTML
<blink>or<marquee>tags. - Sandboxed iframes are preferred for security and to avoid collisions with host page CSS.
- Fallbacks: Provide a static image backup in case the browser cannot render HTML5.
4. Video Creative Guidelines
Video ads are governed primarily by the VAST (Video Ad Serving Template) standard, but the IAB adds layout and userexperience rules:
- Duration: 15seconds for preroll, 30seconds for midroll, 60seconds for outstream.
- Muted autoplay is allowed only if the user initiates playback or if the video is placed in a nonintrusive environment.
- Clear, visible close button after 5 seconds of playback.
- Audio must not start louder than the surrounding content; volume should be 50% of system default.
5. MobileFirst Considerations
Mobile screens introduce unique constraints:
- Touchfriendly: Interactive elements must be at least 4444px.
- Viewport: Use
meta viewporttags to ensure proper scaling. - Data usage: Keep total download weight under 150KB whenever possible.
- Orientation: Provide separate assets for portrait and landscape when the creatives layout changes significantly.
6. Accessibility & Brand Safety
Ads should be readable by screen readers and respect user preferences:
- Provide
altattributes for all images. - Avoid flashing content that could trigger seizures (no more than 3 flashes per second).
- Use content rating tags (e.g.,
ad:rating=G) to enable brandsafe placements.
Typical Workflow Using the Guidelines
- Brief & Planning Identify the required dimensions, format (static, animated, rich media, video) and target devices.
- Design & Prototyping Sketch using the exact pixel dimensions. Export assets at the recommended resolution (1 for standard, 2 for highDPI when supported).
- Development Build the HTML5 package, embed VAST tags for video, and ensure all scripts are asynchronous.
- Testing Run the ad through tools such as IAB Labs Creative Validation Suite or opensource validators (e.g.,
gulphtmlvalidator). - Optimization Compress files, remove unused CSS, and verify that the total weight meets the limits.
- Submission & Approval Upload to the ad server or DSP; monitor for any policy rejections.
- Postlaunch Reporting Track load times, viewability, and clickthrough rates to confirm the guidelines impact.
Common Pitfalls and How to Avoid Them
- Oversized Files Use image optimisation tools (TinyPNG, ImageOptim) and CSS/JS minifiers.
- Incorrect Aspect Ratio Stick to the exact pixel width/height; stretching leads to blurred or cropped images on publisher sites.
- Missing Fallbacks Always include a static PNG/JPEG fallback for HTML5 creatives.
- Blocked Resources Host assets on CDN domains that are whitelisted by major ad exchanges.
- Noncompliant Video Autoplay Follow the userinitiated rule; otherwise the video will be muted or blocked.
Resources & Tools
Below are useful links that help you stay up to date with the latest IAB specifications:
Example: A 300250 HTML5 Rich Media Unit
This simple example follows the IAB rules: 200KB total weight, sandboxed iframe, and a fallback PNG.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body,html{margin:0;padding:0;overflow:hidden;height:100%;} #cta{position:absolute;bottom:10px;right:10px; background:#00458b;color:#fff;padding:8px 12px; font-size:14px;border-radius:4px;cursor:pointer;} </style></head><body> <img src="https://example.com/fallback.png" alt="Summer Sale 30% Off" width="300" height="250"> <script> // Simple animation moves a logo across the canvas const img = new Image(); img.src = "https://example.com/logo.svg"; img.onload = () => { const ctx = document.createElement('canvas').getContext('2d'); // ...animation logic (kept small for brevity) ... }; </script> <div id="cta">Shop Now</div></body></html> The code is illustrative; a production version would be minified and bundled to stay under the 200KB ceiling.
