Shopify Image Sizes: Complete Guide for 2026

The right image dimensions for every part of a Shopify store — product, collection, slideshow, logo, blog, and favicon. Every size below assumes retina (2×) displays, which is what most customers shop on.

Want to audit your live store's images right now?

Scan your store →

Looking for general (non-Shopify) image sizes? See our full image size reference.

Quick Reference

If you only have time for one number per page type, these are the sizes that work cleanly across the most-used Shopify themes:

Page / ElementRecommended SizeAspect RatioNotes
Product (main)2048×20481:1Square works for grid + zoom
Product (variant)2048×20481:1Match aspect across variants
Collection1200×12001:1Square or theme-specific
Slideshow / hero1800×1000~16:9Theme-dependent — check yours
Logo400×100VariesSVG strongly preferred
Blog post header1200×630~1.9:1Doubles as Open Graph
Favicon32×321:1PNG or ICO

Product Images

Product images are the single most important asset on a Shopify store — and the most commonly oversized. The recommended size is 2048×2048 pixels in a square aspect ratio. This works because:

  • It gives 2× pixel density for the largest container most themes use (typically 1024 px)
  • Square crops display cleanly in product grids without awkward letterboxing
  • It supports Shopify's built-in zoom feature without visible pixelation
  • It stays well under Shopify's 20 MB per-file limit when properly compressed

Shopify accepts up to 4472×4472 pixels, but anything above 2048 is almost always wasted bytes. The CDN downscales on the fly when serving smaller variants, so a 4000×4000 source costs you nothing in display quality but everything in upload time and storage. Upload at 2048 unless you have a specific reason to go larger.

Aspect-ratio consistency matters. If one product image is 2048×2048 and another is 2048×1500, your collection grid will render them at different heights — which looks unprofessional and breaks scannable layouts. Pick one aspect ratio (almost always 1:1) and crop every product to it before upload.

Collection Images

Collection cover images vary by theme more than any other element. The safe default is 1200×1200 pixels (square) — most themes display them at roughly 400–600 px wide, so 1200 gives you 2–3× density. If your theme uses a wide rectangular collection card (some Dawn-derived themes do), a 1600×900 image works for that layout. Check the theme documentation; Shopify's default Dawn theme expects 1024×1024 or larger for best results.

Slideshow and Hero Banners

Slideshow images are full-bleed and typically span the full viewport width. The most common recommendation is 1800×1000 pixels — close to a 16:9 ratio, sized to fill standard desktop viewports without forcing the browser to upscale.

Two important caveats. First, the Dawn theme and several others crop slideshow images differently on mobile — typically to a 1:1 or 4:3 portrait crop. If your theme supports a separate mobile slideshow image, set that one too rather than letting your desktop banner get auto-cropped. Second, slideshow images are heavy by their nature, so compress aggressively (quality 70–75 for JPG) and check page weight after upload.

Logo

Use SVG when you can. SVG stays sharp at any size, weighs less than the equivalent PNG, and will look crisp on every screen from a 4K monitor down to a 200-pixel mobile header. If you must use a raster format, 400×100 pixels handles most theme header heights at 2× density. Shopify's logo upload allows up to 4472×4472, but you almost never need more than 800×200 pixels even for a pixel-dense rendering on an oversized header.

Blog Post Images

1200×630 pixels for blog post featured images. This matches the Open Graph specification, which means the same image works for both the in-page header and the social share preview when someone posts your URL on Facebook, LinkedIn, or Slack. One asset, two jobs. For images inside the post body, 800×600 is plenty — they render in a narrower content column.

Favicon

Shopify's admin allows favicons up to 32×32 pixels. PNG or ICO format. If you need larger sizes for modern browsers and mobile bookmarks, you'll need to add them via theme code or a third-party app — Shopify's built-in favicon setting only handles the smallest size. SVG favicons work in modern browsers and scale perfectly, but require theme-level setup.

File Formats: Let Shopify Do the Work

Shopify automatically serves WebP (and AVIF on supported browsers as of 2024) regardless of what format you upload. You upload a JPG or PNG; Shopify decides what format to send based on the visitor's browser. This is one of the more underrated features of the platform.

Practical implications:

  • Upload JPG for photos — quality 80–85 strikes the right balance, and Shopify will convert to a smaller WebP/AVIF for delivery
  • Upload PNG for transparent or graphic-heavy images — logos, icons, anything with sharp edges or transparency
  • Don't upload WebP directly — you lose nothing, but it makes admin previews and downloads slightly more awkward without gaining any delivery advantage
  • Use SVG for vector content — logos, icons, simple graphics. SVG bypasses raster compression entirely

Curious which images on your store are oversized?

Run a free scan →

Target File Sizes

Pixel dimensions are half the story. File weight is what actually slows pages down. Reasonable targets per Shopify image type:

  • Product images (2048×2048): 200–400 KB at JPG quality 80–85
  • Collection images: under 200 KB
  • Slideshow / hero: 300–600 KB; aggressive compression is fine
  • Blog headers: under 200 KB
  • Logos / icons: under 30 KB (or use SVG, which is often under 5 KB)

A common mistake: uploading 5–10 MB hero images straight from a camera or stock site. Shopify will serve a smaller version, but the source still uses storage and slows down the admin. Compress before upload.

Common Mistakes

  • Uploading 4000×4000+ product photos. Shopify supports it but you will not see a quality difference at 2048. You will see slower admin uploads and wasted storage.
  • Mixing aspect ratios in product images. One 1:1 image next to a 4:3 breaks grid layout. Pick one ratio and stick to it.
  • Using PNG for photographs. PNG is lossless, which means a JPG-suitable image (a photograph) becomes 5–10× larger as a PNG with no visible quality benefit. Reserve PNG for transparency and sharp graphics.
  • Forgetting alt text. Shopify's admin lets you set image alt attributes per product. Empty alt text hurts accessibility and SEO. Fill it in.
  • Leaving Shopify's default placeholder images. Shopify ships a generic image for products without uploads. Replace before launch — placeholders tank trust.

Image Optimization Tools

Shopify's CDN handles format conversion and resizing, but it doesn't aggressively compress at the source. Pre-optimizing before upload still cuts file sizes meaningfully — sometimes 50–70 percent — which speeds up the admin, reduces storage, and makes initial image renders faster on the customer side.

Affiliate disclosure: Some links below are affiliate links. If you sign up for a paid plan we may earn a commission at no extra cost to you. We only recommend tools we have evaluated. Full disclosure.

TinyIMG (Shopify-native)

Built specifically as a Shopify app — installs directly from the Shopify App Store, optimizes existing product images in place, and runs automatic compression on new uploads. Also handles SEO bits (alt text suggestions, JSON-LD) that overlap with image-heavy stores. The free tier covers small stores; paid plans scale with image volume.

Try TinyIMG

ShortPixel (universal)

Not Shopify-specific, but handles bulk pre-upload optimization well via their web interface or API. Useful if you have a large existing image library on disk that you want to compress before re-uploading, or if you want one tool that covers Shopify alongside other CMS platforms.

Visit ShortPixel

Frequently Asked Questions

What is the best image size for a Shopify product?

Square 2048×2048 pixels is the size most Shopify themes are built around. It gives you sharp rendering on retina displays at every grid size your theme uses, and it works for the zoom feature without looking pixelated. Shopify accepts up to 4472×4472 and 20 MB per image, but anything above 2048×2048 is usually wasted bytes.

Does Shopify automatically convert images to WebP?

Yes. Shopify's CDN serves WebP automatically to browsers that support it, regardless of the format you upload. You upload JPG or PNG and Shopify handles the conversion at request time. AVIF is also served on supported browsers as of 2024. There is no need to manually convert before uploading.

What size should a Shopify slideshow or hero banner be?

1800×1000 pixels (or 1920×1080 for full-width 16:9) is the standard. Most themes crop slideshow images for mobile separately, so check your specific theme's recommended dimensions in the documentation before committing to one size.

Why are my Shopify product images blurry?

Most often because the source file is too small. If you upload a 600×600 image and the theme renders it in a 400-pixel container on a retina screen, the actual rendered resolution is 800 pixels — and your 600-pixel source has to stretch. Upload at 2× the largest container the image will fill (most theme zoom features expect 2048×2048).

What is the maximum image size Shopify allows?

20 MB per file and 4472×4472 pixels. In practice you should stay well under both limits — a properly compressed 2048×2048 JPG is typically 200–400 KB, and Shopify will downscale anything larger anyway when serving via the CDN.

Do I need to optimize images before uploading to Shopify?

Shopify's CDN handles format conversion (WebP/AVIF) and on-the-fly resizing, but it does not aggressively compress. Pre-optimizing with a tool like TinyIMG can cut file size by 50-70 percent, which speeds up the admin (where you and staff browse the un-optimized originals) and reduces storage usage.

How do I check the real size of images on my live Shopify store?

Use a free image scanner. Paste your store URL into a tool like the one on this site and it will report every image's natural file dimensions versus its rendered display size — making it obvious which images are oversized for the layout they sit in.

Related Guides

Last updated: