Shopify Product Image Size Guide

Sellable Editorial · March 1, 2026 · 6 min read

Blog

Shopify image size requirements

Shopify's image system is flexible but has specific recommendations that maximise quality and performance:

Image type	Recommended size	Max file size	Aspect ratio
Product images	2048×2048px	20MB	1:1 (square)
Collection images	1800×1000px	20MB	16:9 or custom
Banner/hero images	2560×1400px	20MB	16:9
Logo	400×200px	1MB	Variable
Favicon	32×32px	1MB	1:1
Blog images	2048×1024px	20MB	2:1

The 2048×2048px recommendation for product images is the sweet spot: large enough to support Shopify's built-in zoom feature (which fires at 1x zoom), but not so large that it creates excessive file sizes before compression.

Shopify's maximum image upload size is 20MB, but never upload images at that size. They'll slow page loads and hurt your Core Web Vitals score. After compression, aim for 150–350KB per image.

Product image best practices

Use square (1:1) aspect ratio: Shopify's product templates are designed around square images. Non-square images display with letterboxing or cropping that varies by theme — often in ways that look broken. Square images display consistently across every theme and device.

Shoot or generate at 2048×2048px: This is the native size Shopify expects for zoom to work correctly. Going larger doesn't add quality visible on screen; going smaller reduces zoom sharpness.

Use consistent backgrounds: Shopify collections display thumbnails in a grid. Inconsistent backgrounds make the grid look chaotic. White or light grey (#F5F5F5 or similar) backgrounds are the most compatible with default theme layouts.

Name files descriptively: Shopify uses image filenames as part of image SEO. `blue-organic-cotton-tee-front.jpg` is better than `IMG_4792.jpg`. This is one of many small SEO advantages that compound over a large catalogue.

Shopify automatically creates multiple size variants of each uploaded image (grande, large, medium, small, thumbnail). These are served based on the screen size requesting the image. This means your source image quality is the master from which all variants are derived — don't compress before uploading.

Collection images appear in category pages and collection thumbnails. At 1800×1000px (16:9), they display well on both desktop and mobile without cropping. If your theme uses square collection thumbnails, use 1:1 images here instead.

Hero/banner images span the full width of the page on desktop. At 2560×1400px, they're sharp on large monitors. Important: use a "safe zone" approach — keep key content (text, product, logo) in the centre 60% of the image, as edges get cropped on narrow screens.

Blog post images appear as article thumbnails and in-article images. 2048×1024px (2:1) is a reliable choice that works across themes and social sharing cards.

Image format and compression

JPEG: Best for product images with complex backgrounds or lifestyle photography. Aim for 80–90% quality in Photoshop (or equivalent) before upload. This produces 150–400KB files for 2048px images.

PNG: Best for images requiring transparency — product cutouts, logos, overlays. File sizes are larger, so use sparingly.

WebP: Shopify automatically converts JPEG and PNG images to WebP for browsers that support it (all modern browsers). You don't need to upload WebP — Shopify handles this automatically. Uploading WebP directly can cause compatibility issues in some themes.

Compression tools: Before uploading, run images through a tool like TinyPNG or Squoosh to reduce file size without visible quality loss. Target under 300KB per product image.

SEO and alt text

Alt text is the text description of an image that search engines read (and that screen readers announce to visually impaired users). For Shopify product images, well-written alt text improves:

Google Image Search visibility
Accessibility score (affects Core Web Vitals)
Overall product page SEO

Write alt text that describes the product clearly: "Blue organic cotton crewneck t-shirt, front view" rather than "t-shirt" or "product image."

In Shopify, set alt text for each product image individually in the product editor. For large catalogues, this can be done via CSV import by populating the image alt text column.