The Ultimate Web Banner Dimension Guide: Standard Sizes, Layouts, and Best Practices

Whether you are launching a programmatic advertising campaign or designing a high-impact homepage header, getting your web banner dimensions right is the difference between a polished professional brand and a broken user experience. When dimensions are off, your message gets awkwardly cropped, text becomes unreadable, and bounce rates climb.

This guide breaks down the essential standard dimensions for display advertising and website UI banners, alongside practical rules to ensure your visuals pop across every device.

1. Standard Display Ad Banners (IAB Formats)

If you are running paid digital advertising across the Google Display Network, Microsoft Advertising, or programmatic exchanges, adhering to Interactive Advertising Bureau (IAB) standards is non-negotiable. These fixed dimensions ensure your creative fits seamlessly into publisher inventories worldwide.

| Size (px) | Common Name | Best Device | Typical Placement |
| :— | :— | :— | :— |
| 300 × 250 | Medium Rectangle | Desktop & Mobile | In-content, sidebars, below articles |
| 728 × 90 | Leaderboard | Desktop | Header, footer, above main content |
| 160 × 600 | Wide Skyscraper | Desktop | Right or left rail (sticky sidebars) |
| 300 × 600 | Half-Page / Large Format | Desktop | Premium sidebars, high-impact content |
| 320 × 50 | Mobile Banner | Mobile | Top or bottom of mobile web pages |

The Core Three You Need to Start

If your budget or design bandwidth is tight, you do not need to build ten different sizes right away. Focusing on just three high-yield formats—the 300×250 medium rectangle, 728×90 leaderboard, and 320×50 mobile banner—will cover the vast majority of web traffic and ad inventory.

2. Website UI and Hero Banners

Beyond ad placements, your own website relies heavily on structural banners to set the tone, guide user navigation, and spotlight key products or content.

• Full-Width Hero Banners (1920 × 1080 px): Designed for a 16:9 aspect ratio, this is the gold standard for full-width homepage backgrounds and desktop hero sections. It provides enough crisp resolution for high-definition screens without inflating file sizes unnecessarily.
• Blog and Article Headers (1200 × 630 px): This ~1.9:1 aspect ratio matches standard Open Graph dimensions. Building your blog banners to this specification ensures they look stellar at the top of your post and double seamlessly as social media preview cards when shared on LinkedIn, Facebook, or Twitter/X.
• Mobile Viewport Adjustments: Always design with responsive scaling in mind. A desktop hero banner scaled down to a smartphone screen will render text illegible unless you use media queries or a vertically oriented mobile alternative (such as a 750×1000 portrait aspect ratio).

Pro Tip: For retina and high-DPI displays, design your master assets at twice the rendered size (