The definitive guide to Shopify banner image sizes. Learn optimal dimensions for homepage banners, collection banners, slideshow images, and theme-specific requirements for perfect display on all devices.
| Banner Type | Recommended Size | Aspect Ratio | Max File Size |
|---|---|---|---|
| Homepage Hero Banner | 2400 x 1200 px | 2:1 | 300-500 KB |
| Slideshow Banner | 2400 x 1200 px | 2:1 | 300-500 KB |
| Collection Banner | 2048 x 1024 px | 2:1 | 200-400 KB |
| Full-Width Banner | 2400 x 800 px | 3:1 | 250-400 KB |
| Mobile Banner | 1200 x 1200 px | 1:1 | 150-250 KB |
Your homepage hero banner is the first thing visitors see. It's your digital storefront window and needs to look perfect on all devices. The wrong size will result in cropping, stretching, or pixelation.
Most Shopify themes allow you to upload separate desktop and mobile banner images. Always use this feature! A desktop banner cropped for mobile often cuts off important text or products. Create two versions: landscape (2400x1200) for desktop and square (1200x1200) for mobile.
Slideshow banners rotate multiple images on your homepage. They're perfect for showcasing multiple products, promotions, or collections. However, they require extra attention to file size since multiple banners load at once.
Slideshows are one of the biggest causes of slow Shopify stores. If your slideshow has 5 slides at 800 KB each, that's 4 MB of images just for the hero section! This can increase page load time by 3-5 seconds on mobile. Always compress slideshow images to under 300 KB each, or consider using a single static hero banner instead.
Collection banners appear at the top of collection pages (like "Women's Clothing" or "Summer Sale"). They're smaller than homepage banners but still need to be high-quality and properly sized.
Different Shopify themes have slightly different banner requirements. Here are specifications for the most popular themes in 2025:
Creating the perfect banner isn't just about dimensions. You need to optimize for page speed, mobile display, and user experience. Here's how:
Use at least 2400x1200 source images. Never upscale small images - they'll look pixelated.
Keep critical text and products in the center 60% of the banner. Edges will be cropped on mobile devices.
Use our free resizer tool or TinyPNG to compress to 300-500 KB. Target 85% quality for JPG.
Convert to WebP for 25-35% smaller file size vs JPG. Shopify CDN will serve WebP automatically to supported browsers.
Include relevant keywords in ALT text for SEO: "Summer sale banner - 50% off women's dresses"
Always preview on actual mobile devices before publishing. Desktop preview doesn't show true mobile experience.
Faster page load with optimized banners
Of traffic is mobile - optimize for it
Max file size for fast loading
Stop manually resizing and optimizing banner images. AI creates perfectly sized, compressed, and optimized banners automatically - ready to upload to Shopify.
AI creates 2400x1200 desktop and 1200x1200 mobile versions automatically
Under 300 KB file size, WebP format, 85% compression - perfect for speed
AI-powered background removal, scene generation, and styling
The optimal Shopify banner size is 2400 x 1200 pixels (2:1 aspect ratio) for desktop homepage banners. For mobile, use a separate 1200 x 1200 pixel square version. Collection banners should be 2048 x 1024 pixels. Always compress to under 500 KB for fast loading.
Blurry banners are usually caused by uploading images that are too small. Shopify stretches small images to fit the banner area, causing pixelation. Always use at least 2400 x 1200 pixels for homepage banners. Also ensure you're not over-compressing - keep JPG quality at 85% or higher.
Use JPG or WebP for photo-based banners. PNG files are 3-5x larger and will slow down your store significantly. JPG at 85% quality provides excellent visual quality at 200-500 KB file size. WebP is even better - 25-35% smaller than JPG with the same quality.
Most Shopify themes (Dawn, Refresh, etc.) allow you to upload separate mobile and desktop banner images. In the theme customizer, look for "Mobile image" or "Mobile background" settings. Upload a 1200 x 1200 square version for mobile and 2400 x 1200 landscape for desktop.
Target 300-500 KB for homepage banners, 200-300 KB for collection banners, and 150-250 KB for mobile versions. Larger files (1 MB+) cause slow page loads, which increases bounce rate by 90%. Use compression tools to reduce file size without losing visual quality.
Yes, but most modern themes use similar sizes. Dawn (the default theme) uses 2400 x 1200 for hero banners. Brooklyn uses 2400 x 1600 (taller). Debut uses 2048 x 1024. Always check your theme's documentation or the theme customizer for recommended dimensions.
