Shopify Image Sizes Guide 2026
The complete reference for optimal Shopify image dimensions. Get the right sizes for hero banners, product images, collections, logos, and more.
Quick Reference
Product Images
- 2048 x 2048 pxSquare format, 1:1 ratio
Hero Banner
- 2880 x 1000 pxWide format for retina
Collection Image
- 1920 x 720 pxWide banner format
Complete Image Size Reference
Hero/Banner Images
Full-width images that appear at the top of your homepage or landing pages.
| Image Type | Dimensions | Aspect Ratio | Notes |
|---|---|---|---|
| Hero Banner (Desktop) | 2880 x 1000 px | 2.88:1 | Optimal for retina displays |
| Hero Banner (Standard) | 1920 x 720 px | 2.67:1 | Standard HD screens |
| Slideshow Image | 2048 x 768 px | 2.67:1 | Multiple slides with text overlay |
| Full-width Banner | 2560 x 720 px | 3.56:1 | Wide promotional banners |
Product Images
Images for your product pages, thumbnails, and galleries.
| Image Type | Dimensions | Aspect Ratio | Notes |
|---|---|---|---|
| Main Product Image | 2048 x 2048 px | 1:1 | Square format, allows zoom |
| Product Thumbnail | 800 x 800 px | 1:1 | Collection grids, search results |
| Product Gallery Image | 1024 x 1024 px | 1:1 | Additional product photos |
| Variant Image | 800 x 800 px | 1:1 | Color/size variant swatches |
Collection Images
Featured images for your collection/category pages.
| Image Type | Dimensions | Aspect Ratio | Notes |
|---|---|---|---|
| Collection Featured Image | 1920 x 720 px | 2.67:1 | Collection page headers |
| Collection Card Image | 600 x 600 px | 1:1 | Homepage collection grid |
| Collection Banner (Wide) | 1600 x 400 px | 4:1 | Wide collection banners |
| Subcollection Image | 800 x 800 px | 1:1 | Nested collection navigation |
Logo & Branding
Your store logo and branding elements.
| Image Type | Dimensions | Aspect Ratio | Notes |
|---|---|---|---|
| Main Logo | 450 x 250 px | Varies | Header logo, PNG with transparency |
| Favicon | 32 x 32 px | 1:1 | Browser tab icon |
| Apple Touch Icon | 180 x 180 px | 1:1 | iOS home screen icon |
| Social Share Logo | 1200 x 630 px | 1.91:1 | Open Graph meta image |
Blog Images
Images for your blog posts and articles.
| Image Type | Dimensions | Aspect Ratio | Notes |
|---|---|---|---|
| Blog Featured Image | 1920 x 1080 px | 16:9 | Article hero image |
| Blog Thumbnail | 600 x 400 px | 3:2 | Blog listing page |
| In-Content Image | 1200 x 800 px | 3:2 | Images within article body |
| Blog Card Image | 800 x 450 px | 16:9 | Homepage blog section |
How Images Display Across Devices
Shopify automatically resizes images for different devices, but starting with the right dimensions ensures crisp display everywhere.
Desktop Display
- Full-resolution images on retina displays
- Product zoom functionality requires high-res images
- Wide banners display in full glory
Mobile Display
- Shopify serves smaller versions automatically
- Square product images work best on mobile
- Consider focal point for cropped banners
Image Optimization Tips
Use WebP Format
WebP images are 25-35% smaller than JPEG/PNG while maintaining quality. Shopify automatically serves WebP to supported browsers.
Enable Lazy Loading
Most modern Shopify themes include lazy loading. This loads images only when they're about to enter the viewport.
Compress Before Uploading
Use tools like TinyPNG, Squoosh, or ImageOptim to compress images before uploading to Shopify.
Add Descriptive Alt Text
Include keywords naturally in your alt text. This helps SEO and accessibility.
Use Consistent Aspect Ratios
Keep product images at the same aspect ratio for a clean, professional grid layout.
Consider Mobile First
Over 70% of ecommerce traffic is mobile. Ensure images look great on smaller screens.
Recommended File Formats
| Format | Best For | Notes |
|---|---|---|
| WebP | All images (when possible) | 25-35% smaller than JPEG, supported by all modern browsers |
| JPEG | Product photos, banners | Great for photos, use 80-85% quality |
| PNG | Logos, graphics with transparency | Larger file size, but supports transparency |
| SVG | Icons, logos (vector) | Infinitely scalable, tiny file size |
Go deeper on the topics in this article with related guides, free tools, industry playbooks, and competitor comparisons.
Related guides
How we compare
More Shopify Resources
Frequently Asked Questions
Common questions about Shopify image sizes.
What is the best Shopify hero banner size?
For modern retina-class displays, use 2880 x 1000 pixels (2.88:1 aspect ratio) for full-width hero banners. For standard HD displays, 1920 x 720 pixels works well. Always export at 2x your intended display size so the image stays sharp on retina screens, then compress before upload.
What size should Shopify product images be?
The Shopify-recommended product image size is 2048 x 2048 pixels (1:1 square). This gives you enough resolution for product zoom while staying under the file-size budget. Always use a consistent aspect ratio across all product images so your collection grids look uniform.
What is the ideal Shopify collection image size?
Use 1500 x 1500 pixels (1:1 square) for collection images that appear in collection list pages, or 1500 x 1000 pixels (3:2) if your theme uses landscape collection tiles. Keep aspect ratios consistent across all collections so the layout stays balanced.
What size should the Shopify logo be?
For most themes, a logo image of 450 x 200 pixels at 2x resolution (so 900 x 400 actual pixels) covers retina displays well. Save it as PNG with a transparent background, or as SVG if your logo is vector — SVG scales perfectly at any size and is the best choice when supported.
What is the favicon size for Shopify?
Use 32 x 32 pixels (PNG or ICO) for the standard Shopify favicon. Some themes also support a 16 x 16 PNG. Upload via Online Store > Themes > Customize > Theme settings > Favicon.
Does Shopify resize images automatically?
Yes. Shopify generates multiple sizes of each uploaded image and serves the appropriate size for each device via its image CDN. This means you can upload a single high-resolution master image and Shopify handles the responsive serving. Upload large enough that the largest device gets a sharp image, but not so large that you bloat your asset library.
What aspect ratio should Shopify product images use?
Use a 1:1 square aspect ratio for the most flexible product images — they look balanced in collection grids, product pages, and recommended product widgets across themes. If your products are clothing, furniture, or anything where shape matters, 4:5 portrait can also work well, but stay consistent across the entire store.
Sources & references
Primary documentation referenced for the technical claims on this page. We do not link out to competitor products or affiliate content; these are the standards bodies and platform docs the guidance is built against.
- web.dev — Serve images with the correct dimensions ↗Reference for the responsive sizes and srcset recommendations in this guide.
- Google Search Central — Image SEO best practices ↗Reference for image dimensions and formats that Google recommends.
- web.dev — Modern image formats (WebP, AVIF) ↗Background on the format recommendations referenced for hero, product, and collection images.
- Shopify dev docs — Image transformations ↗Reference for Shopify’s built-in image transformation parameters used in the recommendations.
Need Help With Your Shopify Store?
Obsess AI helps you create SEO-optimized blog content that drives organic traffic and sales.
No credit card required