Website Banner Sizes & Specifications Guide

Futuristic Marketing Services » Graphic Designing » Website Banner Sizes & Specifications Guide

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. – 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

Every banner sizing decision flows from the interaction of these three variables rather than any single factor in isolation. A sidebar ad on a content-heavy news site has entirely different requirements than a hero banner on a mobile-first e-commerce store, even though both are “website banners.” Getting the specification right means identifying the correct answer for all three variables before opening the design tool.

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

Hero banners are the most commercially significant images on any website – they are the first visual a visitor sees, and on most pages they are the Largest Contentful Paint element that Google measures for Core Web Vitals. Because screen widths, CMS themes, and device orientations vary so widely, hero banner specifications are broken into universal size standards and platform-specific requirements, both of which are covered in the tables below.

▸ 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’s Shopify hero banner guide 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’s hero image sizing guide recommends 1600×500 px as the
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

Each CMS platform imposes its own image handling constraints – maximum upload dimensions, automatic compression behaviour, and whether separate mobile and desktop images are supported. Designing to the platform-specific sizes in this table avoids quality degradation caused by the platform resizing or re-compressing an image that was not supplied at the expected dimensions.

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 banner formats have remained stable precisely because they align with the IAB’s standardised ad portfolio, which most publishers have built their inventory around. Avada’s guide to effective website banner sizes provides a useful breakdown of these formats in a website design context – particularly the 160×600 Wide Skyscraper and 300×600 Half Page, which are most effective on content-heavy pages where visitors spend extended reading sessions. Choosing the right sidebar format is less about creative preference and more about matching the format to the page’s available column width and the campaign’s viewability goal.

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

Generic banner size recommendations are a starting point, but every major CMS platform has its own image handling pipeline – including automatic resizing, compression, and in some cases separate mobile image support – that makes platform-specific sizing critical. Uploading images at the dimensions defined by your specific platform avoids the double-compression quality loss that occurs when a CMS resizes an image that was not supplied at the expected dimensions.

▸ 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 cheat sheet, 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 standard 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

The shift toward larger leaderboard formats is part of a broader trend in programmatic buying. Directive Consulting’s analysis of top-performing Google Display ad sizes found that the 970×90 large leaderboard has seen a notable surge in adoption on premium publisher inventory, driven by its wider canvas relative to the standard 728×90. For most campaigns, however, the recommended starting strategy remains building creative assets across the five core IAB sizes before expanding into large-format units.

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)

Understanding which ad formats actually perform on mobile is just as important as knowing the pixel dimensions. Zeely.ai’s standard digital ad sizes guide notes that the 300×250 Medium Rectangle is the top in-content performer on mobile, while the 300×600 side rail format delivers strong viewability – and that creative refresh cadence of 2–4 weeks for top sizes prevents ad fatigue without requiring a full redesign cycle. Pairing your mobile banner dimensions with the right refresh strategy is what separates campaigns that hold performance over time from those that decay after the first week.

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

Choosing the wrong file format for a banner is one of the most common causes of avoidable quality loss and page speed problems. The format decision depends on three factors: whether the banner contains transparency, whether it needs animation, and which browsers the target audience is most likely to be using. The table below maps every major web image format to the banner context where it performs best.

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

The most common banner sizing mistakes are not obscure edge cases – they are repeated across thousands of websites and ad campaigns by designers and marketers who follow general advice without accounting for the specific technical requirements of their platform or placement. Each pairing below addresses a specific error pattern and its correct alternative, drawn from the technical requirements and performance standards covered throughout this guide.

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

The questions below address the most common points of confusion around banner sizing, format selection, and platform requirements. Each answer is drawn directly from the specifications covered in the guide sections above, providing a focused reference for the decisions that come up most often during real banner design projects.

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.

Share this post :

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