Animated banner ad sizes: a complete guide
The animated banner ad sizes that matter for Google Display, social feeds and website hero strips, with file limits, animation rules and a starter set.
Founder & Creative Director
Key takeaways
- Start with a small core of display sizes (300×250, 728×90, 300×600 and 320×50), then add the rest.
- Google Ads caps animation at 30 seconds and image or GIF uploads at 150 KB (HTML5 ZIPs at 600 KB); social platforms care about aspect ratio instead.
- Banners on your own site follow your theme, not a standard. Get the exact slot sizes before design starts.
Three families of banner sizes
Ask for animated banner ad sizes and you will usually get a list of IAB rectangles. That is only one of three families, and most campaigns need at least two of them:
- Display network sizes: fixed pixel rectangles such as 300×250 and 728×90, sold through Google Display and other ad networks
- Social ad sizes: defined by aspect ratio (1:1, 4:5, 9:16, 1.91:1) rather than exact pixels
- Website banners: hero strips and promo slots on your own store or site, whose sizes are set by your theme
Google Display Network sizes
Display networks sell inventory in fixed sizes that come from the IAB’s standard ad units. Google’s own guidance names five as its top-performing sizes: the 300×250 medium rectangle, the 336×280 large rectangle, the 728×90 leaderboard, the 300×600 half page and the 320×100 large mobile banner. The rest of the common set fills specific placements.
| Size | Name | Where it typically appears |
|---|---|---|
| 300×250 | Medium rectangle | Inside articles, in sidebars and between content, on desktop and mobile |
| 336×280 | Large rectangle | Inside or at the end of articles, mostly on desktop |
| 728×90 | Leaderboard | Above the main content or under the header on desktop |
| 300×600 | Half page | Desktop sidebars; tall enough to tell a short story |
| 320×100 | Large mobile banner | Above or below content on phones |
| 320×50 | Mobile leaderboard | Top or bottom of the screen on phones |
| 160×600 | Wide skyscraper | Narrow desktop sidebars |
| 970×90 | Large leaderboard | Full-width desktop slots above content |
| 970×250 | Billboard | High-impact desktop slots at the top of a page |
| 250×250, 200×200 | Square, small square | Small sidebar and in-content slots |
Rules for animated display ads in Google Ads
Google Ads sets limits on every uploaded animated banner, and they shape the design more than the dimensions do:
- Animation must last 30 seconds or less. Banners can loop, but all motion has to stop by the 30-second mark.
- Animated GIFs must run slower than five frames per second.
- Uploaded image and GIF ads must be 150 KB or smaller; an HTML5 ad is uploaded as a ZIP of up to 600 KB.
- HTML5 uploads are only open to accounts that meet Google’s eligibility requirements, based on account history and spend, so many advertisers upload GIF or static banners instead.
- Many publishers and networks follow stricter IAB guidance and ask for 15 seconds of animation or less, so check the spec sheet for every media buy.
Responsive display ads
Responsive display ads skip fixed sizes. You upload assets and Google assembles them for whatever slot is available: a landscape image at 1.91:1 (1200×628 is the recommended size), a square image at 1:1 (1200×1200), a square logo (1200×1200), an optional wide 4:1 logo (1200×300), plus short headlines and descriptions. They reach inventory a single fixed size cannot, so many campaigns run them alongside animated fixed-size banners.
The 1.91:1 ratio is also the landscape link-ad format on Facebook and LinkedIn, which makes it one of the most reusable sizes you can design. The twenty-one 1200×628 display banners we made for BabyStore share one layout, with the headline, arrow, button and logo fixed in place and only the products and background tint changing, so a single sale could cover every product category.
Social ad sizes
Social platforms crop and scale your file to fit each placement, so the aspect ratio matters more than the exact pixels. Design at these sizes and you cover the main placements:
| Placement | Ratio | Recommended size |
|---|---|---|
| Facebook and Instagram feed, square | 1:1 | 1080×1080 |
| Facebook and Instagram feed, vertical | 4:5 | 1080×1350 |
| Stories and Reels, TikTok, YouTube Shorts | 9:16 | 1080×1920 |
| Facebook link ads, LinkedIn single-image ads | 1.91:1 | 1200×628 (LinkedIn lists 1200×627) |
| LinkedIn square | 1:1 | 1200×1200 |
| YouTube in-stream and landscape video | 16:9 | 1920×1080 |
| Pinterest standard pin | 2:3 | 1000×1500 |
Leave room for the interface
Full-screen vertical placements put the platform’s own interface on top of your ad: the profile name and progress bar at the top, captions, buttons and the call to action at the bottom. Meta’s guidance is to keep text and logos out of the top and bottom strips of a 1080×1920 Story, and Reels covers even more of the bottom. Keep the headline, price and logo in the central area and the ad survives every placement.
Our Steralth spec animation is a good example of designing per ratio instead of cropping: the same animation was laid out separately for 1080×1920 stories and the taller 1500×1950 feed format, in 21-, 10- and 6-second versions.
Website banners and hero strips
Banners on your own site follow no standard at all. The theme or front end decides the slot, and every store is different. These are sizes from banner work we have delivered, and none of them appears on an IAB list:
| Project | Size | What it is |
|---|---|---|
| Jewelry offer banner | 1600×468 | A short looping animated banner built around one price line |
| Glueguide search banners | 1280×490 | Animated cuts of 25, 13 and 12 seconds showing a search happening |
| Neobreez promo strip | 1600×333 | A thin static strip presenting three products and an offer |
| BabyStore partner banners | 3840×800, 1440×490, 1440×240, 600×140 | One promotion re-composed for four slots, from hero strip to mobile strip |
Getting website banner sizes right
- Get the exact pixel size of every slot from your developer or theme settings before design starts, including the mobile slot, which is often a separate image.
- Re-compose for each size instead of cropping. When the same BabyStore promotion had to fill a 3840-pixel hero and a 600×140 mobile strip, the headline, discount badge and products were moved for each size, not scaled.
- Keep text away from the edges; many themes crop wide images toward the center on smaller screens.
- Watch the file weight. A hero banner is often the largest element on the page, the one Google’s Largest Contentful Paint metric measures, so a heavy GIF slows how fast the page appears. A short MP4 or WebM, or a vector Lottie animation, is usually far lighter than a GIF of the same motion.
- Ask whether the slot accepts video at all. Some themes only take images, which means a GIF or an animated WebP.
Formats: GIF, HTML5 or video?
The placement decides the format more than taste does:
- GIF works almost everywhere, including email, but is limited to 256 colors and gets heavy fast. Some desktop versions of Outlook show only the first frame, so put the offer there.
- HTML5 (a zipped bundle of HTML, CSS, JavaScript and images) gives smooth motion at a small file size and is the standard for programmatic display, where your account can upload it.
- MP4 is the default for social placements and for site hero strips that accept video.
- A static fallback image should ship with every animated banner, for placements and email clients that won’t play the animation.
A starter set to build first
You rarely need every size on day one. This set covers the main placements, and the rest can be added once you know which ones perform:
- Display: 300×250, 728×90, 300×600 and 320×50, plus responsive display assets at 1200×628 and 1200×1200
- Social: 1080×1080, 1080×1350 and 1080×1920
- Your own site: every slot your theme defines, on desktop and on mobile
Design the smallest size first
Once the list is set, design the tightest placement first. If the offer reads in a 320×50 mobile banner, it will read everywhere; working the other way round is how a headline ends up illegible in the smallest slot. We explain the full method in keeping a campaign coherent at volume.
If you would rather hand over the whole size list, our animated banner ads work covers display, social and site banners in one system, and our graphic design service produces the static sets alongside them. A clear brief makes all of it faster; here is how to brief a design agency.
Frequently asked questions
What is the most common banner ad size?
The 300×250 medium rectangle. It fits inside articles and sidebars on both desktop and mobile, and Google lists it among its top-performing sizes.
How long can an animated banner ad be?
In Google Ads, 30 seconds at most, and looping animation must stop by then. Many publishers ask for 15 seconds or less. In practice the offer should be readable within the first few seconds, because most people only glance at a banner.
What size should a website hero banner be?
Whatever your theme specifies; there is no standard. Wide strips on sites we have designed banners for range from 1280×490 to 3840×800, with separate mobile slots as small as 600×140.
Should I use GIF or HTML5 for display ads?
HTML5 if your ad account can upload it and you need smooth motion at a small file size; GIF if it has to run everywhere, including email. Either way, ship a static fallback.
The Dawnwire Agency Deck
Our process, what each service includes, how we price and hand over, and a selection of real client work, in one free deck.