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 |
Obsess AI helps you create SEO-optimized blog content that drives organic traffic and sales.
Start Free TrialNo credit card required