Digital marketing services by Futuristic Marketing Services showing SEO content strategy and organic growth system
Contact

Website Banner Sizes & Specifications Guide

website banner sizes chart with standard dimensions hero banners sidebar ads and display ad formats

1. Why Banner Size and Specification Accuracy Matters

Uploading a banner to a website at the wrong size, in the wrong format, or at an unoptimised file weight is one of the most common and most costly mistakes in digital design. The consequences range from visible quality degradation – pixelation, blurring, or awkward cropping – to invisible but commercially significant performance failures: slow page loads that trigger visitor abandonment, Core Web Vitals failures that suppress Google Search ranking, and ad platform rejections that prevent campaigns from running.

According to ShortPixel’s website banner dimensions guide, banner size affects both how fast your site loads and how it looks on different devices. Oversized banners slow down performance, while poorly sized ones appear blurry or cut off. According to TinyIMG’s website image size guide, a jump from 1 to 3 second load time increases bounce rate by 32% – and an unoptimised hero banner image is one of the most common causes of exactly this kind of load time increase. According to the IAB Tech Lab’s display advertising standards, non-standard ad dimensions reduce delivery eligibility and can result in creatives being resized in ways that distort the design.

This guide provides a complete, accurate, and actionable reference for every banner dimension category used in website design and digital advertising – from hero banners to display ads, from CMS-specific guidelines to file format specifications. It is designed to be bookmarked and consulted every time a new banner project begins, ensuring that every creative is sized correctly from the first pixel.

NOTE

There is no single universal banner size. Dimensions depend entirely on placement, platform, and purpose.

A common misconception in banner design is that there is one ‘correct’ banner size. In reality, as ShortPixel’s guide states, there is no single perfect banner size that works for every site, because dimensions depend on layout and device. The right answer to ‘what size should my banner be?’ is always: it depends on where the banner sits, on which platform it is hosted, and which device the viewer is using. This guide provides the specific answers for every relevant combination of those variables.

2. The Universal Banner Size Framework: How to Think About Dimensions

Before consulting specific size tables, understanding the conceptual framework that governs all banner sizing decisions makes the specifications more memorable and more applicable to new situations not covered in any single guide.

▸ Three Variables That Determine Every Banner Size

  • Placement context: Where the banner sits on the page - full-width top, sidebar, within content, footer, above navigation - determines its available width and height. A full-width hero banner spans 100% of the viewport; a sidebar banner sits within a column of typically 250 to 350px wide; an announcement bar is constrained to 40 to 60px of height.
  • Device target: Desktop banners are designed for viewports of 1280 to 1920px wide. Tablet banners target 768 to 1024px. Mobile banners target 375 to 428px. Each device context requires different dimension specifications, different font sizes for legibility, and different image crops to maintain visual impact.
  • Platform or ad network: Banners on your own website are sized according to your CMS theme and layout specifications. Banners served through Google Ads, Meta, or programmatic networks must conform to the platform's specific technical requirements - including exact pixel dimensions, maximum file sizes, and accepted file formats. Mismatched specifications mean the creative is either rejected or distorted.

▸ Responsive vs Fixed-Dimension Banners

Modern websites primarily use responsive design – layouts that adapt fluidly to different viewport widths using CSS percentages and media queries rather than fixed pixel dimensions. In a responsive design context, a hero banner is specified as ‘100% viewport width’ in CSS, and the image is served at different sizes for different breakpoints using the srcset attribute. The designer must provide images at multiple sizes that cover the common breakpoints rather than a single fixed-size file.

Display advertising banners, by contrast, are almost always fixed-dimension – the ad network requires an exact pixel size (300×250, 728×90, etc.) and any deviation produces rejection or distortion. Understanding which type of banner you are designing – responsive website banner or fixed display ad – is the first sizing decision, because it determines the entire specification framework.

TIP

Design at 2x resolution, export at the target dimensions, then compress.

For website banners intended for high-resolution (retina) displays, design the master artwork at twice the intended display size – for example, design at 3840px wide for a 1920px display banner. Export at the intended display size (1920px) and compress using WebP format. This approach ensures the image appears sharp at the 2x pixel density of retina screens while maintaining the target file size.

3. Hero Banner Sizes: Desktop, Mobile, and Platform-Specific

▸ Universal Hero Banner Size Standards

The hero banner occupies the full width of the page above the fold. Because every website uses a different theme, layout, and content width, there is no single universal hero banner pixel size – but there are widely adopted standards that work across the most common screen sizes and CMS platforms.

Hero Banner Type

Recommended Desktop Size

Recommended Mobile Size

Aspect Ratio

Notes

Full-screen / Cinematic Hero

1920 × 1080 px

800 × 1200 px (portrait)

16:9 desktop; 2:3 mobile

Standard fullscreen size; looks sharp on modern monitors; 16:9 is the dominant screen ratio. Section Store recommends 1920×1080 px desktop, 800×1200 px mobile

Standard Full-Width Hero

1920 × 600–800 px

375–768 × 500–700 px

3.2:1 to 2.4:1 desktop

Most common hero height; keeps content visible above fold; CrazyEgg recommends 1600×500 px as default baseline

Slim / Header Hero

1920 × 300–500 px

375 × 300–400 px

3.8:1 to 6.4:1

For sites needing to show products or content quickly after hero; good for e-commerce and SaaS above-fold strategy

Tall / Impact Hero

1920 × 900–1080 px

375 × 600–812 px

Near 16:9

For brands prioritising visual impact; fills most laptop viewport heights; hero content must be above the 700px line

Boxed Hero (within content width)

1440 × 500–700 px

375 × 400–600 px

2:1 to 2.9:1

Used in boxed layouts with max-width containers; background can extend full-width while content is constrained

▸ Platform-Specific Hero Banner Sizes

CMS Platform

Recommended Hero Size

Mobile Size

Format

File Size Target

Shopify (general)

2048 × 1024 px (2:1 ratio recommended)

1200 × 1600 px portrait

JPG or WebP

Under 500 KB desktop; under 200 KB mobile

Shopify (slim / above-fold)

1920 × 600 px

800 × 800 px or 375 × 500 px

JPG or WebP

Under 300 KB

Squarespace

2500 × 1500 px (Mega View)

Auto-scaled by platform

JPG or PNG

Under 500 KB; Squarespace recommends keeping file size under 500 KB

WordPress (theme-dependent)

1920 × 1080 px baseline

768 × 500 px tablet; 375 × 500 px mobile

WebP with JPG fallback

Under 200 KB (use ShortPixel or TinyPNG for compression)

Webflow

1920 × 800–1080 px

375 × 500–600 px

WebP or JPG

Under 200 KB; Webflow supports responsive image variants via Asset Manager

Wix

1920 × 1080 px recommended

Mobile auto-cropped or separate upload

JPG or PNG

Under 500 KB; Wix auto-compresses but original quality affects output

DATA

Design desktop and mobile hero images as separate assets – never force a single image to adapt across both.

According to Section Store’s Shopify hero banner guide, the most common hero sizing failure is trying to use a wide desktop banner on a tall mobile screen – the result is a tiny strip of image where nothing is visible. The recommended fix is to use a theme or section that supports separate desktop and mobile images, serving a wide 1920px image to laptop users and a tall portrait image to mobile users. Across all CMS platforms, wherever the option exists to specify separate mobile and desktop hero images, it should be used – the compositional requirements of the two orientations are too different to solve with a single cropped asset.

4. Promotional and Sale Banner Sizes

Promotional banners – used for announcing sales, discounts, new product launches, and limited offers – are placed at various positions within the page: immediately below the hero, mid-page between content sections, or as standalone full-width sections within the homepage or category pages. Their sizes are therefore more variable than hero banners, adapting to the specific layout position they occupy.

Promotional Banner Type

Desktop Dimensions

Mobile Dimensions

Placement

Design Priority

Full-width promotional section

100% viewport × 200–500 px

100% viewport × 150–350 px

Below hero; mid-homepage; above footer

Offer clarity; urgency element; high-contrast CTA

Half-width featured banner

50–60% of content width × 300–500 px

100% viewport × 200–300 px

Alongside other half-width content block

Product image; headline; CTA – very limited space

Category page header banner

100% content width × 200–350 px

100% viewport × 150–250 px

Top of category or product listing page

Category name; optional filter navigation; background image

Promotional card (grid layout)

300–400 px × 350–500 px

Full-width stack × 200–350 px

Within product or content grid

Product image dominant; brief headline; price or offer badge

Featured content / editorial banner

600–800 px × 200–350 px

100% content width × 150–250 px

Within blog or article page; homepage editorial zone

Editorial-style image; headline; reading CTA

5. Announcement Bar and Notification Banner Sizes

The announcement bar is one of the most precisely specified banner types because its narrow height is functionally constrained: it must accommodate a single line of text at a legible size, an optional close button, and an optional CTA link – all within a very limited vertical space. Exceeding the standard height breaks the visual relationship between the bar and the navigation below it, making the header feel crowded and disorganised.

Announcement Bar Type

Height (Desktop)

Height (Mobile)

Width

Font Size in Bar

Notes

Standard announcement bar

40–60 px

40–60 px

100% viewport width

14–16 px

Single-line text; typically fixed (sticky) at top of page; includes close button option

Tall announcement bar (with icon)

60–80 px

50–70 px

100% viewport width

14–16 px

Accommodates a small icon left of text; still limited to one line of copy

Double-line notification bar

70–90 px

60–80 px

100% viewport width

13–15 px

Allows a heading + short supporting line; use sparingly – adds height to every page

Promotional countdown bar

60–80 px

60–80 px

100% viewport width

13–16 px

Includes countdown timer component; often animated; timer element adds variable width

TIP

Keep announcement bar height to 40–60 px maximum for clean header proportions.

The announcement bar works best when it is visually distinct from the navigation below it but does not compete with the navigation for height. A 40 to 60px bar with high-contrast background colour and a single, brief, urgent message creates a prominent site-wide communication without disrupting the navigational hierarchy. Taller bars that approach the height of the navigation row make the header area feel visually heavy and can push the first above-fold content below where many visitors expect to find it.

6. Sidebar Banner Sizes

Sidebar banners are placed in the left or right sidebar columns of blog pages, article pages, and product listing pages. Their widths are constrained by the sidebar column – typically 250 to 350px on desktop – and they share the sidebar space with other elements such as navigation menus, related content widgets, author bios, and newsletter sign-up forms. The sidebar banner sizes below align with both website layout conventions and IAB display advertising standards, since the same formats are commonly used for both editorial sidebar placements and paid display ad inventory.

Sidebar Banner Format

Dimensions (px)

IAB Name

Best Placement

Scroll Behaviour

Notes

Medium Rectangle

300 × 250

IAB Medium Rectangle

Article sidebar; end of content; mobile in-feed

Can be static or sticky

Most widely used ad format globally; fits desktop and mobile; highest inventory availability on GDN

Large Rectangle

336 × 280

IAB Large Rectangle

Article sidebar; within content

Static usually

Slightly larger than medium rectangle; more creative space; similar placement contexts

Wide Skyscraper

160 × 600

IAB Wide Skyscraper

Right sidebar; stays visible while content scrolls

Often sticky / fixed

Tall vertical format; high scroll visibility; best on content-heavy pages with long reading sessions

Half-Page Ad

300 × 600

IAB Half-Page

Premium right rail; magazine-style layout

Often static

Twice the height of medium rectangle; substantial creative space; strong for storytelling; growing impressions

Square

250 × 250

IAB Small Square

Compact sidebar; widget zone

Static

Limited for complex messaging; best for simple brand logo + CTA or single product image

Small Square

200 × 200

IAB Small Square variant

Very compact sidebar; affiliate slot

Static

Mainly for affiliate marketing or very simple single-message ads

7. In-Content and Blog Banner Sizes

In-content banners – placed within the body of a blog post or long-form article page, typically at a natural reading break point – are the highest-converting website banner placement. Their dimensions are determined by the content column width, which varies by theme but typically sits between 600 and 800px for single-column content layouts or 700 to 900px for wide-format editorial designs.

In-Content Banner Type

Typical Width

Height

Mobile Adaptation

Best Use Case

Full content-width banner

100% of content column (600–800 px)

150–250 px

100% viewport width; auto height

Newsletter sign-up; content upgrade; lead magnet; mid-article CTA

Content upgrade box

100% content width (600–800 px)

120–200 px

Full-width stack

Downloadable resource promoted within relevant article section

Highlighted product/service card

50–70% content width (400–560 px)

200–350 px

Full-width stack on mobile

Cross-sell; related service promotion within instructional content

Medium Rectangle (in-content)

300 × 250 px (floated)

250 px

Full-width in-feed on mobile

Display ad unit placed within article body; most inventory-compatible placement

Wide in-content ad unit

728 × 90 px

90 px

Hidden on mobile (replaced with 320×50)

Leaderboard-format ad placed within long-form article; interruption style

8. Event and Countdown Banner Sizes

Event banners – for product launches, webinars, sales, festivals, and limited-time offers – are typically full-width sections and follow similar dimension conventions to promotional banners. The countdown timer component adds a height variable that must be accounted for in the design specification: a large countdown widget with separate day, hour, minute, and second columns requires at least 80 to 120px of additional vertical space beyond the surrounding headline and CTA copy.

Event Banner Type

Desktop Dimensions

Mobile Dimensions

Special Requirements

Full-width event banner

100% viewport × 300–500 px

100% viewport × 250–400 px

Allow 80–120 px for countdown timer component; event-specific visual treatment

Homepage event takeover

100% viewport × 400–600 px

100% viewport × 300–500 px

May replace hero banner temporarily; ensure mobile layout shows timer above fold

Event landing page hero

1920 × 600–800 px

375 × 500–700 px

Event date/location must be above the fold; RSVP CTA prominently placed

Festive / seasonal full-width section

100% viewport × 250–450 px

100% viewport × 200–350 px

Seasonal design language; Diwali, New Year, Republic Day, etc.; often animated entry

9. Footer Banner Sizes

Footer banners appear at the very bottom of the homepage or long-form pages, serving as a final conversion opportunity for visitors who have scrolled the full length of the page without acting on earlier CTAs. Because they appear after all primary content has been consumed, footer banners attract a self-selected audience – visitors who were interested enough to scroll to the bottom are higher-intent than average. A well-designed footer banner for newsletter sign-up, consultation booking, or secondary CTA captures value from this high-engagement audience segment.

Footer Banner Type

Desktop Width

Desktop Height

Mobile Width

Mobile Height

Common Purpose

Full-width newsletter sign-up

100% viewport

200–300 px

100% viewport

200–280 px

Email capture; brief benefit statement + email input + submit button

Split footer CTA (50/50)

100% viewport

250–350 px

100% viewport (stacked)

300–450 px

Two-option secondary CTA: ‘Contact Us’ + ‘See Our Work’; or service A + service B

Full-width brand / social footer

100% viewport

150–250 px

100% viewport

150–250 px

Brand tagline + social links + secondary navigation; low-commitment engagement

Featured product footer

100% viewport

300–450 px

100% viewport

300–400 px

Showcases a flagship product or service with image, headline, and CTA

10. CMS-Specific Banner Size Guidelines

▸ Shopify Banner Size Guide

Shopify stores use banner images throughout the site – hero/slideshow banners, collection header images, promotional section images, and product images. According to Shopify’s official image size guidelines, a recommended hero image width is between 1280 and 2500 pixels, and the height between 720 and 900 pixels. For Shopify slideshow/hero banners specifically, the widely cited recommended size is 1920 x 1080 pixels at 16:9 aspect ratio, with a maximum file size of 20 MB (though practical performance targets are 500 KB or below). According to PageFly’s Shopify banner size guide, the recommended Shopify hero banner size is 2048 x 1024 pixels for desktop and 1200 x 1600 pixels for mobile.

Shopify Image Type

Recommended Size

Max File Size

Format

Notes

Hero / Slideshow Banner (desktop)

2048 × 1024 px (2:1) or 1920 × 1080 px

20 MB max; target under 500 KB

JPG or WebP

2500 x 900 px and 1600 x 500 px are also widely used depending on theme

Hero / Slideshow Banner (mobile)

1200 × 1600 px (3:4 portrait) or 800 × 1200 px

Under 200 KB

JPG or WebP

Serve separately using theme mobile image support; never scale desktop hero

Collection / Category Header

1920 × 600 px

Under 300 KB

JPG or WebP

Top of collection listing page; typically no text baked in – overlay handled by theme

Promotional Banner Section

1920 × 400–600 px

Under 300 KB

JPG or WebP

Mid-homepage or landing page promotional sections; text overlay via theme builder

Product Image

2048 × 2048 px (1:1 square) max 4472×4472 px

Under 500 KB; aim for 200 KB

JPG or WebP

Square 1:1 recommended for consistency in grid layouts

▸ Squarespace Banner Size Guide

Squarespace uses specific banner dimension categories tied to its section layout system. According to SEOSpace’s Squarespace banner size guide, the most popular sizes are: Mega View (2500 x 1500 pixels), Large Rectangle (1500 x 500 pixels), Medium Rectangle (750 x 250 pixels), and Wide Skyscraper (150 x 500 pixels). For general Squarespace hero banners, it is recommended to use images at least 2500 pixels wide. Squarespace will automatically resize, but uploading a larger image ensures sharpness after compression. Keep file size under 500 KB to avoid slow-loading pages.

▸ WordPress Banner Size Guide

WordPress banner sizes are theme-dependent – the ‘correct’ size for any specific WordPress theme is defined by that theme’s documentation. However, widely used standards across popular themes are: hero/header banner 1920 x 1080 pixels or 1920 x 600 pixels; featured image 1200 x 630 pixels (also optimal for Open Graph social sharing); sidebar widget image 300 x 250 pixels (aligns with Medium Rectangle ad format). According to Cronyxdigital’s hero image sizing guide, for desktop users the minimum recommended hero image is 1600 pixels wide; the most common visitor screen width is 1920 pixels. WordPress themes typically auto-generate multiple image sizes – always check theme documentation for the specific sizes registered by the theme to avoid serving oversized originals.

11. Google Display Network Ad Sizes: IAB Standards and Top Performers

Google Display Network ad sizes follow the Interactive Advertising Bureau (IAB) standards. According to The Brief.ai’s banner sizes guide, the maximum file size for Google display ad creatives is 150 KB per creative regardless of dimensions. According to BannerSnack’s Google Ads banner sizes guide, the five top-performing display ad sizes that consistently deliver the best results are: 300×250 (Medium Rectangle), 336×280 (Large Rectangle), 728×90 (Leaderboard), 300×600 (Half Page), and 320×50 (Mobile Leaderboard).

Ad Size (px)

IAB Name

Top Performing?

Best Placement

Max File Size

Performance Notes

300 × 250

Medium Rectangle

Top 1 – essential

In-content; sidebar; end of articles; mobile in-feed

150 KB

Most versatile format globally; highest inventory availability; fits desktop and mobile

336 × 280

Large Rectangle

Top 2

In-content; sidebar – same placements as 300×250

150 KB

Larger version of medium rectangle; more creative space; strong performance in content areas

728 × 90

Leaderboard

Top 3

Top of page; above or below navigation; forums

150 KB

Classic horizontal format; above-the-fold placement; performs well on forum and content-heavy sites

300 × 600

Half Page

Top 4 – premium

Right rail; premium sidebar placement

150 KB

Fastest-growing format; strong viewability in sidebars; ample space for storytelling and brand visuals

320 × 50

Mobile Leaderboard

Top 5 – mobile essential

Top or bottom of mobile page

150 KB

Built specifically for smartphones; essential for mobile-first campaigns; high fill rate on mobile inventory

160 × 600

Wide Skyscraper

Strong performer

Right sidebar; stays visible as content scrolls

150 KB

Tall vertical format; excellent scroll visibility; suits brand awareness campaigns

970 × 90

Large Leaderboard

Premium format

Premium site headers; homepage top

150 KB

Wider than standard leaderboard; more visual space; less common but impactful on premium publishers

970 × 250

Billboard

Premium format

Premium homepage top; high-impact brand placement

150 KB

Large horizontal format for brand storytelling; limited inventory; high CPM; strong visual impact

300 × 1050

Portrait

Large-format premium

Premium right rail

150 KB

Very tall format; substantial storytelling space; limited inventory but high engagement where available

320 × 100

Large Mobile Banner

Mobile premium

Top of mobile page; strong mobile CTA placement

150 KB

Twice the height of standard mobile leaderboard; higher CTR than 320×50 when optimised; Google’s top 5 performer

12. Mobile Banner Sizes: Website and Display Advertising

Mobile web traffic constitutes the majority of internet usage globally and an even higher proportion in the Indian market. Every website banner and display ad creative must have a specifically designed mobile version – not a scaled-down desktop design, but a composition built from scratch for the portrait, narrow-viewport, touch-interaction context of smartphone browsing.

▸ Mobile Website Banner Sizes

Banner Type

Mobile Width

Mobile Height

Notes

Hero Banner (full-screen)

375–428 px (100% viewport)

600–812 px

Portrait composition required; separate asset from desktop; safe zone in centre 80%

Hero Banner (above-fold slim)

375–428 px (100% viewport)

300–500 px

Text, CTA, and key visual must fit above the fold; minimum 600px viewport height

Promotional Banner (full-width)

375–428 px (100% viewport)

150–300 px

Single message; large CTA button; minimal copy

Announcement Bar

100% viewport width

40–60 px

Same as desktop; single line of text; legible at 14–16 px

In-Content Banner

100% content width

100–200 px

Full-width on mobile; avoid small floated in-content images

Footer Banner

100% viewport

200–280 px

Newsletter sign-up form must be mobile-optimised; single input field + submit preferred

▸ Mobile Display Ad Sizes (Google Ads / IAB)

Mobile Ad Format

Dimensions (px)

Max File Size

Performance Notes

Mobile Leaderboard

320 × 50

150 KB

Most common mobile ad; top/bottom placement; seamless integration

Large Mobile Banner

320 × 100

150 KB

2x height of standard mobile leaderboard; higher CTR when optimised; Google’s top 5

Medium Rectangle (mobile)

300 × 250

150 KB

Appears in mobile in-feed; highest global inventory; works across device sizes

Square (mobile)

250 × 250

150 KB

Compact format for mobile widget zones

Small Square (mobile)

200 × 200

150 KB

Affiliate and very compact mobile placements

Interstitial (full-screen)

320 × 480 or 320 × 568

150 KB

Full-screen mobile ad; appears between content states; strict frequency and placement rules

13. File Format Specifications: Which Format for Which Banner

Format

Transparency

Animation

Best For

Browser Support

Performance

WebP

Yes (alpha channel)

Yes (animated WebP)

All static and animated website banners on modern browsers

All modern browsers (Chrome, Firefox, Edge, Safari 14+)

30–35% smaller than JPG at equivalent quality; preferred format for website banners

JPG / JPEG

No

No

Photographic banners without transparency; widest legacy support

Universal (all browsers)

Good quality-to-size ratio; quality setting 75–85% optimal; use as WebP fallback

PNG-8

No (index transparency)

No

Simple graphics, logos, flat-colour illustrations with limited palette

Universal

Smaller than PNG-24 for flat graphics; use for simple sidebar ad graphics

PNG-24

Yes (full alpha transparency)

No

Logos on variable backgrounds; complex graphics requiring transparency

Universal

Larger than JPG for photography; use only when transparency is genuinely needed

GIF

Yes (1-bit transparency)

Yes (frame animation)

Simple looping animations; limited colour animated banners

Universal

Max 256 colours; use only when animated WebP is not viable; large files for complex animation

SVG

Yes

Yes (CSS / SMIL animation)

Icon overlays within banner compositions; logo elements; simple geometric graphics

All modern browsers (not IE8 and below)

Infinitely scalable; very small file size; ideal for brand elements within banner compositions

MP4 + WebM

No

Yes (video)

Video background hero banners; looping video sections

MP4: universal; WebM: Firefox + Chrome

Keep under 3 MB for 5–15 second loop; autoplay muted required; poster image fallback essential

AVIF

Yes

No

Next-generation still image format; further file size reduction over WebP

Chrome, Firefox, Edge (Safari partial)

50% smaller than JPG; slightly less browser support than WebP; consider for future-proofing

14. File Size Limits: Platform Requirements and Performance Targets

File size limits for banners fall into two categories: hard limits imposed by platforms (which will reject or fail to serve files exceeding them) and performance targets that are technically not enforced but that directly affect user experience, Core Web Vitals scores, and conversion performance. Both matter – and the performance targets are, in many cases, more commercially important than the platform limits.

Banner Context

Platform Hard Limit

Recommended Performance Target

Why It Matters

Google Display Ads (all sizes)

150 KB per creative (all formats)

Under 100 KB ideally

Files over 150 KB are rejected by Google Ads and will not serve

Website hero banner (desktop)

No platform limit

Under 200 KB

Each 100 KB above this adds approximately 0.1–0.3 seconds to LCP on a 4G connection

Website hero banner (mobile)

No platform limit

Under 100 KB

Mobile connections are slower; this target is especially important for Indian mobile audiences on 4G

Promotional banner (full-width)

No platform limit

Under 150 KB desktop; under 80 KB mobile

Lower engagement value than hero means visitor may leave before the promotional banner loads

Sidebar banner (display / editorial)

150 KB (GDN); no limit (editorial)

Under 80 KB

Sidebar banners load alongside main content; heavy sidebars degrade the main content experience

In-content banner

No platform limit

Under 100 KB

Loads in the reading path; excessive weight is particularly noticeable as a mid-content loading delay

Video hero banner (loop)

No platform limit

Under 3 MB for 5–15 second loop

Video files load sequentially; the poster image must appear before the video loads

Animated GIF banner

150 KB (GDN); no limit (editorial)

Under 500 KB

GIFs are inefficient; prefer animated WebP or CSS animation for editorial use

Squarespace banners

No platform limit

Under 500 KB (Squarespace recommendation)

Squarespace documentation explicitly recommends under 500 KB to avoid slow-loading website

Shopify banners

20 MB technical max

Under 500 KB desktop; under 200 KB mobile

Shopify stores serve globally and across mobile connections; practical limits well below the technical maximum

15. Aspect Ratio Reference: Designing for Proportional Accuracy

Aspect ratio – the proportional relationship between a banner’s width and height – is as important as the absolute pixel dimensions, because it determines how the banner appears when scaled across different screen sizes and resolutions. Designing a banner at the correct aspect ratio ensures that when it is scaled up (for retina displays) or scaled down (for mobile), the proportions are preserved without unexpected cropping or letterboxing.

Aspect Ratio

Decimal Equivalent

Common Banner Applications

CMS / Platform Most Associated

16:9

1.78:1

Full-screen hero banners; video backgrounds; Shopify slideshow banners

Universal – most common widescreen desktop ratio

2:1

2:1

Standard Shopify hero (2048×1024); wide promotional banners

Shopify (recommended ratio for most themes)

3:1

3:1

Slim hero banners; category page headers; wide promotional sections

E-commerce category pages; blog headers

3.2:1

3.2:1

Standard full-width hero at 1920×600 px

WordPress; Squarespace Large Rectangle (1500×500)

8:1

8.1:1

Leaderboard ad (728×90)

Google Display Network; IAB standard

4:1

4:1

Large Leaderboard (970×90)

Premium publisher headers; Google Display Network

3.88:1

3.88:1

Billboard (970×250)

Premium homepage placements; IAB large format

6:1 (approx)

6.4:1

Announcement bar (typical)

All CMS platforms; site-wide notification

4:3

0.75:1 (portrait)

Mobile hero images (portrait)

Mobile hero; Shopify mobile banner

1:2

0.5:1 (portrait)

Wide Skyscraper (160×600)

Sidebar display ads; IAB standard

1:2 (square approx)

1:1

Product images; square social ads

Shopify product images; Instagram square banners

2:3

0.67:1 (portrait)

Mobile hero (800×1200 or 375×600)

Mobile-specific hero assets; portrait smartphone screens

16. The Complete Website Banner Sizes Cheat Sheet

The following table consolidates the most-used banner sizes across all categories into a single quick-reference cheat sheet. Bookmark this section for use at the start of any banner design project.

Banner Type

Desktop Size (px)

Mobile Size (px)

Format

Max File Size

Aspect Ratio

Hero Banner (full-screen)

1920 × 1080

800 × 1200

WebP + JPG fallback

200 KB desktop / 100 KB mobile

16:9 desktop / 2:3 mobile

Hero Banner (standard)

1920 × 600–800

375 × 500–700

WebP + JPG fallback

200 KB desktop / 100 KB mobile

3:1 to 2.4:1

Shopify Hero Banner

2048 × 1024

1200 × 1600

JPG or WebP

500 KB desktop / 200 KB mobile

2:1 desktop / 3:4 mobile

Squarespace Hero

2500 × 1500

Auto-scaled

JPG or PNG

Under 500 KB

5:3

Promotional Full-Width

100% vp × 200–400

100% vp × 150–300

WebP or JPG

150 KB desktop / 80 KB mobile

3:1 to 5:1

Announcement Bar

100% vp × 40–60

100% vp × 40–60

CSS / SVG preferred

N/A (CSS)

6:1 approx

Sidebar Medium Rectangle

300 × 250

Full-width in-feed

WebP or PNG

80 KB

6:5

Sidebar Half-Page

300 × 600

Full-width in-feed

WebP or PNG

100 KB

1:2

Sidebar Wide Skyscraper

160 × 600

Hidden on mobile

WebP or PNG

80 KB

4:15 (approx 1:3.75)

In-Content Banner

600–800 × 150–250

100% content width

WebP or JPG

100 KB

4:1 approx

Event / Countdown Banner

100% vp × 300–500

100% vp × 250–400

WebP or JPG + CSS timer

150 KB

Variable

Footer Banner

100% vp × 200–350

100% vp × 200–280

WebP or JPG

120 KB

4:1 to 5:1

GDN Medium Rectangle

300 × 250

300 × 250 (mobile in-feed)

JPG, PNG, or GIF

150 KB (hard limit)

6:5

GDN Leaderboard

728 × 90

N/A (desktop only)

JPG, PNG, or GIF

150 KB (hard limit)

8:1

GDN Half-Page

300 × 600

N/A (desktop only)

JPG, PNG, or GIF

150 KB (hard limit)

1:2

GDN Large Rectangle

336 × 280

336 × 280 (mobile in-feed)

JPG, PNG, or GIF

150 KB (hard limit)

6:5 approx

GDN Mobile Leaderboard

N/A (mobile only)

320 × 50

JPG, PNG, or GIF

150 KB (hard limit)

6.4:1

GDN Large Mobile Banner

N/A (mobile only)

320 × 100

JPG, PNG, or GIF

150 KB (hard limit)

3.2:1

GDN Wide Skyscraper

160 × 600

N/A (desktop only)

JPG, PNG, or GIF

150 KB (hard limit)

4:15 approx

Video Hero Background

1920 × 1080

Poster image fallback

MP4 + WebM

Under 3 MB (video)

16:9

17. Do's and Don'ts of Banner Sizing and Specification

DO THIS

DO NOT DO THIS

Create separate desktop and mobile banner image assets. A 1920×1080 px desktop hero and a 800×1200 px portrait mobile hero serve entirely different compositional needs. Never attempt to serve a single wide landscape image across both orientations.

Upload a single desktop-sized banner image and rely on CSS to scale or crop it for mobile. The result is a tiny image strip on mobile where no content is visible, or an awkward crop that removes the key visual element. This is the single most common banner sizing mistake in e-commerce.

Use WebP format for all website banner images, with JPG fallback for older browser compatibility. WebP delivers 30–35% smaller file sizes at equivalent quality, directly reducing page load time and improving Core Web Vitals LCP scores.

Upload uncompressed PNG or TIF files as website banner images. These formats are intended for print and editing, not web delivery. An uncompressed PNG hero banner can exceed 10 MB – a file size that will cause the hero to fail to load before visitors scroll past it on any mobile connection.

Compress all banner images to under 200 KB for desktop and under 100 KB for mobile before uploading. Use TinyPNG, ShortPixel, ImageOptim, or Squoosh. Unoptimised banners are a primary cause of poor Core Web Vitals LCP scores and slow page loads that increase bounce rate.

Upload full-resolution hero images without compression and rely on the CMS to optimise them. While some CMS platforms (Shopify, Wix) auto-compress images, the output quality and file size reduction varies unpredictably. Manual pre-compression with a dedicated tool gives you control over quality and file size output.

Use the IAB-standard dimensions (300×250, 728×90, 300×600, 160×600, 320×50) for all Google Display ad creatives. These sizes provide maximum inventory access, best delivery performance, and access to the highest-volume and highest-quality placement slots.

Design display ad creatives in non-standard dimensions that are not in the IAB-approved list. Non-standard sizes reduce inventory eligibility, may be rejected by the ad platform, or may be distorted through automatic resizing by the ad network. Non-standard sizes also have extremely limited placement availability.

Keep all Google Display ad creative files strictly under 150 KB. This is a hard platform limit imposed by Google Ads. Files exceeding 150 KB will be rejected and will not serve. Design within this limit from the start rather than attempting to compress a finished creative down to the limit at the end.

Attempt to serve Google Display ad creatives above 150 KB by splitting the design across multiple files or using workarounds. The 150 KB limit applies per creative file, is enforced at upload, and there is no legitimate workaround. Design efficiently from the beginning with this limit as a creative constraint.

Design at the correct aspect ratio for the intended placement. A 16:9 full-screen hero, a 2:1 Shopify hero, and a 1:2 sidebar half-page ad each have their proportions defined by the placement context. Designing at the wrong aspect ratio means the image will be cropped or letterboxed when served.

Design banners at arbitrary dimensions and then resize them to the target size at the end of the process. Resizing a design that was not built at the correct aspect ratio produces distortion, cropping of important visual elements, or letterboxing. Specify the correct pixel dimensions before beginning the design work.

Specify alt text for all website banner images. Alt text is read by screen readers for accessibility compliance and provides search engines with context about the image content for image SEO. According to TinyIMG’s guide, keep alt text under 100 characters. Do not include keywords artificially – describe what the image shows.

Upload banner images without alt text. Missing alt text is an accessibility failure (WCAG 2.1 requirement) and a missed SEO opportunity. Google’s image search can rank banner images with descriptive alt text for relevant queries, providing an additional source of organic traffic.

Never apply lazy loading to the hero banner image. The hero is always visible at page load and must render immediately. Use loading=’eager’ or omit the loading attribute for hero images. According to Hyperspeed’s guide, lazy loading the hero delays its rendering and worsens the LCP score.

Apply lazy loading indiscriminately to all images on the page, including the hero banner. Lazy loading is appropriate for images below the fold that the user may never see. Applying it to the hero – which is always in the viewport on page load – delays the most important visual on the page and significantly worsens LCP performance.

Check your CMS theme documentation for the specific image sizes registered by your theme. Most WordPress themes register custom image sizes that define the exact dimensions at which certain images will be displayed. Uploading images at these exact dimensions avoids unnecessary resizing by the CMS.

Ignore CMS-specific size recommendations and upload all banner images at the maximum possible resolution with the assumption that bigger is always better. Oversized images consume unnecessary storage, produce longer upload times, and are often resized by the CMS in ways that produce slight quality degradation from the double compression.

Provide banner images in srcset format for responsive delivery across breakpoints. A full-width hero served at 1920px to desktop, 1200px to tablet, and 768px to mobile uses significantly less bandwidth for smaller-screen users and loads faster on mobile connections – directly improving both UX and Core Web Vitals scores.

Serve a single 1920px wide image to all devices using a responsive CSS width: 100% declaration. This forces mobile devices to download a 1920px image and then display it at 375px – downloading 5 to 10 times more data than necessary, with no visual quality benefit at mobile scale.

18. Frequently Asked Questions

Q1: What is the standard website banner size?

A: There is no single standard website banner size because banner dimensions depend on the banner's placement, the website's layout, the CMS or ad platform, and the target device. The most widely used website hero banner size is 1920 x 1080 pixels for desktop at a 16:9 aspect ratio, with a separate mobile image at 800 x 1200 pixels or 375 x 600 pixels in portrait orientation. For Google Display advertising, the most used standard banner sizes are the 300x250 Medium Rectangle and 728x90 Leaderboard. For sidebars, the 300x250 Medium Rectangle and 160x600 Wide Skyscraper are the dominant formats. The correct answer to 'what size should my banner be?' is always determined by the specific placement context, and the tables in this guide provide the specific answers for each context.

Q2: What is the best file format for a website banner?

A: WebP is the recommended file format for all website banner images on modern browsers. According to ShortPixel's banner dimensions guide, the best format for photo banners is JPEG or WebP/AVIF. WebP delivers 30 to 35% smaller file sizes than equivalent-quality JPG images, directly reducing page load time and improving Core Web Vitals LCP scores. Always provide a JPG fallback for browsers that do not support WebP (primarily older Safari versions). For banners requiring transparency - logos on variable backgrounds or graphical overlay elements - use PNG-24, as WebP with transparency has slightly variable browser support in older environments. For animated banners, animated WebP or CSS animation is preferable to GIF for modern browsers; for display ads where format support is guaranteed, animated GIF is the most universally compatible animated format.

Q3: What is the maximum file size for Google Display ads?

A: According to The Brief.ai's banner sizes guide, BannerBoo's IAB standards guide, and Google's own documentation, the maximum file size for Google Display Network ad creatives is 150 KB per creative, regardless of the dimensions or format. This hard limit applies to all uploaded static images, animated GIFs, and HTML5 creatives. Files exceeding 150 KB will be rejected at upload and will not serve. Responsive Display Ads (RDAs), which are assembled by Google from individual assets (images, headlines, descriptions, and logos) rather than a pre-designed creative file, are not subject to the 150 KB file size limit on the assembled creative, but each individual asset uploaded for RDA must still meet Google's individual asset size requirements.

Q4: What size hero banner should I use for Shopify?

A: According to Section Store's Shopify hero banner guide and PageFly's Shopify banner size guide, the recommended Shopify hero banner size is 2048 x 1024 pixels (2:1 aspect ratio) for desktop. The recommended mobile size is 1200 x 1600 pixels in portrait orientation. Section Store recommends using themes that support separate mobile and desktop hero images, serving a wide landscape image to desktop users and a tall portrait image to mobile users. The 1920 x 1080 px (16:9) and 1600 x 500 px (slim hero) are also widely used depending on the specific Shopify theme and the desired hero height. Shopify's technical maximum image size is 4472 x 4472 pixels at up to 20 MB, but practical performance targets are under 500 KB for desktop and under 200 KB for mobile.

Q5: What is the Squarespace banner size?

A: According to SEOSpace's Squarespace banner size guide, Squarespace banner sizes are categorised as: Mega View (2500 x 1500 pixels), Large Rectangle (1500 x 500 pixels), Medium Rectangle (750 x 250 pixels), and Wide Skyscraper (150 x 500 pixels). For hero banners specifically, Squarespace recommends uploading images at least 2500 pixels wide to ensure sharpness after the platform's automatic resizing and compression. Squarespace will scale the image to fit the template's designated section dimensions, but a larger source image ensures the output is sharp at any display size. The file size should be kept under 500 KB - Squarespace's documentation explicitly cites this as the threshold for avoiding slow-loading pages.

Q6: What are the top-performing Google Display ad sizes?

A: According to BannerSnack's Google Ads sizes guide, Directive Consulting's analysis, and Google's own performance data, the five consistently top-performing Google Display ad sizes are: 300x250 (Medium Rectangle) - the most versatile globally with the highest inventory availability across desktop and mobile; 336x280 (Large Rectangle) - the larger version of the medium rectangle with more creative space; 728x90 (Leaderboard) - the classic horizontal desktop format placed above content; 300x600 (Half Page) - the fastest-growing format with strong viewability and premium placement access; and 320x50 (Mobile Leaderboard) - essential for mobile-first campaigns. A sixth format, the 320x100 Large Mobile Banner, is named by Google as one of its top performers specifically for mobile campaigns. Starting with these six sizes provides access to the highest-volume inventory on the Google Display Network.

Q7: What is the announcement bar size?

A: Announcement bars - the narrow, site-wide banners that appear above the navigation at the top of every page - are typically 40 to 60 pixels tall and 100% of the viewport width. This height accommodates a single line of text at 14 to 16px font size, an optional close button, and an optional CTA link. Announcement bars above 80 pixels in height begin to make the site header feel crowded and may push the navigation and hero content further down the page than most visitors expect. The content within an announcement bar must be a single sentence - the height constraint makes multiple sentences illegible. Announcement bars are typically implemented in pure CSS or via CMS notification bar widgets rather than as image files, which means they load at essentially zero file size and are always immediately visible regardless of connection speed.

Q8: How do I create a banner for mobile?

A: Creating a mobile banner requires a fundamentally different approach from resizing a desktop banner. Start from a 375 x 600 pixel canvas (the common portrait smartphone viewport) rather than scaling down from 1920 pixels. Place the headline at the top of the composition at a minimum 28 to 32px font size. Place the CTA button with a minimum 48 x 48 pixel tap target and visible size of at least 44 pixels tall. Use a portrait-format image crop that maintains the visual impact of the subject in the narrow vertical composition - this typically means a tighter crop than the desktop version. Keep the file size under 100 KB using WebP format. Test the banner on a real smartphone at the actual pixel dimensions before publishing - never evaluate mobile banner appearance on a scaled desktop preview.

Q9: What is srcset and how does it help with banner sizes?

A: The srcset HTML attribute allows the browser to select the most appropriate image file for the visitor's specific screen size and resolution rather than downloading a single fixed-size image. For website banners, srcset allows you to provide three or four versions of the same banner at different widths: for example, the hero image at 375px, 768px, 1200px, and 1920px. The browser automatically selects the smallest file that will look sharp on the visitor's screen - a mobile user downloads the 375px image rather than the full 1920px file, saving 80 to 90% of the download bandwidth. According to Cronyxdigital's hero image guide, if the website is responsive, the hero image dimensions will adjust to fit the device - and srcset is the HTML mechanism that makes this responsive image serving technically possible. Most modern CMS platforms (WordPress, Shopify, Squarespace, Webflow) generate srcset variants automatically when images are uploaded, but the source image must be provided at sufficient resolution for the largest variant to be generated at full quality.

Q10: Does banner image size affect SEO?

A: Yes, directly and indirectly. The hero banner is typically the Largest Contentful Paint (LCP) element on the page - the metric Google's Core Web Vitals uses to assess loading performance. According to TinyIMG's image size guide, ensuring images are properly sized can lead to better page speed, which Google considers a ranking factor. A hero banner image that is too large and takes more than 2.5 seconds to render fails the LCP 'Good' threshold and receives a reduced Core Web Vitals score, which can negatively affect Google Search ranking. Indirectly, slow-loading banners increase bounce rate and reduce average session duration - both negative engagement signals to Google's quality assessment algorithms. Adding descriptive alt text to banner images supports image SEO and accessibility. And correctly sized, fast-loading banners improve mobile user experience - a specific ranking factor in Google's mobile-first indexing approach.

Need Pixel-Perfect Banner Designs in Every Size and Format?

At Futuristic Marketing Services, our design team produces website banners, hero sections, promotional creatives, and display ad sets in all IAB-standard and platform-specific sizes – correctly specified, optimized for performance, and delivered with source files for every placement.

→  Free Consultation: futuristicmarketingservices.com/contact-us

→  Graphic Design Services: futuristicmarketingservices.com/services/graphic-designer-in-indore

Share this post :
Picture of Devyansh Tripathi
Devyansh Tripathi

Devyansh Tripathi is a digital marketing strategist with over 5 years of hands-on experience in helping brands achieve growth through tailored, data-driven marketing solutions. With a deep understanding of SEO, content strategy, and social media dynamics, Devyansh specializes in creating results-oriented campaigns that drive both brand awareness and conversion.

All Posts

Table of Contents

Popular Categories

Newsletter

Get free tips and resources right in your inbox,

Latest Post