The complete reference for optimal Shopify image dimensions. Get the right sizes for hero banners, product images, collections, logos, and more.
Product Images
2048 x 2048 px
Square format, 1:1 ratio
Hero Banner
2880 x 1000 px
Wide format for retina
Collection Image
1920 x 720 px
Wide banner format
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 |
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 |
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 |
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 |
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 |
Shopify automatically resizes images for different devices, but starting with the right dimensions ensures crisp display everywhere.
WebP images are 25-35% smaller than JPEG/PNG while maintaining quality. Shopify automatically serves WebP to supported browsers.
Most modern Shopify themes include lazy loading. This loads images only when they're about to enter the viewport.
Use tools like TinyPNG, Squoosh, or ImageOptim to compress images before uploading to Shopify.
Include keywords naturally in your alt text. This helps SEO and accessibility.
Keep product images at the same aspect ratio for a clean, professional grid layout.
Over 70% of ecommerce traffic is mobile. Ensure images look great on smaller screens.
| 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 |
Common questions about Shopify image sizes.
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.
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.
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.
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.
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.
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.
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.
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.
Obsess AI helps you create SEO-optimized blog content that drives organic traffic and sales.
Start Free TrialNo credit card required