Shopify Image Sizes: The Definitive Guide for Merchants

Key takeaways:

• The ideal Shopify product image is 2048 × 2048 pixels with a consistent 1:1 aspect ratio, providing enough resolution for zoom and retina displays while maintaining uniform catalog presentation; for best performance, optimize images to under 500KB and use WebP whenever possible, reserving PNG for images that require transparency.
• Properly sized and optimized images improve Shopify SEO and user experience by supporting Core Web Vitals—reducing Largest Contentful Paint (LCP), preventing Cumulative Layout Shift (CLS), and increasing visibility in Google Image Search through well-structured image assets with appropriate dimensions, filenames, and alt text.
• Maintaining correct image dimensions across a large Shopify catalog is difficult to scale manually, but Cloudinary Assetlink automates the process by generating optimized sizes, formats, and quality levels from a single source image, delivering them through a global CDN to improve performance, simplify management, and support better Core Web Vitals scores.

Every Shopify theme has its own preferences. Product grids expect square images. Hero banners are wide and shallow. Blog thumbnails follow social sharing dimensions. If you use the wrong image size in the wrong context, you might end up with stretched pictures, white borders, unwanted crops, or, most harmfully, images that load slowly because they have a resolution that no visitor will ever need.

This guide covers the recommended dimensions for every image context on a Shopify store, with guidance on aspect ratios, maximum file sizes, and the best formats for each. Use the reference table below to find the right size for what you’re working on, then read the section for each image type for the reasoning behind the recommendations.

If manually managing image sizes across a large product catalogue feels like it’s not scaling, see how Cloudinary Assetlink delivers every image at the correct dimensions automatically. You upload once and Cloudinary handles every breakpoint, device, and context.

In this article:

• Shopify Product Image Size
• Shopify Banner and Hero Image Size
• Shopify Collection Image Size
• Shopify Blog Image Sizes
• Shopify Favicon Size
• Why Image Sizes Affect Your Shopify SEO
• How Cloudinary Assetlink Delivers the Right Size Automatically

Shopify Image Sizes: Complete Reference Table

Shopify Image Sizes: Complete Reference Table

All file size targets assume the image has been optimized. Shopify accepts uploads up to 20MB.
An unoptimised 8MB product JPEG will produce poor Core Web Vitals scores. The targets in the
table above are for delivered, optimised files, achievable with WebP format and appropriate compression.

Shopify Product Image Size

The product image is the most important image in your store. It’s the first visual impression of what you’re selling, and it directly affects both SEO performance and conversion rates. Getting product image sizes right means balancing three competing requirements: enough resolution to look sharp on retina displays, a consistent aspect ratio across your catalogue, and a small enough file size to deliver quickly.

Recommended Dimensions

The best Shopify image size for a product is 2048 × 2048 pixels at a 1:1 (square) aspect ratio. Shopify recommends square images because all Shopify themes are built to display product images at a 1:1 ratio.

Non-square images will either be letter boxed (white space added), cropped, or stretched depending on your theme settings. Maintaining a consistent 1:1 ratio across your entire product catalogue ensures uniform presentation in grids, carousels, and featured product sections.

Why 2048px?

2048 × 2048px is Shopify’s recommended maximum for product images. It provides sufficient resolution for zoom functionality (as most themes support image zoom on product pages) and for retina/high-DPI displays, without pushing file sizes to where delivery becomes a performance problem. Going larger than 2048px adds no visible quality benefit and increases file size unnecessarily.

File Size and Format

Target under 500KB per product image after optimization. A well-compressed WebP at 2048 × 2048px should come in between 150–400KB, depending on image complexity. JPEG is acceptable, but WebP delivers 25–35% smaller files at equivalent visual quality. PNG should be reserved for product images that require a transparent background.

Cloudinary Assetlink automatically converts product images to WebP (or AVIF for browsers that support it), resizes them to the correct dimensions for each display context, and serves them via global CDN. For the full picture on how this affects page speed and Core Web Vitals scores, see our Shopify Site Speed & Core Web Vitals guide.

Shopify Banner and Hero Image Size

Banner and hero images are the most visible and most performance-sensitive images on most Shopify stores. They appear above the fold, they’re almost always the Largest Contentful Paint (LCP) element on the page, and they vary significantly in recommended dimensions depending on the theme.

Recommended Dimensions

The exact dimensions depend on your theme, but they should be in the range of 1600 × 600px to 2400 × 800px. Most Shopify themes display banner images at a 2.5:1 to 3:1 aspect ratio on desktop. Before finalizing banner dimensions, check your specific theme’s documentation or test with a known image size to see how it crops and scales.

The LCP Problem

Because the hero banner loads above the fold, it is almost always the element Google measures as the Largest Contentful Paint on your homepage and key landing pages. A hero image served as a 2MB JPEG at 2400px wide to a mobile visitor who needs it at 800px wide is carrying three times the file size it needs to, directly penalising your LCP score and your search rankings.

The solution is responsive delivery: serve the image at 2400px for desktop, 1200px for tablet, and 800px for mobile. Cloudinary Assetlink handles this automatically. The same source image is delivered at the correct dimensions for each device without any manual work.

Slideshow Images

Slideshow images follow the same logic as hero banners. 1600 × 800px to 2000 × 1000px is the typical range. The most important constraint is consistency: every slide in a slideshow should have the same dimensions and aspect ratio, or the slideshow will shift height as it transitions between slides, causing Cumulative Layout Shift (CLS) and a poor visitor experience.

Shopify Collection Image Size

Collection images appear in collection listing pages and anywhere you display a collection grid. They follow the same 1:1 square convention as product images, for the same reasons: Shopify themes are built around square grids.

2048 × 2048px at a 1:1 aspect ratio are the recommended dimensions, matching the product image recommendation. Consistency between collection images matters even more than for products, because collection images are displayed together in a grid. A mix of square and rectangular collection images will break the visual rhythm of your collections page.

Shopify Blog Image Sizes

Featured Image

The best size for these images is 1200 × 628px, the standard Open Graph image ratio (1.91:1). This dimension serves two purposes: it displays well as the featured image in your Shopify blog, and it’s the correct size for social sharing previews when a blog post is shared on social media. Straying from this ratio means your featured image will be cropped or letterboxed when shared.

Body Images

1200 × 800px at a 3:2 aspect ratio is a safe default for images embedded within blog post body content. At this size, images scale well across the full range of device widths without appearing oversized or pixelated. Ensure blog body images have explicit width and height attributes in your theme, as images without declared dimensions can cause CLS as they load.

Shopify Favicon Size

The favicon is the small icon that appears in browser tabs, bookmark lists, and search results. Shopify supports two favicon sizes: 32 × 32px (the standard browser favicon) and 512 × 512px (used for high-resolution displays and Progressive Web App icons).

Upload a 512 × 512px square PNG file and Shopify will automatically generate the 32px version. Ensure the image works at small sizes, as highly detailed logos often become illegible at 32px. Consider a simplified monogram or logo mark version of your brand mark for the favicon rather than the full logo.

Why Image Sizes Affect Your Shopify SEO

Beyond aesthetics, image dimensions significantly impact your store’s search engine visibility via Core Web Vitals. Specifically:

• Largest Contentful Paint (LCP): Oversized images are the most common cause of poor LCP scores. An unoptimized 3MB hero image served to a mobile visitor produces an LCP of 4–8 seconds, but Google’s threshold is 2.5 seconds.
• Cumulative Layout Shift (CLS): Images without explicit dimensions specified cause layout to shift as they load. The browser doesn’t know how much space to reserve until the image arrives, causing content to jump. Each jump increments your CLS score.
• Image search: Correctly sized, appropriately named, and alt-text-tagged images rank in Google Image Search. For product-focused stores, image search is a meaningful source of purchase-intent traffic.

For a complete breakdown of how Core Web Vitals affect Shopify search rankings, and how leading merchants have achieved up to 80% faster page load times, see the Core Web Vitals for Shopify page.

How Cloudinary Assetlink Delivers the Right Size Automatically

In practice, keeping every image at the correct dimensions across a large catalogue (like product images, collection images, banners, or blog images) requires ongoing manual effort that most merchants either deprioritize or skip entirely.

Cloudinary Assetlink removes that manual effort. When connected to your Shopify store, Cloudinary stores each image once and generates the correct dimensions for every display context on delivery all from the same source file. Every image is also automatically converted to WebP or AVIF, compressed to the optimal quality level, and delivered via Cloudinary’s global CDN.

• You upload once. Cloudinary handles every size, format, and device.
• No manual resizing. No separate files for desktop and mobile. No bulk editing sessions.
• Immediate performance improvement. Core Web Vitals scores reflect image delivery changes within days.

Install Cloudinary Assetlink free from the Shopify App Store →

Frequently Asked Questions

What is the best image size for Shopify products?

2048 × 2048 pixels at a 1:1 square aspect ratio. This provides sufficient resolution for zoom functionality and retina displays while keeping file sizes manageable. All Shopify themes are built to display product images at a square aspect ratio, so non-square images will be cropped or letterboxed.

What size should Shopify banner images be?

1600 × 600px to 2400 × 800px is the typical range, depending on your theme. Most Shopify themes display banners at approximately a 3:1 aspect ratio. Check your specific theme documentation for exact recommendations, as themes vary. The most important consideration is keeping the file size under 600KB after optimization.

Does Shopify resize images automatically?

Shopify resizes images to some degree, generating smaller variants of uploaded images for display in grids and thumbnails. However, it does not automatically convert images to modern formats like WebP or AVIF, does not generate fully responsive variants sized to each visitor’s screen, and does not apply intelligent compression. Cloudinary Assetlink addresses all of these gaps automatically.

What image format should I use for Shopify?

WebP is the recommended format for the majority of Shopify product and marketing images. It delivers 25–35% smaller file sizes than JPEG at equivalent visual quality and is supported by all modern browsers. AVIF offers even greater compression but has slightly lower browser support. Use PNG only for images that require a transparent background (logos, product cutouts).

What is the maximum image size for Shopify?

Shopify accepts image uploads up to 20MB and 25 megapixels in resolution. However, the upload limit is not a performance target. An unoptimized 15MB image will produce extremely poor page load times. After optimization, product images should be under 500KB and hero/banner images under 600KB for acceptable Core Web Vitals performance.

Why are my Shopify images blurry?

Blurry product images on Shopify are almost always caused by uploading images that are too small, typically under 800 × 800px. When Shopify scales a small image up to fill a larger display area, it loses sharpness. The fix is to re-upload at 2048 × 2048px or larger. If images look blurry only on retina/high-DPI screens, the issue is insufficient resolution: retina displays require images at twice the display dimensions to appear sharp.

RELATED GUIDES

• Shopify Image Optimisation Guide — why image performance matters and how to improve it
• Shopify Image Compression Tool — compress individual images before uploading
• How to Resize Images for Shopify — step-by-step resizing guide
• Shopify Image Alt Text Guide — SEO and accessibility guidance for image alt text
• Site Speed & Core Web Vitals — how image delivery affects search rankings