Okay, let's be real for a second. Trying to figure out the right web banner sizes feels like someone handed you a map written in a language you don't speak. It's a nightmare. You've got this amazing campaign idea, the creative is ready to roll, and then… bam. You're drowning in a sea of jargon. Leaderboards, skyscrapers, MRECs. What on earth is an MREC?
It’s enough to make you want to just give up and go make a coffee. I get it. I’ve been there. Staring at a spec sheet at 2 in the morning, wondering if I'm about to blow the entire marketing budget on banners that are going to get cut off or just look… wrong.
But it doesn't have to be this complicated. I promise.
Think of this as less of a technical manual and more of a chat with a friend who’s done this a thousand times. Your little cheat sheet. We're going to walk through the most common web banner sizes together, nice and easy. We’ll look at what they are, where they pop up, and why you should even care.
Of course, getting the size right is only one piece of the puzzle. It’s like having the perfect-sized canvas but no paint. What you actually say in that banner is what makes it work. Getting some inspiration from high-converting ad copy is a great next step once you've got your dimensions sorted.
By the end of this, you'll be able to chat about pixels and aspect ratios without breaking a sweat. We'll make sense of it all. So you can get back to the fun stuff… creating brilliant campaigns that connect with people.
1. Leaderboard Banner (728 x 90 pixels)
Ah, the Leaderboard. If web banner sizes were a family, this would be the dependable older sibling. It’s been around forever, everyone knows it, and it just… works. The 728 x 90 pixel Leaderboard is one of the originals, and its wide, horizontal shape makes it a perfect fit for the top of a webpage. Right in the header. Or sometimes tucked away at the bottom.
It's often the first or last thing a visitor sees. That’s prime real estate. For the Brisbane businesses we work with, it’s a go-to for announcements or big promotions on their websites. It sits nicely above the main content without being too shouty.
Why It’s a Classic
Its strength is all about placement. Being "above the fold"—that’s a fancy way of saying you can see it without scrolling—gives it maximum eyeballs. Huge news sites and countless online stores use this banner because it grabs attention straight away. It’s a simple, effective way to get your message out there without tripping up your user's journey. Your eyes just naturally go to the top of a page, so it’s pretty much guaranteed to be seen.
How to Make Your Leaderboard Shine
Just because it’s a standard size doesn’t mean your design has to be boring. Here are a few things to keep in mind:
- Create Contrast: Your banner needs to stand out from the website, not melt into it. Use colours that catch the eye but still feel like they belong to your brand.
- Keep it Simple: You don't have a lot of height to play with. Focus on one, single message and a clear button. Think "Shop Now" or "Learn More." That's it.
- Optimise for Speed: A slow-loading banner can slow down the whole page. Keep your file size tiny to make sure everything loads in a snap.
Getting these banners right is a big part of creating a good experience for your visitors. In fact, thinking about how banners fit in is something we focus on a lot in our customised web design approach. A good Leaderboard can be a powerful tool for guiding people where you want them to go.
2. Medium Rectangle Banner (300 x 250 pixels)
Say hello to the workhorse of digital ads: the Medium Rectangle. If the Leaderboard is the dependable older sibling, this one is the super-versatile cousin who shows up everywhere and fits right in. You’ve seen it a million times, probably without even thinking about it. Why? Because it just fits… pretty much anywhere.
Its almost-square shape makes it incredibly easy to work with. You'll find it tucked into sidebars, nestled inside articles, and sitting at the end of blog posts. For our clients with online stores, it’s a brilliant way to show off related products or special deals without messing up the page's flow. It's small but has enough room for a decent picture and a clear message.
Why It’s a Go-To
The Medium Rectangle's secret power is its flexibility. It looks good on both big desktop screens and small mobile ones. And it often appears "above the fold" when it’s in a sidebar or near the top of an article. Big online shops use it in their recommendation sidebars, and news sites use it for sponsorships. It works because it can slide into the content so smoothly, catching your eye as you read or browse.
How to Make Your Medium Rectangle Rock
Because this size is so common, your design really needs to stand out from all the noise. It’s not just about being seen; it's about making an impact.
- Design for Scanning: People often scan down a page, especially a sidebar. Use a strong headline, an interesting image, and a can't-miss button to grab their attention as they scroll past.
- Keep it Lightweight: Try to keep the file size under 40KB. A fast-loading banner is so important. A slow one can make the whole page feel sluggish.
- Test and Tweak: Don't just set it up and forget about it. Try out different button colours or headlines to see what your audience actually responds to.
A well-designed 300 x 250 banner doesn't just fill space; it gets things done. It can drive traffic, shout about a sale, or grab a lead. It plays a similar role to the key bits and pieces we think about in our expert landing page design services, where every little detail is designed to guide the user.
3. Large Rectangle Banner (336 x 280 pixels)
Think of the Large Rectangle as the Medium Rectangle's slightly bigger, more confident cousin. It takes everything that's great about the 300×250 and gives it just a little more breathing room. This 336 x 280 banner is a real powerhouse because that extra space allows for more creative punch without getting in the way. It's a great choice when your message needs just a bit more oomph.
This format works especially well when it's embedded within content, like next to a blog post or on an e-commerce category page. For the Shopify and WooCommerce stores we build here at Wise Web, this size is a real favourite. It's big enough for a beautiful product shot and a clear call-to-action, but it doesn't feel like it’s screaming at you. It just fits.
Why It’s a Classic
The Large Rectangle is so effective because it’s versatile and it performs really well. It's one of the top-performing ad sizes out there, often getting more clicks and attention because it's big enough to tell a small story. You’ll see it used on content-heavy sites and even on professional networks like LinkedIn, where advertisers want to make a solid impression without being annoying. It’s a great, balanced choice.
How to Make Your Large Rectangle Shine
That extra space is a gift, so use it well. Here are a few ideas to make your 336 x 280 banner work harder for you:
- Guide Their Eyes: With more room, you can lead the viewer's eye. Make your headline the hero, follow it with a great image, and finish with a button they can't possibly miss.
- Use Great Images: Don't waste the space on a boring stock photo. This is your chance to show off a high-quality product shot or a graphic that really says something about your brand.
- Play with Backgrounds: Sometimes a simple coloured or textured background can make your main message pop. Try out different options to see what looks best.
This banner size is a fantastic tool to have in your kit. When we build custom solutions for our clients, we often suggest this format for important campaigns because it just gets results. It hits that sweet spot between being seen and not being annoying.
4. Skyscraper Banner (120 x 600 pixels)
Meet the Skyscraper. Just like its name suggests, this banner is all about being tall. It's a long, narrow ad that usually lives in the sidebars of webpages, running alongside the main text. The 120 x 600 pixel Skyscraper is another one of those classic ad sizes, especially popular on sites with lots of articles and blogs where there's plenty of vertical space to fill.
Think of it as a quiet, persistent reminder of your brand. As someone scrolls down an article, the Skyscraper often stays in view, offering a constant—but subtle—nod to your message. For lots of our clients who have active blogs, this format is a fantastic way to promote something like an ebook or a special offer without interrupting the person while they're reading. It's there, but it’s not in the way.
Why It’s a Classic
The Skyscraper's power is that it sticks around. Unlike banners at the top or bottom of a page, it can stay visible for longer as people scroll, which means more chances for them to actually click on it. You’ll see them all over major news sites and industry blogs. They make great use of the edges of a page, turning what could be empty space into a valuable spot for an ad. It's a key part of the furniture for many web banner sizes.
How to Make Your Skyscraper Stand Out
Its unique shape needs a special kind of design. You can't just squish a normal banner and hope for the best. Here’s how to make your 120 x 600 banner work:
- Think Vertically: Arrange your stuff from top to bottom. Put your logo or a key image at the top, followed by a short message, and end with a clear button.
- Animate for Attention: The tall shape is perfect for subtle animations. You could have things fade in one by one down the banner, drawing the person's eye along the path you've made.
- Make it Readable: With only 120 pixels of width, your text has to be super clear. Use a bold, easy-to-read font and don't try to cram too many words in. Short, punchy lines are your friend.
Making the most of sidebar space is just smart design. When we build websites, especially for businesses with lots of content, we always think about how formats like the Skyscraper can help them reach their goals without making the page feel cluttered.
5. Wide Skyscraper Banner (160 x 600 pixels)
If the standard Skyscraper is a tall, skinny building, the Wide Skyscraper is its slightly bigger sibling with a better view. At 160 x 600 pixels, that extra 40 pixels of width might not sound like much, but in the world of web banner sizes, it’s a game-changer. It gives your design just that little bit more room to breathe. Text is clearer. Images have more impact.
This format is a real favourite for sidebars on modern websites and news sites. It keeps that strong vertical feel, staying on screen as people scroll, but the extra width stops it from feeling cramped. For our clients, we often find this size hits the perfect sweet spot… it’s highly visible but blends into the page layout without being overpowering.
Why It’s Gaining Popularity
The Wide Skyscraper's strength is its design flexibility. That extra space means you can be more creative with your layout, guide the eye better, and have a much clearer call-to-action. It’s big enough to get noticed but slim enough that it doesn’t push important stuff out of the way. This is why you’ll see it used so well on sites with lots of information or on publisher networks to promote articles without ruining the reading experience. It’s a modern, smart choice.
How to Make Your Wide Skyscraper Work Harder
A great size deserves a great design. It’s a canvas that sits right next to your most important content, so it needs to look good. Here are a few tips to get the most out of it:
- Create a Clear Path: With the vertical layout, you want to guide the user's eye from top to bottom. Start with a hook (like a logo or headline), follow with why they should care, and end with a strong button they can't miss.
- Use Whitespace: Don’t be tempted to cram everything into the extra space. Using empty space well will make your message feel more high-end and easier to read.
- Balance Pictures and Text: This format is perfect for a great image paired with a short bit of text. Make sure neither one overpowers the other; they should work together to tell a story.
- Test on Tablets: This banner size can sometimes look a bit awkward on mid-sized screens. It’s really important to check how it looks on different devices.
Getting these vertical banners right is a huge part of creating a professional and clean user experience. Thoughtful banner integration is something we focus on a lot in our customised web design approach, making sure every single thing on the page has a purpose.
6. Half Page Banner (300 x 600 pixels)
If the Leaderboard is the dependable sibling, the Half Page banner is the glamorous cousin who walks into the party and everyone stops to stare. It's big. It's bold. And it’s pretty much impossible to ignore. At 300 x 600 pixels, this format takes up a huge chunk of the screen, sitting next to your content and giving you a canvas for some seriously cool creative.
This isn't your everyday banner; it's a premium spot. Because it's so big, it gives you an incredible chance to tell a bigger story. Think of it less as an ad and more as a mini-landing page. For our clients with high-end online stores, especially luxury brands, this format is perfect for showing off new product launches or telling a deeper brand story without making the user click away.
Why It’s So Impactful
The Half Page banner's power comes from its sheer size and its ability to stick around. As users scroll down the page, this banner often stays in view, which leads to way more people seeing it and clicking on it. It's a favourite of premium websites and luxury brands for a reason. Companies in travel, high-end fashion, and tech use this space to show off videos and interactive bits that just wouldn't fit in smaller web banner sizes.
How to Make Your Half Page Unforgettable
With great space comes great responsibility. You can't just slap a basic message here… you need to make it count. Here are a few ideas:
- Think Like a Magazine: Treat the space like a full-page print ad. Use amazing photos, classy fonts, and a story that pulls people in.
- Add Interaction: This is the perfect format for interactive stuff. Think little product slideshows, short forms, or even mini-games. Anything that gets the user to play around right there in the banner.
- Go High-Value: Save this banner size for your most important campaigns. Think limited-time offers, new collection launches, or big brand announcements.
- Optimise Rich Media: If you use video or fancy animations, make sure they're super optimised. A slow-loading Half Page banner is really frustrating and can ruin the user experience.
Putting such a big visual element on a page needs careful thought about the overall layout, a skill we've refined through years of custom Shopify website design. When it's done right, the Half Page banner doesn't just sell a product; it makes your whole brand feel more premium.
7. Billboard Banner (970 x 250 pixels)
If the Leaderboard is the dependable older sibling, the Billboard is the show-stopping, charismatic cousin who makes a grand entrance. It's bigger, bolder, and it demands your attention. The 970 x 250 pixel Billboard, sometimes called a 'Super Leaderboard', gives you a massive canvas to make a serious visual splash, usually right at the very top of the page.
This is not your everyday banner. It’s a premium format designed to be seen. Think of it like a huge billboard on the highway. For our clients with websites that get a lot of traffic or who are running huge campaigns, this size is perfect for storytelling and creating an amazing first impression. It gives you enough space for beautiful images, great copy, and a clear call-to-action without feeling all squished.
Why It’s a Power Player
The Billboard's strength is its massive size and where it sits. Placed "above the fold," it completely dominates the view when someone first lands on the page, making sure your message is the first thing they see. Major news sites and high-end online stores use this format for their biggest promotions for a good reason. It delivers a premium, high-impact experience that can make a brand feel more important and get a lot of clicks.
How to Make Your Billboard Brilliant
With great power comes great responsibility. A badly designed Billboard can be really overwhelming, so it’s super important to get it right. Here are some tips:
- Embrace the Space: Use high-quality, stunning images or even video. This is your chance to tell a little story, not just show a headline.
- Keep File Size in Check: This is a big one. A huge banner can kill your page load speed. Try to keep your file size under 50KB if you can by optimising it carefully.
- Think Responsively: This banner won't fit on a mobile screen. You'll need to create different, optimised versions for smaller devices to make sure everyone has a good experience.
Getting this balance right between impact and performance is so important. A well-made Billboard can be the centrepiece of a homepage, guiding users and powerfully communicating what your brand is all about.
8. Mobile Banner (320 x 50 pixels)
Welcome to the king of the small screen. In a world where more people browse on their phones than on their computers, the 320 x 50 pixel Mobile Banner isn't just a nice-to-have; it's an absolute must. It’s the small, speedy sibling in the banner family, designed to sit neatly at the top or bottom of a smartphone screen without taking up precious space.
This little banner is a true workhorse. For our clients building mobile-friendly online stores, it’s the perfect tool for on-the-go promotions and important little messages. Think about it… it's perfectly sized for a thumb’s reach, which makes it ideal for a quick tap in a mobile app, a news feed, or a responsive website. It gets the message across without ruining the user’s experience.
Why It’s a Modern Essential
The Mobile Banner's power comes from the fact that it's everywhere. It’s the standard for a mobile-first world. Because it’s so small, it can be a "sticky" element, staying visible as a user scrolls, which keeps your call-to-action right there in front of them. It's the banner you’ll see in countless mobile news apps, games, and online shops because it respects the limited screen space while still being effective. It says, "Hey, I'm here if you need me, but I won't get in your way."
How to Make Your Mobile Banner Work Hard
Designing for such a tiny space means you have to think like a minimalist. Every single pixel has to earn its place. Here’s how to get it right:
- Be Brutally Simple: You have room for a few words and a logo. That's it. Focus on one single, powerful message and a button they can't possibly miss.
- High-Contrast is Key: Your banner will be seen on all sorts of screens in different lighting. Use bold, high-contrast colours to make sure your text and button are instantly easy to see and read.
- Think 'Taps', Not 'Clicks': Design your button to be easy to tap with a thumb. This means giving it enough space so people don’t accidentally tap something else.
- Test, Test, Test: Always check how your banner looks on different mobile phones and browsers. What looks great on an iPhone might look cramped on a smaller Android phone.
9. Vertical Rectangle Banner (300 x 1050 pixels)
Sometimes you just need a bit more room to tell a story. And that's where the Vertical Rectangle comes in. You could call it the "skyscraper on steroids". It's a tall, commanding banner that’s perfect for the modern web where we all just scroll forever. It takes the familiar width of a medium rectangle and stretches it right down the page, giving you a huge canvas to play with.
This format is a game-changer for websites with lots of content. Think about it… as someone scrolls down a long blog post or a detailed product page, this banner can scroll right along with them, revealing more of your message as they go. For our clients with complex products or online courses, this banner size is brilliant for walking a potential customer through all the features, step-by-step, without hitting them with a wall of text.
Why It’s a Modern Powerhouse
The Vertical Rectangle's strength is its storytelling potential. Unlike a static banner that just says one thing, this format can unfold a whole sequence. It’s incredibly effective for taking someone on a journey. An online course could show the different modules, and a product comparison site could use the space to lay out all the details side-by-side. It taps into our natural scrolling habit, making the ad feel like part of the discovery process instead of an annoying interruption.
How to Make Your Vertical Rectangle Engage
With great power comes great responsibility. A poorly designed 300 x 1050 banner can be a cluttered mess. Here’s how to get it right:
- Create Visual Chapters: Break your design into clear sections. Treat it like a mini-infographic where each part tells a piece of the story.
- Embrace Animation: Use subtle animations that appear as the user scrolls. This can reveal new information bit by bit, keeping them engaged and curious to see what’s next.
- Think Independently: Make sure each part of the banner that's visible makes sense on its own. A user might only see a portion of it at any given time, so each section needs to have some value by itself.
This is one of those modern web banner sizes that really needs some thoughtful design, but the payoff can be massive. It's about turning a simple ad into an interactive experience, which is a key idea we build into our e-commerce solutions.
10. Square Banner (250 x 250 pixels)
Meet the Square Banner. It’s the chameleon in the banner family, fitting in perfectly with modern, grid-style website designs. Its balanced 250 x 250 pixel shape has a neat, symmetrical feel that's become super popular, mostly thanks to social media platforms like Instagram and Pinterest that have made us all fall in love with squares.
This isn't your traditional banner that sits at the top of a page. No, it thrives when it's placed right inside the content itself—in galleries, sidebars, or product grids. For our Wise Web clients with sites that show off a lot of visual work or for online stores, these square banners are brilliant. They can showcase projects or products in a really appealing, organised way without breaking the user's browsing flow. They feel less like an ad and more like they're just part of the design.
Why It’s a Modern Favourite
The Square Banner’s strength is how adaptable it is. It plays nicely with responsive designs, stacking neatly on mobile phones and sitting side-by-side on desktops. This format is often used for "native" advertising, where the ad is designed to look and feel just like the content around it. Think of a design agency website using squares to preview case studies, or an online store using them to highlight a special product within a category grid. It’s subtle, effective, and just… feels right.
How to Make Your Square Shine
Its compact size means you have to be smart with your design. Here are a few tips to make your 250 x 250 banner work wonders:
- Go Bold with Imagery: With perfect proportions, a strong, high-quality image or graphic is your best mate. Make it the hero of your design.
- Keep Text Minimal: You don’t have room for a novel. A punchy headline and a very short call-to-action are all you need. Let the picture do the talking.
- Think in Grids: Design your banner knowing it will probably sit next to other squares. How will it look as part of a bigger pattern? Make sure it stands out but doesn't clash.
- Use Symmetry: The square shape is naturally balanced. Use this to your advantage by creating a design that feels centred and calm.
Because it blends in so well, the Square Banner is a key part of creating a clean, modern user experience. It's a small but mighty player in the world of web banner sizes, proving that sometimes, it really is hip to be square.
Top 10 Web Banner Sizes Comparison
| Banner (size) | 🔄 Implementation Complexity | ⚡ Resource Requirements | 📊 Expected Outcomes | 💡 Ideal Use Cases | ⭐ Key Advantages |
|---|---|---|---|---|---|
| Leaderboard (728×90) | Low — simple header/footer placement | Low — small assets; supports light animation | Good brand awareness; solid desktop CTR | Header/footer promos on WordPress/WooCommerce | ⭐ Established standard; cost‑effective |
| Medium Rectangle (300×250) | Medium — flexible placement; needs design integration | Medium — supports rich media; optimise file size | High fill rates and ROI; versatile performance | E‑commerce sidebars, lead gen, content integration | ⭐ Workhorse format; high availability |
| Large Rectangle (336×280) | Medium — more layout planning than 300×250 | Medium — larger assets; optimisation recommended | Higher visibility and engagement than smaller rects | B2B, premium product showcases, mid‑size publishers | ⭐ More creative space; strong mid‑screen impact |
| Skyscraper (120×600) | Medium — sidebar integration; narrow layout challenges | Low — narrow assets; animations increase size | Good desktop brand exposure; sequential storytelling | Blog sidebars, article pages, content platforms | ⭐ Non‑intrusive vertical presence; repeat exposure |
| Wide Skyscraper (160×600) | Medium — wider sidebar needs layout checks | Medium — larger than 120×600; optimise for responsiveness | Improved readability and visual impact in sidebars | Content‑rich sites, resource libraries, service promos | ⭐ Better readability and design flexibility |
| Half Page (300×600) | High — significant layout and integration effort | High — large files; interactive/rich media support | Very high engagement; premium brand positioning | Premium launches, luxury products, high‑value campaigns | ⭐ Immersive, near‑landing‑page experience |
| Billboard (970×250) | High — above‑fold hero placement; responsive variants needed | High — wide assets; strict optimisation required | Exceptional visibility and brand recall above the fold | Major brand campaigns, homepage hero, seasonal promos | ⭐ Massive visual impact; excellent for hero messaging |
| Mobile Banner (320×50) | Low — simple mobile placement and touch considerations | Low — very lightweight; mobile‑optimised | Wide mobile reach but limited messaging depth | Mobile app promos, smartphone audiences, mobile e‑commerce | ⭐ Essential for mobile; fast loading |
| Vertical Rectangle (300×1050) | High — long creative sequence; layout/scroll planning | High — large, complex assets; animation management | Excellent for storytelling and sequential engagement | SaaS feature tours, e‑learning, detailed comparisons | ⭐ Extended storytelling; sequential reveals |
| Square Banner (250×250) | Low — easy grid and mosaic placement | Low — compact assets; responsive friendly | Good visual impact in grids; native/social feel | Portfolios, product grids, social‑style placements | ⭐ Balanced aesthetic; social/native compatibility |
So, Where Do You Go From Here?
Okay, let’s take a breath. We’ve been through the confusing world of pixels and sizes, and you’ve made it out the other side. Not so scary, was it? You’re now officially armed with a cheat sheet for the most important web banner sizes you'll ever need.
And here’s the biggest secret… this was never about memorising a long list of numbers. It’s about getting a feel for what works, and where. It’s like having a toolkit. Now you know that a 728×90 Leaderboard is a classic for the top of a page, a 300×250 Medium Rectangle is your reliable all-rounder, and a 300×600 Half Page gives you a big canvas to tell a richer story.
The real magic happens when you stop thinking just about sizes and start thinking about your audience.
The best banner isn’t just the one with the 'right' dimensions; it’s the one that feels like it belongs. The one that connects with a person on their specific device, at that exact moment.
So, where do you start? Don't try to master all of them at once. Just pick one or two banner sizes that feel right for your next campaign and focus on making them really, really good.
Your Actionable Next Steps
Feeling a bit overwhelmed is completely normal. To make it easier, here are three simple things you can do right now to put all this into action.
Do a Quick Audit: Go to a few websites where your ideal customers hang out. What ads do you see? Jot down the sizes and where they are on the page. This little bit of homework will show you what your competitors are doing and which web banner sizes are popular in your world. You'll start to see the patterns we've talked about, like Medium Rectangles in the middle of articles and Leaderboards at the top.
Start with the Power Players: You don't need to create a version of your ad for every single size on this list. That’s a fast track to burnout. Instead, focus on the most popular ones first. A great starting trio is the Medium Rectangle (300×250), the Leaderboard (728×90), and the Mobile Banner (320×50). With just these three, you can cover a massive amount of ad space across both desktop and mobile.
Test, Test, Test: A/B testing isn't just for words and pictures; it's for ad sizes, too. As you get more confident, try a Wide Skyscraper against a Half Page in the same sidebar. Does one get more clicks? It’s also so important to check how your ads actually look once they're out there in the world. Using tools that let you customize ad slots can be a real lifesaver, letting you see a preview to make sure your beautiful design isn't getting awkwardly cut off on the live site.
Mastering web banner sizes is what separates an ad that gets ignored from one that actually connects and converts. It shows you’ve thought about the person on the other end. It shows you respect the website you're advertising on. And ultimately, it shows your audience that you’re a professional who cares about the details, which builds trust before they even click.
It’s a small detail in the grand scheme of things, I know. But it's one of those little things that makes everything else you do just that little bit more effective.
Feeling like this is still a lot to handle on top of everything else you're juggling? That's where we come in. At Wise Web, we untangle these digital knots so you can get back to what you do best. Let us handle the design and the tech stuff to make sure your brand shows up perfectly, every single time.