The Ultimate Guide to Web Banner Sizes: Dimensions, Formats, and Best Practices

Whether you are launching a programmatic advertising campaign on the Google Display Network or designing a high-impact website header, getting your web banner sizes right is essential. Choose the wrong dimensions, and your creatives will appear pixelated, get cropped awkwardly, or—worse—be rejected by ad networks entirely.

Because modern digital real estate spans everything from compact smartphone screens to sprawling 4K desktop monitors, mastering banner sizes is a core skill for marketers and web designers alike. This guide breaks down the industry-standard dimensions, top-performing formats, and technical rules you need to know.

1. The “Big Five”: Top-Performing Display Ad Sizes

If you are building an advertising campaign, you do not need to design dozens of random dimensions. In fact, a handful of standard sizes capture roughly 80% of all available display inventory across the web.

• Medium Rectangle (300 × 250 px): The undeniable heavyweight champion of display advertising. It fits seamlessly inside article content, sidebars, and mobile web views, making it the most widely supported size across all major ad networks.
• Leaderboard (728 × 90 px): The classic desktop banner. Usually positioned proudly at the very top (“above the fold”) or bottom of a webpage, it provides high-visibility brand exposure.
• Wide Skyscraper (160 × 600 px): A tall, vertical banner built for desktop sidebars. Many publishers use these as “sticky” elements that scroll along with the user, ensuring prolonged viewability.
• Half-Page / Large Skyscraper (300 × 600 px): A massive high-impact unit that offers double the vertical space of a standard rectangle. It is a favorite for storytelling, vibrant product imagery, and rich brand messaging.
• Mobile Banner (320 × 50 px): The universal mobile web standard. Anchored to the top or bottom of smartphone screens, it delivers near-universal fill rates for mobile traffic.

Quick Reference: Standard Display Ad Dimensions

| Format | Dimensions (px) | Device | Typical Placement | Max File Size |
| :— | :— | :— | :— | :— |
| Medium Rectangle | 300 × 250 | Desktop & Mobile | In-content, sidebar, below article | 150 KB |
| Leaderboard | 728 × 90 | Desktop | Header, footer, above main content | 150 KB |
| Wide Skyscraper | 160 × 600 | Desktop | Right rail / sticky sidebar | 150 KB |
| Half-Page | 300 × 600 | Desktop | Sidebar, embedded between content | 150 KB |
| Mobile Banner | 320 × 50 | Mobile | Top or bottom of mobile screen | 150 KB |
| Billboard | 970 × 250 | Desktop | Premium header takeovers | 150 KB |

2. Website Structural Banners (Heroes and Headers)

If you aren’t running ads, but are instead designing a website’s internal layout, “web banners” refer to hero images and site headers. These elements set the visual tone of your landing page:

• Full-Width Hero Banner: 1920 × 1080 px (16:9 ratio) is the gold standard for desktop viewports. It covers 1080p displays natively and scales cleanly down for smaller devices when paired with responsive coding (srcset).
• Blog Post / Open Graph Headers: 1200 × 630 px. This exact dimension serves a dual purpose: it acts as a crisp header image inside your blog layout and automatically doubles as a social preview card when shared on LinkedIn, Facebook, or X.

3. Technical Rules and Best Practices

Designing a great visual is only half the battle. Ad networks and modern web browsers enforce strict guidelines regarding file weight and asset formatting:

• Strict File Size Caps: For traditional static display ads (JPG, PNG, GIF), major networks like Google enforce a 150 KB hard ceiling. For website hero images, aim for a target range of 150 KB to 300 KB, compressed efficiently using next-gen formats like WebP.
• Embrace Responsive Assets: Instead of forcing yourself to design dozens of static sizes by hand, leverage Responsive Display Ads (RDAs). By uploading landscape images (1200 × 628 px), square images (1200 × 1200 px), and clear brand logos, automated systems dynamically assemble ads that fit any available slot across the web.
• Keep Text Concise: On small banner formats (like 320 × 50 mobile banners), tiny text becomes completely illegible. Stick to a punchy headline, a distinct logo, and a clear call-to-action (CTA) button.

Final Takeaway

If you are just getting started, don’t overwhelm yourself trying to cover every obscure ad dimension out there. Build a reliable starter kit centered around the 300×250 Medium Rectangle, 728×90 Leaderboard, 160×600 Skyscraper, and 320×50 Mobile Banner. This core quartet will unlock the vast majority of digital ad space while keeping your design workflow streamlined and efficient.