Ever uploaded a banner to your Shopify store only to find it looks blurry, gets cropped in weird ways, or takes forever to load? Yeah, we've all been there. This guide breaks down exactly what dimensions you need for every type of banner, plus how to make them look amazing without slowing down your store. For a complete overview of all Shopify image dimensions, see our comprehensive image sizes guide.
| 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 |
Think of your homepage hero banner as the window display of a boutique shop. It's literally the first thing people see when they land on your store. Get it right, and you've got their attention. Get it wrong? Well, nothing says "unprofessional" quite like a blurry, stretched, or awkwardly cropped banner.
Here's something most people don't realize: most Shopify themes let you upload completely separate images for mobile and desktop. Use this! Seriously, don't just let your desktop banner get auto-cropped for mobile. That's how you end up with half your product cut off or your headline reading "Summer Sa" because "le" got cropped out. Make two versions from the start - landscape for desktop, square for mobile. Your mobile visitors (which is probably 70% of your traffic) will thank you.
Slideshows are great when you've got multiple promos or collections to show off. Summer sale? Holiday collection? New arrivals? Rotate through them. But here's the catch - every slide adds to your page load time. Add five massive banner images and you've basically just asked your visitors to wait around while 5 MB of images slowly download. Not great. For detailed slideshow optimization techniques and best practices, check out our complete Shopify slideshow image size guide.
Each slide contributes to total page weight. Maintaining 250-350 KB per slide prevents performance degradation even with multiple images. Lazy loading defers non-visible slides, loading only the initial view immediately while others load as needed.
Note: Consistent dimensions across all slides prevent layout shifts during transitions, maintaining visual stability.
Real talk: slideshows are one of the main reasons Shopify stores load slowly. Do the math - 5 slides at 800 KB each equals 4 MB just for your homepage hero section. On mobile? That could mean a 3-5 second wait before anything loads. And you know what happens when people wait 3-5 seconds? They leave. Keep each slide under 300 KB, or honestly, just use a single killer static banner instead.
Collection banners are those images that sit at the top of your category pages - you know, "Women's Clothing," "Summer Sale," that sort of thing. They're not quite as big as your homepage hero, but they still matter a lot. After all, someone just clicked through to browse a specific category. Don't disappoint them with a pixelated mess. For complete collection image specifications including thumbnail sizes, see our Shopify collection image size guide.
Here's where things get a bit annoying: not all Shopify themes use the exact same banner dimensions. Most are pretty similar, but some have their own ideas about aspect ratios. Let's break down the most popular themes so you know what you're working with:
So you've got the right dimensions. Great! But that's honestly just half the battle. A 2400x1200 banner that's 3 MB in size will still tank your page speed. And a banner with your sale text placed at the edge? Mobile users won't see it. Let's talk about how to actually optimize these things:
Always start with at least 2400x1200. I can't stress this enough - don't try to upscale a small image and hope for the best. All you'll get is a blurry mess.
Imagine the edges of your banner getting sliced off. Because on mobile, they will be. Keep anything important - text, products, faces - in that center 60% zone where it's safe.
Never, ever upload the raw file straight from your designer or photographer. Run it through our free resizer tool or TinyPNG first. Get it down to 300-500 KB. Sweet spot for JPG quality? 85%.
WebP is basically magic - it's 25-35% smaller than JPG with no visible quality loss. Even better? Shopify's CDN automatically serves WebP to browsers that support it, so you don't have to worry about compatibility.
Don't skip this! Write actual descriptive ALT text like "Summer sale banner - 50% off women's dresses" instead of "banner1.jpg". Google reads this stuff.
Pull out your phone and actually look at it. That desktop preview in Shopify? It's not showing you what your customers really see. Check it on an iPhone, check it on Android. Both.
Faster page load with optimized banners
Of traffic is mobile - optimize for it
Max file size for fast loading
File sizes exceeding 1 MB introduce 3-5 second page delays on mobile connections. Research indicates 53% of mobile visitors abandon sites with load times over 3 seconds, directly impacting revenue.
Headlines positioned near banner edges display correctly on desktop but get cropped on mobile viewports, creating fragmented messages that reduce call-to-action effectiveness.
Varying aspect ratios across pages (2:1 homepage, 16:9 collections, 1:1 blog) creates visual inconsistency that undermines brand professionalism.
PNG compression for photos produces files 3-5x larger than equivalent JPG quality. Reserve PNG for graphics requiring transparency.
Tired of spending hours resizing, cropping, and compressing banner images? Let AI handle it. Perfect dimensions, optimized file sizes, professional results - all automatic.
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
For your homepage hero banner on desktop, go with 2400 x 1200 pixels (that's a 2:1 aspect ratio). Then make a separate 1200 x 1200 pixel square version for mobile - trust me, this matters. Collection banners work best at 2048 x 1024 pixels. Whatever you do, compress everything to under 500 KB so your page actually loads at a reasonable speed.
Nine times out of ten, it's because your image is too small and Shopify is stretching it to fill the space. That's what causes that blurry, pixelated look. Start with at least 2400 x 1200 pixels - no smaller. Also, don't go crazy with compression. Keep your JPG quality at 85% or higher, or you'll compress away all the detail.
For photo banners? JPG or WebP, every time. PNG files are 3-5x bigger than they need to be, which means your store loads way slower. A JPG at 85% quality looks great and clocks in at 200-500 KB. But honestly? WebP is the real winner - it's 25-35% smaller than JPG with identical quality. Use that if you can.
Good news - most modern Shopify themes (Dawn, Refresh, and others) have built-in options for this. Head to your theme customizer and look for something like "Mobile image" or "Mobile background" in the banner settings. Upload your 1200 x 1200 square version there, and your 2400 x 1200 landscape version as the main banner. Done.
Aim for 300-500 KB on homepage banners, 200-300 KB for collection banners, and keep mobile versions between 150-250 KB. Why? Because anything over 1 MB is going to tank your load time, and studies show that can increase your bounce rate by 90%. That's not a typo. Use compression tools - you can shrink file size without making your images look worse.
Yeah, they do, but thankfully most are in the same ballpark. Dawn (the default) wants 2400 x 1200. Brooklyn likes them a bit taller at 2400 x 1600. Debut goes with 2048 x 1024. Your best bet? Check your specific theme's documentation or just look at the theme customizer when you're uploading - it usually tells you the recommended size right there.
