Uploading a banner image at the wrong size, in the wrong format, or at an unoptimised file weight produces one of three outcomes: visible distortion from incorrect aspect ratio rendering, quality degradation from insufficient resolution, or slow page load times that trigger Core Web Vitals failures and conversion rate decline. According to <a href=”https://shortpixel.com/blog/banner-sizes/” target=”_blank” rel=”noopener”>ShortPixel’s banner dimensions research</a>, banner size directly affects both how fast a page loads and how sharp the image renders across different device screens, two variables that have direct, measurable consequences for both user experience and search engine ranking.
This guide provides a complete, accurate, and actionable reference for every banner dimension needed in web design and digital advertising. It covers the universal framework for thinking about banner sizes, hero banner dimensions for desktop and mobile, platform-specific sizes for Shopify, WordPress, Squarespace, and WooCommerce, email header dimensions, Google Display Network ad sizes, file format specifications, file size limits by context, and the aspect ratio reference for designing proportionally accurate banners. For the design principles that govern how to use these sizes to create banners that convert, see our website banner design guide and hero banner design guide.
Key Takeaways
- There is no single universal "correct" banner size, dimensions vary by placement context (hero, sidebar, in-content), target device (desktop, tablet, mobile), and the specific platform or CMS the website uses
- Always design at 2x resolution and export at 1x display size, designing at 1x produces blurry images on high-DPI (Retina) screens that represent the majority of mobile devices used in India
- The standard full-width desktop hero banner dimensions are 1920×600 to 1920×1080px; mobile hero banners require a dedicated portrait-format design at 800×1000 to 1200px
- WebP is the correct format for all website banner images, 25–35% smaller file sizes than JPEG at equivalent quality, directly improving Core Web Vitals LCP scores and page load speed
- Platform-specific sizes vary significantly: Shopify recommends 2048×1024px, Squarespace uses 2500×1500px, and WordPress has no fixed requirement but recommends 1920px wide minimum for full-width themes
- Google Display Network banner ads must meet strict file size limits (150KB maximum per static image) and the 5 highest-performing sizes cover 90%+ of available GDN inventory
Need Banners Designed at the Correct Specifications for Your Platform?
Futuristic Marketing Services designs website banners at the exact specifications required by your platform, Shopify, WordPress, Squarespace, or custom-built, in the correct file format, at the correct resolution, and optimised for Core Web Vitals.
Get a Free Banner Design Consultation
The Universal Banner Size Framework: How to Think About Dimensions
Before consulting specific size tables, understanding the conceptual framework that governs banner sizing decisions eliminates the confusion that arises from treating every size reference as a fixed rule rather than a contextual guideline. Three variables determine every banner size: placement context, target device, and platform or ad network.
Placement context defines where the banner sits on the page and what proportion of the screen it occupies. A full-width hero banner that spans the entire viewport width requires vastly different dimensions than a sidebar banner that occupies 20% of the page width.
Target device determines which resolution and aspect ratio to design for. Desktop banners target viewports of 1280 to 1920px wide in landscape orientation. Tablet banners target 768 to 1024px wide. Mobile banners target 375 to 768px wide, almost always in portrait orientation. A design that is correct for desktop is almost never correct for mobile without significant modification.
Platform or ad network introduces additional constraints specific to the CMS, e-commerce platform, or advertising system being used. Shopify, WordPress, Squarespace, and WooCommerce each have their own image handling behaviour, which means the same visual uploaded to these platforms may render very differently if sized according to generic web standards rather than platform-specific guidelines.
Design at 2x, Export at 1x
Always design banners at twice the intended display size (2x resolution) and export at the 1x display size. If a banner will display at 600px wide, design the canvas at 1200px wide. This ensures sharp rendering on high-DPI (Retina) screens, which represent the majority of modern smartphones, including virtually all iPhones and most premium Android devices used in India, without serving unnecessarily large file sizes to standard screens.
Responsive vs Fixed-Dimension Banners
Modern websites primarily use responsive design, layouts that adapt fluidly to different screen widths rather than displaying fixed-size pages. Understanding how responsive design interacts with banner images determines which dimensions you actually need to design for.
In a responsive layout, a hero banner image is typically set to 100% container width via CSS, which means the same image stretches or shrinks to fill whatever width the user's screen provides. The design dimension you upload determines the maximum resolution at which the image displays crisply, images displayed larger than their pixel dimensions appear blurry. Designing at 1920px wide ensures that the banner is sharp on all screens up to 1920px wide, which covers the vast majority of desktop monitors in use globally.
For banners that must maintain a specific aspect ratio regardless of screen width (which is almost all banner images), the image maintains its proportions as it scales. A 1920×600px image maintains a 3.2:1 ratio whether it is displayed at 1920px, 1280px, or 375px wide. This means the composition of the image must work across all these widths, elements that are clearly legible at 1920px must also communicate at 375px, which is why separate mobile-specific image files are almost always necessary for text-heavy banners.
Hero Banner Sizes: Desktop, Mobile, and Every Variation
Platform-Specific Hero Banner Sizes
Each major CMS and e-commerce platform handles images differently due to differences in theme structure, image processing, and responsive breakpoints. Using the correct platform-specific dimensions prevents the quality issues that arise from serving incorrectly sized images to platform-specific rendering systems.
Shopify Banner Size Guide
Squarespace Banner Size Guide
WordPress Banner Size Guide
Email Header Banner Sizes
Email header banners are displayed at the top of email newsletters and promotional emails. They must be designed for email clients (Gmail, Outlook, Apple Mail) rather than web browsers, which introduces specific constraints around image size, file weight, and alt text that do not apply to website banners.
Google Display Network Ad Sizes
Google Display Network (GDN) ad banners must meet specific IAB standard display advertising unit dimensions and strict file size requirements. Unlike website banners that can be served at larger sizes, GDN ad banners have a 150KB maximum file size for all static image formats. For the complete GDN banner design guide covering design principles, creative strategy, and performance optimisation, see our Google Display ad design guide.
File Format Specifications: Which Format for Which Banner
File Size Limits and Performance Targets
File size directly determines how quickly a banner image loads, which in turn determines both conversion rate (visitors who wait too long abandon the page) and Google search ranking (through Core Web Vitals LCP scoring). The target file sizes below are based on Google PageSpeed Insights' LCP optimisation guidance and industry performance benchmarks.
Aspect Ratio Reference for Banner Design
Need Banners at the Exact Specifications for Your Platform?
Futuristic Marketing Services designs website banners for Indian businesses at the exact specifications required by every platform, Shopify, WordPress, Squarespace, Google Display, Meta, and more, in the correct format, at the correct resolution, and optimised for Core Web Vitals performance.
Get a Free Banner Specification ConsultationFrequently Asked Questions
Q. What size should a website banner be?
A. The correct size depends on the banner type and platform. For full-width desktop hero banners, the standard is 1920×600 to 1920×1080px. Mobile hero banners require a separate portrait-format image at 800×1000 to 1200px. For Shopify, the recommended hero size is 2048×1024px. For Squarespace, 2500×1500px minimum. For WordPress, size depends on the active theme but 1920px wide minimum is appropriate for full-width themes. For Google Display Network ads, the five essential sizes are 300×250, 728×90, 300×600, 336×280, and 320×50, all with a 150KB maximum file size.
Q. What is the standard hero banner size?
A. The most widely used standard for a full-width desktop hero banner is 1920×600 to 1920×800px, producing a 3.2:1 to 2.4:1 aspect ratio. This size displays correctly on all monitors up to 1920px wide (the most common desktop resolution) and provides sufficient height for a headline, sub-headline, CTA, and supporting visual without occupying the entire viewport. For a full-screen cinematic hero, 1920×1080px (16:9) fills the screen at 1920px viewport width. For mobile, a separate portrait image at 800×1000 to 1200px is required, landscape desktop banners scaled to mobile produce poor composition and legibility.
Q. What file format is best for website banners?
A. WebP is the correct format for all website banners in modern web contexts. It provides 25–35% smaller file sizes than JPEG at equivalent visual quality, which directly reduces page load times and improves Core Web Vitals LCP scores. All major CMS platforms (WordPress, Shopify, Squarespace) now support WebP delivery. For email banners, use JPEG or PNG because WebP is not universally supported in email clients. For Google Display Network ads, JPEG and PNG are the most reliable formats, WebP is accepted but JPEG remains the industry standard for GDN ad delivery.
Q. Why does banner image file size affect my Google ranking?
A. The hero banner image is almost always the LCP (Largest Contentful Paint) element on a homepage, the largest visible content element Google measures as part of Core Web Vitals. Google's LCP threshold for a passing score is 2.5 seconds. A hero image that exceeds 400–500KB and is not served with image optimisation (WebP format, srcset responsive delivery, preload link tag) routinely produces LCP scores of 3–6 seconds on mobile networks, which triggers a failing Core Web Vitals score and an associated ranking penalty. Compressing the hero image to under 200KB on desktop and under 150KB on mobile, in WebP format, is the single most impactful technical SEO improvement available for most websites.
Q. Do I need separate banner images for desktop and mobile?
A. Yes, for most hero banners and any text-heavy banner. A single landscape image designed at 1920×600px will be scaled proportionally to 375px wide on mobile, which means the image height reduces to approximately 117px, far too small for any text to remain legible and too small for a face-based visual to communicate effectively. A dedicated portrait mobile hero at 800×1000 to 1200px fills the mobile screen appropriately and allows the banner's design elements to be positioned specifically for portrait viewing. Use the HTML <picture> element or your CMS's responsive image setting to serve the desktop image to desktop viewports and the mobile image to mobile viewports.
Get Every Banner at the Right Size, Right Format, Right Performance
Futuristic Marketing Services delivers website banners at the exact specifications for every platform and context, hero banners, promotional banners, GDN ad sets, and email headers, all optimised for Core Web Vitals and delivered in the correct format for immediate publication.
See Our Graphic Design Services
