Skip to main content

Shopify Image Sizes: Complete Reference Guide 2025

Look, I get it - figuring out Shopify image sizes can feel like a never-ending puzzle. Should product photos be 2000px or 3000px? What about banners? Collections? Don't worry. This guide covers every single image size you'll need for your store, all in one place.

Complete Shopify Image Size Reference

Image TypeRecommended SizeAspect RatioFormatNotes
Product Images2048 x 2048 px1:1JPG, WebPMain product photos with zoom capability
Banner Images (Desktop)1200 x 400 px3:1JPG, WebPHomepage and page banners
Banner Images (Mobile)800 x 600 px4:3JPG, WebPMobile-optimized banners
Collection Images (Square)1024 x 1024 px1:1JPG, WebPCollection thumbnails and grids
Collection Banners2800 x 1000 px2.8:1JPG, WebPFull-width collection page headers
Blog Featured Images1920 x 1080 px16:9JPG, WebPBlog post headers and thumbnails
Blog Thumbnails1200 x 800 px3:2JPG, WebPBlog listing pages
Slideshow Images1600 x 1000 px16:10JPG, WebPHomepage hero carousels
Hero Images1920 x 1080 px16:9JPG, WebPFull-width hero sections
Header Images1280 x 720 px16:9JPG, WebPPage headers and sections
Logo450 x 200 pxVariesPNG, SVGHeader logo (transparent background)
Logo (Small)100 x 100 px1:1PNG, SVGMobile header and email
Favicon32 x 32 px1:1PNG, ICOBrowser tab icon (auto-resized)
Social Sharing (OG)1200 x 628 px1.91:1JPG, PNGFacebook, Twitter, LinkedIn previews
Instagram Stories1080 x 1920 px9:16JPG, PNGInstagram Stories sharing
Email Marketing600 x 400 px3:2JPG, PNGEmail header images
Thumbnail Images400 x 400 px1:1JPG, WebPSmall preview images

Product Images

2048x2048 for zoom

Banners & Heroes

1200x400 desktop

Collections & Blogs

Multiple sizes

Social Sharing

1200x628 OG images

Product Images

Recommended: 2048 x 2048 pixels

  • Perfect for zoom: High enough resolution for customers to see product details
  • Retina ready: Looks sharp on high-DPI displays (iPhone, iPad, MacBook)
  • Square aspect ratio: Displays consistently across all pages
  • Format: JPG or WebP for best compression (under 500 KB)

Here's the thing about product images - they're literally the most important visuals in your entire store. Sure, Shopify technically supports images up to 5000 x 5000 pixels, but that's overkill. You'll end up with massive files that slow everything down. The sweet spot? 2048x2048. It's high enough resolution that customers can zoom in and see details (which builds trust), but not so big that your pages crawl. Anything smaller than 1024x1024 starts looking pixelated on modern screens, and nobody's buying from a store with blurry product photos. For the full breakdown, check out our complete Shopify product image size guide.

Pro Tip: Upload 5-8 images per product: 1 main photo, 2-3 additional angles, 1-2 detail shots, and 1-2 lifestyle images. Products with multiple images convert significantly better.

Read Complete Product Image Guide

Banner & Hero Images

Desktop Banners

1200 x 400 px

Aspect Ratio: 3:1

  • • Homepage banners
  • • Collection page headers
  • • Promotional sections
  • • Announcement bars

Mobile Banners

800 x 600 px

Aspect Ratio: 4:3

  • • Mobile-optimized layout
  • • Portrait orientation
  • • Better text readability
  • • Faster mobile loading

Banners are tricky because they need to look great on a 27-inch desktop monitor AND a 5-inch phone screen. That's a tall order. Most Shopify themes work best with a 3:1 ratio for desktop (1200x400), which gives you that nice wide cinematic look. But here's what a lot of people miss - mobile is different. Your beautiful horizontal banner can look squished on a phone. That's why 800x600 (4:3 ratio) works better for mobile, or you can create separate versions using Shopify 2.0 sections. Want to dive deeper? Our Shopify banner size guide has you covered.

Hero Image Sizes

  • Full-width hero: 1920 x 1080 px (16:9 ratio)
  • Standard hero: 1600 x 1000 px (16:10 ratio)
  • Compact hero: 1280 x 720 px (16:9 ratio)

Collection Images

Square Collection Images

1024 x 1024 px

Aspect Ratio: 1:1

  • • Collection grid thumbnails
  • • Collection page images
  • • Category tiles
  • • Navigation menus

Collection Banners

2800 x 1000 px

Aspect Ratio: 2.8:1

  • • Full-width collection headers
  • • Category page banners
  • • Large promotional images
  • • High-resolution displays

When it comes to collections, consistency is your best friend. Nothing looks more amateur than collection tiles that are all different sizes, getting weirdly cropped in random ways. Square images (1024x1024) are perfect for those clean grid layouts you see on well-designed stores. But if you're going for a big, bold collection page header? That's where the wide banner format (2800x1000) really shines. It gives you that magazine-spread feeling. The key is picking one approach and sticking with it throughout your store. Our collection image size guide breaks down all the options.

Complete Collection Image Guide

Blog Post Images

Featured Image: 1920 x 1080 px (16:9)

Your featured image does double duty - it's the hero at the top of your blog post AND what shows up when someone shares your post on social media. That's why getting the size right matters. The 16:9 ratio is basically the universal standard at this point, working beautifully on everything from phones to 4K monitors.

  • Displays beautifully on all devices
  • Perfect for Facebook and Twitter sharing
  • Matches YouTube and video thumbnails

Blog Thumbnails: Use 1200 x 800 px (3:2 ratio) for blog listing pages. This smaller size loads faster while maintaining quality.

Complete Blog Image Guide

Slideshow Images

Recommended: 1600 x 1000 px (16:10)

Slideshows are one of those features that can either look amazing or tank your site speed. The images need to be wide and impactful for desktop visitors, but you can't just throw 5MB files at people and expect them to wait around while everything loads. It's a balancing act.

Alternative Sizes:

  • • 1920 x 1080 px (16:9)
  • • 2000 x 600 px (wide)
  • • 1200 x 600 px (compact)

Best Practices:

  • • Keep text to the side (safe zones)
  • • Compress under 300 KB each
  • • Limit to 3-5 slides
  • • Use WebP format
Complete Slideshow Guide

Logo & Branding Images

Your logo is everywhere - and I mean everywhere. Header, footer, emails, mobile menu, browser tabs. So yeah, it needs to look sharp in all those contexts. The good news is that once you get the sizing right, you're pretty much set. Just make sure you're using the right format (PNG or SVG) with a transparent background. Nobody likes those awkward white boxes around logos. For all the nitty-gritty details on making your logo pixel-perfect, our Shopify logo requirements guide has everything you need.

Header Logo

450 x 200 px

  • • PNG with transparency
  • • SVG for scalability
  • • Horizontal layout
  • • Under 100 KB

Small Logo

100 x 100 px

  • • Mobile header
  • • Email templates
  • • Square or icon version
  • • PNG transparent

Favicon

32 x 32 px

  • • Browser tab icon
  • • PNG or ICO format
  • • Simple design
  • • Auto-resized by Shopify

Pro Tip: SVG is secretly the best format for logos. Why? Because it's vector-based, meaning it scales infinitely without getting blurry - and the file size is usually tiny. Win-win. Oh, and don't forget to actually set up your Shopify favicon. It's a small detail, but it makes your store look legit.

Social Sharing Images

Open Graph Image: 1200 x 628 px

Ever shared a link and noticed that preview card that pops up with an image? That's your Open Graph image at work. It's what appears when someone shares your store on Facebook, Twitter, LinkedIn - basically everywhere. And honestly? It's one of the most underrated images in your entire marketing toolkit. Get this right, and your links look professional and clickable. Get it wrong, and you're showing up with broken images or weird crops.

What it's used for:

  • Facebook link previews
  • Twitter cards
  • LinkedIn post previews
  • Slack and Discord embeds

Design tips:

  • • Include your logo and brand colors
  • • Add text overlay for context
  • • Avoid small text (hard to read)
  • • Test with Facebook Debugger
  • • Keep under 1 MB file size

Instagram Stories

1080 x 1920 px

Vertical 9:16 aspect ratio for Instagram Stories sharing and mobile-first content.

Email Marketing

600 x 400 px

Header images for email campaigns. Keep under 200 KB for fast email loading.

File Formats Explained

WebP (Best)

  • 30% smaller than JPG
  • Supports transparency
  • Better quality than JPG
  • Faster page loading

Recommended for: All product images, banners, collections (2025 best practice)

JPG (Standard)

  • Universal support
  • Good compression
  • No transparency
  • Lossy compression

Recommended for: Product photos, banners, blog images (safe fallback)

PNG

  • Supports transparency
  • Lossless quality
  • 3-5x larger files
  • Slower loading

Recommended for: Logos, icons, graphics with transparency

SVG (Scalable Vector Graphics)

SVG deserves its own callout because it's just... different. Unlike JPG or PNG (which are made of pixels), SVG is vector-based. Think of it like the difference between a photo and a drawing made with math. You can scale it to any size - billboard or business card - and it stays crisp.

Use SVG for: Logos, icons, simple illustrations. Don't use SVG for: Photographs or complex images (it won't work well and the files get huge).

Image Optimization Best Practices

1. Resize Before Uploading

I see this mistake all the time - people upload massive 5000x5000 pixel images straight from their camera and just hope Shopify will handle it. It will, but your site will load like molasses. Do yourself (and your customers) a favor: resize before uploading. Your pages will load 2-3x faster.

Use Free Shopify Photo Resizer

2. Compress Without Losing Quality

Target file sizes:

  • Product images: Under 500 KB (aim for 200-300 KB)
  • Banner images: Under 300 KB
  • Blog images: Under 400 KB
  • Thumbnails: Under 100 KB

Tools: TinyPNG, ImageOptim, Squoosh, or Shopify's built-in compression

3. Use Descriptive File Names

This one's easy but makes a real difference for SEO. Take 5 seconds to rename your files before uploading:

❌ Bad: IMG_1234.jpg, photo.jpg, image-1.jpg

✅ Good: blue-leather-wallet-front.jpg, mens-running-shoes-side-view.jpg

Descriptive file names help Google understand your images and can improve search rankings.

4. Add ALT Text in Shopify

ALT text is one of those things that's easy to skip but really shouldn't be. It helps visually impaired customers (screen readers use it), and Google uses it to understand what your images show. Win-win. After you upload an image to Shopify, just add a quick description.

✅ Good ALT text: "Blue leather bifold wallet open showing card slots and bill compartment"

5. Use WebP Format When Possible

WebP is kind of like the new kid on the block who's better at everything. It's 30% smaller than JPG but actually looks better. Shopify fully supports it, and pretty much every modern browser does too (we're talking 95%+ coverage). If you're setting up a store in 2025, just use WebP. Future you will thank present you.

Common Shopify Image Mistakes to Avoid

Images Too Small (Under 1024x1024)

Problem: Your images look blurry and pixelated, especially on nice displays or when customers zoom in.

Solution: Simple - use at least 2048x2048 for product images. Always.

Images Too Large (Over 1 MB)

Problem: Your pages load like you're on dial-up. High bounce rates. Mobile users giving up and leaving.

Solution: Compress everything to under 500 KB before you upload. No exceptions.

Inconsistent Aspect Ratios

Problem: Your product grid looks like a mess because images are cropped all over the place. Very unprofessional.

Solution: Pick one aspect ratio (1:1 square is best) and stick with it for all product images.

Wrong File Format

Problem: You're using PNG for regular photos and ending up with massive 2-5 MB files that kill your load times.

Solution: JPG or WebP for photos. Save PNG for logos and graphics that actually need transparency.

No ALT Text

Problem: You're missing out on SEO juice, failing accessibility standards, and losing potential Google Image Search traffic.

Solution: Take 30 seconds per image and add descriptive ALT text in your Shopify admin. It matters.

Generic File Names

Problem: Your files are all named "IMG_1234.jpg" which does absolutely nothing for SEO or organization.

Solution: Literally just rename them to something descriptive like "product-name-description.jpg" before uploading. Takes 5 seconds.

How Image Sizes Impact Your Store Performance

Page Speed

3-5x

Properly optimized images load 3-5x faster than the unoptimized mess. And here's the kicker: every single second of delay drops your conversions by 7%. That adds up fast.

Mobile Experience

70%

Think about this: 70% of your Shopify traffic is probably on mobile. That's a lot of people on phones, expecting fast loading and crisp images. Getting the dimensions right means your images look great on every device - no weird stretching, no blur, no five-second waits.

Conversion Rate

+40%

Here's a stat that'll blow your mind: products with 5+ high-quality images convert significantly better than listings with just one sad photo. People need to see what they're buying from multiple angles. Quality builds trust.

Google PageSpeed Insights

Here's something worth knowing: Google actually uses your page speed as a ranking factor. Slow site = lower rankings. And guess what's usually the biggest culprit for slow pages? Unoptimized images. The good news? This is one of the easiest fixes:

  • 90+ score: Properly sized and compressed images (WebP, under 500 KB)
  • 50-90 score: Some optimization needed (large JPG files, no compression)
  • Under 50: Major issues (massive uncompressed files, wrong dimensions)

Never Resize Images Manually Again

What if you could skip all the manual resizing, compressing, and format-converting? AI can generate perfect Shopify images at exactly the size you need - 2048x2048, 1200x400, whatever. Just describe what you want, and you're done.

Any Size, Perfect Every Time

Generate images at exactly 2048x2048, 1200x400, 1920x1080, or any size you need

Automatically Optimized

WebP format, perfect compression, under 500 KB file size - optimized for Shopify

Unlimited Images

Generate hundreds of product photos, banners, and collection images at $79/month

Frequently Asked Questions

What is the best Shopify image size for products?

Go with 2048 x 2048 pixels in a square (1:1) format. This hits the sweet spot - high enough resolution that customers can zoom in and see details, but not so massive that it slows down your site. Just make sure to compress it to under 500 KB and you're golden.

What size should Shopify banner images be?

For desktop, stick with 1200 x 400 pixels (that's a 3:1 ratio - nice and wide). Mobile's a different beast though - 800 x 600 pixels (4:3 ratio) looks way better on smaller screens. The 3:1 desktop ratio is pretty much the standard across most Shopify themes.

What is the Shopify collection image size?

For square collection images, use 1024 x 1024 pixels. For full-width collection banners, use 2800 x 1000 pixels. Square images work best for collection grids, while wide banners are perfect for collection page headers.

What is the Shopify slideshow image size?

Shopify slideshow images should be 1600 x 1000 pixels (16:10 aspect ratio) or 1920 x 1080 pixels (16:9 aspect ratio). Keep them under 300 KB each and limit slideshows to 3-5 images for best performance.

What is the Shopify hero image size?

Shopify hero images should be 1920 x 1080 pixels (16:9 aspect ratio) for full-width sections, or 1280 x 720 pixels for smaller hero sections. Use WebP or JPG format compressed to under 400 KB.

What happens if my Shopify images are too small?

Not good, honestly. Anything under 1024x1024 is going to look pixelated and blurry, especially when someone tries to zoom in or views it on a nice display. It screams "unprofessional" and can actually tank your conversions by 20-40%. Don't risk it - stick with at least 2048x2048 for product shots.

Can I use phone photos for my Shopify store?

Absolutely! Modern phones (iPhone 12 or newer, recent Androids) take photos at 3000+ pixels, which is way more than enough. Just resize them to 2048x2048 and you're set. That said, if you want to level up those phone photos - better backgrounds, professional lighting, perfect dimensions - AI tools like Ailee can do that automatically.

Does Shopify automatically optimize images?

Kind of, but don't rely on it. Shopify does some automatic compression, but it's way better to optimize your images before uploading. Here's why: if you upload properly sized images (2048x2048 for products, 1200x400 for banners), they'll load 2-3x faster than if you just throw giant 5000x5000 files at Shopify and hope for the best.

How many product images should I upload to Shopify?

Aim for 5-8 images per product: 1 main photo, 2-3 additional angles, 1-2 detail shots, and 1-2 lifestyle/in-use images. Products with 5+ images convert significantly better than single-image listings. Shopify allows up to 250 images per product.

Should I use JPG or PNG for Shopify product images?

Use JPG or WebP for your product photos. (WebP is actually 30% smaller, so it's the better choice.) Save PNG for things that need transparency - logos, icons, graphics. Why? Because PNG files are 3-5x bigger than JPG for regular photos, and that'll drag your site speed down fast.

What is the maximum image size Shopify allows?

Shopify technically allows images up to 5000 x 5000 pixels (20 megapixels) and 20 MB files. But just because you can doesn't mean you should. That's way too big. Stick to 2048x2048 for products and compress everything to under 500 KB. Your site speed will thank you.

What is the best way to resize images for Shopify?

For quick batch resizing, our free Shopify Photo Resizer tool works great. But if you want to skip the whole process? Use AI to generate images at exactly the dimensions you need (2048x2048, 1200x400, whatever) - no manual resizing, no compression, just done.

Related Shopify Guides

Shopify Product Image Size Guide

Deep dive into product image requirements, optimization, and best practices for maximum conversions.

Read guide

Shopify Collection Image Size Guide

Complete guide to collection images, banners, and thumbnails for beautiful collection pages.

Read guide

Shopify Blog Image Size Guide

Optimize your blog post images for better SEO and social sharing with the right dimensions.

Read guide

Shopify Slideshow Image Size Guide

Create stunning homepage slideshows with the right image dimensions and optimization.

Read guide

Shopify Image Optimization Guide

Master image compression, formats, and optimization techniques for lightning-fast stores.

Read guide

Free Shopify Photo Resizer

Resize and optimize your Shopify images instantly with our free online tool.

Try free tool