Shopify Product Image Size: The Complete Guide (2026)

Best Shopify Product Image Size

2048 × 2048 px is the standard recommendation for Shopify product images. That size handles zoom quality on all devices, works on retina displays, and covers Shopify’s full CDN resolution range. Square 1:1 is the most compatible aspect ratio. It renders reliably across Shopify themes, Google Shopping, and other sales channels.

Shopify’s official guidance on accepted formats, file size limits, and upload requirements is in the Shopify product media documentation.

Why 2048 px specifically? At that resolution, Shopify can serve any of its CDN breakpoints from a single upload, including the largest variants used on big desktop displays. It’s also the right size for zoom. Both the hover-zoom magnifier and the click-to-zoom lightbox pull from the original file, and at 2048 px you get sharp detail at 2× magnification on any screen. Going larger doesn’t improve the visible result but does slow uploads. Going smaller risks blurry zoom or rejected images on Google Shopping feeds.

Square images work well for most stores. Every Shopify theme handles 1:1 reliably, and Google Shopping and Amazon both prefer it. If your store type calls for a different ratio, that’s covered in the next section.

Why Shopify Product Images Display at Different Sizes

Mixing aspect ratios across your product images can cause the gallery to jump as customers navigate between slides. Not every theme does this though. Themes that use a fixed-height container or object-fit: cover CSS fill a set area regardless of each image’s natural proportions, so those don’t jump. The jumping only happens in themes that resize the container to match each image’s actual dimensions. If you’re not sure how your theme works, open a product with images of different shapes and click through. If the page layout shifts, you’ve got a jumping gallery.

Using a consistent ratio across all your images is the permanent fix. The GG Product Page Image Slider can also handle it without re-uploading anything. Its Fixed Ratio setting locks the gallery container to a specific ratio regardless of the actual image dimensions, so mixed-ratio images display smoothly.

The right ratio depends on your store type:

A 2025 survey of 150+ fashion ecommerce brands found that 2:3 was most common (~28%), followed by 1:1 (~19%) and 4:5 (~18%). Fashion brands lean toward vertical formats, and with Reels and TikTok now driving most social discovery at 9:16, many plan a small suite of ratios. Typically 1:1 for product grids and Google Shopping, 4:5 for social feed, all derived from one vertical shoot. If you’re not on social channels or tied to marketplace specs, 1:1 is the safest default.

Shopify Mobile Image Size

Shopify’s CDN has smaller image variants ready and serves the right size based on the visitor’s screen (see Shopify’s product media docs). You don’t need separate mobile uploads. Not all themes actually use this though. A theme that outputs a plain <img src> tag instead of using srcset sends your full 2048 px upload to every visitor, including someone on a 390 px phone. That’s roughly 5× more image data than the screen can show. It loads slower and wastes bandwidth for no visible benefit.

Whether or not your theme handles this correctly, the GG Product Page Image Slider manages responsive image loading for the gallery on its own. It builds image elements with srcset across 15 resolution breakpoints and adds lazy loading for off-screen slides. Images also decode asynchronously so they don’t block the rest of the page from rendering. All of this is independent of the theme. The full technical details are in the advanced section below.

The app also has independent mobile configuration. You can set a separate aspect ratio, layout, navigation style, and arrow settings that only apply below the mobile breakpoint. So you can show 4:5 vertical on mobile while keeping 1:1 on desktop, with no theme code changes.

Zoom and Google Shopping Image Requirements

Zoom needs enough resolution in the source image to stay sharp. The GG Product Page Image Slider uses the original uploaded image for its hover-to-zoom magnifier and click-to-zoom lightbox, so below 800 × 800 px the zoomed view comes out pixelated. Uploading at 2048 px means zoom stays sharp at any magnification level.

Google Merchant Center also enforces 800 × 800 px as the minimum for product images used in Shopping ads. Images below this size are disapproved. Uploading at 2048 px covers both requirements with room to spare.

Shopify Image File Formats

Upload JPEG for photos and PNG when you need a transparent background. You don’t need to upload WebP files. Shopify converts and serves them automatically when the visitor’s browser supports it.

For JPEG compression, most image editors default to quality 90–100, which produces files much larger than needed. Quality 70–80 typically lands in the 100–300 KB range for a product photo with no visible difference at normal viewing sizes. PNG files with transparency tend to run larger. If file size is a concern, check whether your product images actually need the transparent background or if a white background JPEG would work just as well. GIF isn’t a practical choice for product photos. You only get 256 colors, quality on photographic images is poor, and file sizes end up large.

How to Adjust Image Size in Shopify

If your Shopify product images are different sizes in the gallery, you’ll want to fix that at the source or at the gallery level. When a Shopify product image size is too big for the 20 MB upload limit, the file gets rejected. Compress it first, targeting 100–300 KB for JPEG product photos. You can use Shopify to adjust image size directly through the built-in media editor. For display inconsistencies, the steps below cover your options.

For a small catalog, re-cropping through Shopify’s built-in media editor is the most direct path. For large catalogs, preparing images at a consistent ratio before uploading in bulk is faster. If re-uploading isn’t practical (third-party image feeds, time constraints, a few hundred products), the Fixed Ratio setting handles it at the display level without touching the source files at all.

Shopify CDN Image URL Parameters (Advanced)

This section is for developers and technically-minded merchants who want to understand how Shopify serves images, or who are building custom Liquid sections, email templates, or open graph meta tags.

srcset and responsive image loading

srcset is the browser standard for loading the right image size per device. Shopify’s CDN has the variants ready, but they’re only served if the theme’s HTML outputs srcset and sizes attributes on the image element. Not all Shopify themes do. A theme that outputs a plain <img src="..."> sends the full 2048 px upload to every device. On a 390 px phone screen, that’s about 5× more image data than the browser needs.

The GG Product Page Image Slider builds its own image elements with srcset across 15 resolution breakpoints. Off-screen slides are lazy-loaded, and images use decoding="async" so they don’t block page rendering. This works the same regardless of whether the theme implements any of it.

CDN URL transformation

Shopify’s CDN supports on-the-fly image transformation via query parameters appended to the CDN URL. You’re not limited to a fixed set of sizes. The width and height parameters accept any value up to 5760 px.

# Resize to 800 px wide (height auto-calculated from aspect ratio):
https://cdn.shopify.com/s/files/.../product.jpg?width=800&v=...

# Resize to 400×400 and crop to center:
https://cdn.shopify.com/s/files/.../product.jpg?width=400&height=400&crop=center&v=...

# Extract a specific region, then resize the result:
https://cdn.shopify.com/s/files/.../product.jpg?crop=region&crop_left=32&crop_top=32&crop_width=512&crop_height=512&width=100&height=100&v=...

At least one of width or height is required. If you provide only one, the other is calculated from the image’s aspect ratio. Images can’t be upscaled beyond their original dimensions.

The crop parameter controls how the image is trimmed when your requested dimensions change the aspect ratio. Values: top, center, bottom, left, right, and region. Use region with crop_left, crop_top, crop_width, and crop_height to extract a specific rectangular area. You can also convert the format with format: jpg or format: pjpg, or pad the image to fill the requested dimensions using pad_color with a hex value (instead of cropping).

In Liquid, the image_url filter builds these URLs for you:

{{ product | image_url: width: 800 }}
{{ product | image_url: width: 400, height: 400, crop: 'center' }}
{{ product | image_url: crop: 'region', crop_left: 32, crop_top: 32, crop_width: 512, crop_height: 512 }}

The GG Product Page Image Slider uses these parameters internally to request the right image size per device, keeping page load fast without sacrificing full resolution for zoom. Full parameter reference: Shopify image_url filter docs.

Frequently Asked Questions

Written by Nikolay Save Updated April 23, 2026