Display Ad Banner Sizes That Convert (5 That Matter)
A friend of mine runs a mobile car detailing business. He'd built one nice ad — a 1080×1080 square, product shot, three lines of copy, a button — and uploaded it to Google Ads as his display creative. Google took it, served it about four hundred times in a week, and that was that.
The problem wasn't the ad. It was that display ad banner sizes are their own thing, and a square social graphic only fits a sliver of the inventory. Most of the web's ad slots aren't square. They're a skinny strip across the top of a news article, or a tall rail down the side of a recipe blog, or a small box wedged between two paragraphs. If you don't have a creative shaped like that slot, you don't get the slot.
Here's what actually matters: which sizes to make, and why each one needs a different layout rather than the same layout squashed.
The five display ad banner sizes worth making
Google's Display Network technically accepts dozens of sizes. You don't need dozens. These five cover the overwhelming majority of available placements:
| Size | Name | Where it shows |
|---|---|---|
| 300×250 | Medium rectangle | In-article, sidebar. The workhorse. |
| 336×280 | Large rectangle | Same slots, slightly bigger. Often better CTR. |
| 728×90 | Leaderboard | Top of desktop pages. |
| 300×600 | Half page | Desktop sidebar rail. Huge canvas, high engagement. |
| 320×100 | Large mobile banner | Bottom of mobile pages. |
Make those five and you're covered. Add 160×600 (wide skyscraper) and 970×250 (billboard) later if you want, but they're the long tail.
Two constraints that trip people up: the file has to come in under 150KB, and text should stay under roughly 20% of the frame if you want it to read cleanly at these sizes. That second one isn't an enforced rule anymore, but it's still good advice — it's the difference between a banner and a wall.
The one-message rule
Here's the thing that separates a banner that works from one that doesn't: a display banner gets one message. Not three. One.
Your social post can breathe. It gets a caption, it gets a swipe, someone is already half-engaged when they see it. A display banner is in someone's peripheral vision while they read about something else. You get maybe a second of attention, and in that second they can absorb exactly one idea plus a button.
So before you open any design tool, write the one line. For my friend's detailing business, the winner wasn't "Professional Mobile Detailing Services — Interior, Exterior, Ceramic Coating — Book Online Today." It was:
We come to your driveway. $89.
That's it. Price, differentiator, six words. Everything else — the ceramic coating upsell, the service area, the five-star reviews — belongs on the landing page, not in a 300×250 box.
Why you rebuild each size instead of resizing
This is the part everyone gets wrong, including me for a long time. You cannot take one layout and scale it into five shapes. A 300×250 and a 728×90 have almost the same area but completely opposite proportions, and a layout that works in one is unreadable in the other.
300×250 (medium rectangle) stacks vertically. Image band across the top, headline under it, button at the bottom. Roughly: 40% image, 35% text, 25% button-and-breathing-room. Headline around 22–26px. This is the closest to a mini poster.
728×90 (leaderboard) goes horizontal and drops almost everything. Logo on the far left, headline in the middle, button on the far right. One line of text, maybe 20px. There's no room for a supporting line — if you try, both lines end up too small to read from a distance. Cut it.
300×600 (half page) is the one with actual room. This is where you can afford a real photo, a headline, a supporting line, and a button with generous spacing. Don't fill it edge to edge just because you can — the empty space is what makes it look expensive rather than like a 2011 banner ad.
320×100 (mobile banner) is a squeezed leaderboard. Logo, short headline, button. Your headline here should be four words max, because at 100px tall on a phone screen anything longer becomes a gray smear.
336×280 is a 300×250 with a bit more air. Same layout, slightly bigger type, slightly more padding. This is the only one that's genuinely a resize.
Notice what changes across all five: the number of text elements. Six words in the leaderboard, twelve in the half page. Same message, different amount of it.
Contrast, because these render next to chaos
Your banner is going to sit on a page you don't control, next to a photo you didn't pick, on a background that might be white or might be dark gray. Two things follow from that:
Give it a hard edge. A 1px border or a solid background block that clearly ends. Banners that fade into the page background just look like part of the site, and get ignored as page furniture.
Make the button obvious. Solid fill, high contrast against everything around it, actual button shape. This is not the place for a subtle ghost button. If you're putting text over a photo in the banner, the same rules apply as anywhere else — I wrote about making text readable over photos and every bit of it applies double at 300×250.
Building the set in Ridvay Studio
Here's the actual workflow. Start with the medium rectangle — it's the size you'll serve most, and getting the message right at 300×250 forces the discipline that makes the other four easy.
Type this into Studio:
Make a 300x250 display banner ad for a mobile car detailing service. Dark navy background, one photo band across the top of a clean car, bold headline "We come to your driveway", price "$89" as a large accent number, and a bright solid "Book now" button at the bottom. Bold sans-serif, high contrast, no clutter.
What comes back isn't a flat image you'd have to regenerate to change. It's an editable design — the headline is a text layer, the price is its own layer, the button is a shape with its own fill, the photo band is a swappable image element. Which matters here more than usual, because you're about to build four variations of it.
Then make these edits:
- Click the headline and push the size up until it nearly fills the width. At 300×250 the most common mistake is type that's too polite. Fill the space.
- Recolor the button to your brightest brand color, not the background's cousin. Per the contrast section above — it should look like it doesn't belong to the page it lands on.
- Delete the supporting line if there is one. One message. If the AI gave you a subhead explaining the service area, cut it. It'll be the thing that makes the leaderboard version impossible.
- Apply your brand kit so the logo, fonts, and palette are locked before you duplicate. Setting this up once is what makes the next four sizes take five minutes instead of an hour — the brand kit walkthrough covers it.
For the other four sizes, duplicate the design, change the canvas dimensions, and then relayout — move the image band to the left for the leaderboard, drop the supporting text, re-anchor the button. Don't scale. Ridvay's resize handles the canvas change; you handle the twenty seconds of rearranging that makes it actually readable. It's the same muscle as resizing a design for every social platform, just with tighter constraints.
Export each as PNG, check every file is under 150KB, and upload the set.
Build your first 300×250 banner →
What happened
My friend uploaded five sizes instead of one. Impressions went from a few hundred a week to a few thousand — not because the creative got better, but because he was suddenly eligible for slots he'd been locked out of. That's the whole trick. Display advertising rewards coverage, and coverage is a design problem before it's a bidding problem.
If you're also running the same campaign as a native feed post, that's a genuinely different craft — designing a social ad that converts has the rules for that side.
Otherwise: write your one line, build the 300×250, rebuild it four times. An evening's work, and it's the difference between showing up on the web and showing up in one corner of it.