Shopify Image Size: Complete Guide for Every Page Type (2026)

Shopify lets you upload almost anything. That doesn't mean you should. An uncompressed DSLR photo sitting on your product page adds 3+ seconds of load time — and Google's Core Web Vitals will penalize you for it. Every 100ms of extra load time drops conversions by about 1%.

This guide covers the exact dimensions and file sizes for every Shopify image type, plus how to get there without manual grunt work.

Shopify Image Sizes at a Glance

These are the targets. Everything below explains why, and what happens when you deviate.

Product Image Dimensions

Product images are where most Shopify stores go wrong — either by uploading massive uncompressed files or using inconsistent dimensions that make the product grid look amateurish.

Recommended size: 2048 × 2048 px, square (1:1 ratio)

Shopify auto-generates thumbnails from whatever you upload, so you only need one master image per product. Shopify resizes it to:

The zoom view is the reason to upload at 2048 px — shoppers who zoom in are high-intent buyers. Give them the detail they're looking for.

Minimum viable size: 800 × 800 px. Below that, the zoom feature becomes useless and the image looks soft on high-DPI screens (retina displays need 2× the CSS size to stay sharp).

Always use square images for products. Mixing portrait and landscape product photos creates an uneven grid that screams "amateur." Pick square and stick with it across your catalog. If you have lifestyle shots at other ratios, create separate gallery images — but the main product image stays square.

Collection Image Dimensions

Collection images appear on your category/collection pages — the pages that list your product groups (e.g., "Summer Dresses," "Running Shoes," "Coffee Gear").

Recommended size: 1024 × 1024 px

The actual display size varies by theme. Most popular Shopify themes (Dawn, Debut, Craft) display collection images between 300 and 600 px wide, but uploading at 1024 px gives you a sharp result on high-DPI displays and leaves room for future theme changes without re-uploading.

If your theme uses rectangular collection banners (landscape or portrait), match that ratio. Check your theme's documentation — many themes have specific collection image recommendations in their setup guides.

Keep collection images under 400 KB. They're decorative — shoppers aren't zooming into them.

Slideshow and Hero Banner Dimensions

The hero banner is the first thing visitors see. It needs to load fast and look good on both desktop and mobile.

Recommended size: 1920 × 1080 px (16:9 ratio)

At 1920 px wide, you cover the full width of a large desktop monitor. Shopify will scale it down for smaller screens.

The mobile problem: A 1920 × 1080 image centered on a 390 px wide phone screen shows a very narrow vertical slice — typically the center 800 × 500 px of your image. Design your banner with the key content (text, product, CTA) in the center region. Anything near the edges may get cropped on mobile.

The safe zone: keep important content within the central 800 × 500 px of your 1920 × 1080 image.

Compress hero banners aggressively. A 1920 × 1080 JPEG can be under 200 KB with the right compression settings. Use WebP instead of JPEG where possible — it's typically 25-35% smaller at the same visual quality.

Logo and Favicon

Logo

Recommended: 450 × 250 px maximum

Shopify themes typically display logos between 100–250 px wide, but Shopify caps the maximum logo dimensions at 450 × 250 px. Upload a PNG with a transparent background so it sits cleanly on any header color.

Keep the logo file under 50 KB. At display sizes under 250 px, you're not gaining anything from a 2 MB source file.

Favicon

Required: 32 × 32 px, PNG format

The favicon appears in browser tabs and bookmarks. Shopify also uses it as the iOS/Android icon when someone adds your store to their home screen. Use a simple mark — your full wordmark won't be readable at 32 px. Most brands use an icon or the first letter of their brand name.

How to Optimize Images for Shopify

Resize to Recommended Dimensions

Before uploading, resize your images to the target dimensions. Uploading a 6000 × 4000 px DSLR photo forces Shopify to do more resizing work, and you're starting with a larger file that still has to load as Shopify processes your upload.

Resize in bulk with Pixotter's resize tool. Drop your images, set the target dimensions, and download. You can process multiple images at once — resize all your product photos to 2048 × 2048 in one pass without touching Photoshop.

Compress for Fast Loading

After resizing, compress. This is where most of the file size savings come from. A 2048 × 2048 px product image should be under 200 KB. At 80% JPEG quality, you typically can't tell the difference from 100% quality — but the file is 60-70% smaller.

Use Pixotter's compression tool to hit your target file size. You can set a maximum file size (e.g., "keep everything under 200 KB") and Pixotter finds the minimum quality level that meets it.

WebP — Shopify Serves It Automatically

Since 2023, Shopify automatically serves WebP versions of your images to browsers that support it — which is now essentially all browsers. You do not need to upload WebP files directly. Upload high-quality JPEG or PNG, and Shopify handles the conversion.

This means your upload format matters less than your upload quality. Focus on getting your dimensions and file size right. Shopify handles format optimization on delivery.

For context on why WebP matters and when to use it manually, see our PNG vs WebP comparison.

Alt Text for SEO

Every product image needs descriptive alt text. Shopify image alt text is set in the product editor — click the image, then "Edit alt text."

Good alt text: Blue Merino Wool Running Hat - Side View Bad alt text: IMG_4821.jpg or product image

Alt text is read by screen readers (accessibility) and indexed by Google (SEO). For image-heavy product catalogs, alt text is one of the highest-ROI SEO optimizations you can make. Be specific: include the product name, color, variant, and view angle where relevant.

Shopify Image File Size Limits

Shopify imposes hard limits on what you can upload:

• Maximum file size per image: 20 MB
• Maximum image dimensions: 4472 × 4472 px

Those are the ceilings. The targets you actually want to hit are much lower:

The 20 MB limit is there because Shopify can physically store it — not because 20 MB product images are a good idea. A 10 MB product photo adds 5-8 seconds of load time on a typical mobile connection. That kills conversions.

Google's Core Web Vitals measures Largest Contentful Paint (LCP) — the time until the largest image on the page finishes loading. For most Shopify stores, the product image is the LCP element. Keep product images under 200 KB and your LCP score improves meaningfully.

Common Shopify Image Mistakes

Uploading Uncompressed DSLR Photos

A modern DSLR produces 20-50 MB JPEG files. Uploading these directly to Shopify means your visitors are downloading 20 MB images (Shopify compresses somewhat, but not enough). Always compress before uploading. A compressed 2048 × 2048 product image should be 100-200 KB, not 10-20 MB.

Inconsistent Product Image Ratios

Mixing square, portrait, and landscape product images in the same collection creates an uneven grid. Shopify's grid will crop or letterbox mismatched images, and neither option looks good. Standardize on square (1:1) for all main product images. Do this before you have 500 products — retrofitting image consistency across a large catalog is painful.

Missing Alt Text

Shopify sets alt text to the product name by default. For simple single-variant products, that's often fine. For multi-variant products (color, size, angle), the default is usually wrong. "Blue T-Shirt" as alt text for an image that shows the back of a black hoodie is worse than no alt text — it actively confuses Google's indexing.

Using PNG for Product Photos

PNG is lossless, which sounds good — but for product photography, it produces files 3-5× larger than JPEG at equivalent quality with no visible difference. Use PNG for images with transparency (logos, graphics with hard edges) and JPEG or WebP for photographs. A 200 KB JPEG product photo and a 900 KB PNG product photo look identical to shoppers.

FAQ

What is the best image format for Shopify product photos?

JPEG. Upload at 80-85% quality, targeting under 200 KB per image. Since 2023, Shopify automatically converts your images to WebP for browsers that support it — so you get WebP delivery without uploading WebP files. Save PNG for logos and graphics with transparency.

Does Shopify resize images automatically?

Yes. Shopify generates multiple sizes (thumbnail, standard, zoom) from your uploaded image. This is why you only need to upload one master image per product. Upload at 2048 × 2048 px and Shopify handles the rest. However, Shopify's automatic resizing doesn't replace compression — you still need to compress before uploading.

What happens if I upload images with inconsistent dimensions?

Shopify will display them, but your product grid will look inconsistent. If you upload a mix of square and portrait images, Shopify will either crop them to a uniform aspect ratio (cutting off parts of the portrait image) or display them at their native ratios (creating uneven rows). Set a standard and stick to it across your catalog.

How do Shopify image sizes affect page speed and SEO?

Oversized images are one of the top causes of slow Shopify stores. Google measures Largest Contentful Paint (LCP) as a Core Web Vitals signal — a direct ranking factor. If your product images are 2-5 MB instead of 100-200 KB, your LCP score will be poor, which hurts both rankings and conversion rates. Keep images under 200 KB and you'll clear the threshold where image size becomes a performance problem.

Need to resize or compress your Shopify images? Pixotter's resize tool and compression tool handle both in your browser — no uploads to a server, no account required. For more on image formats, see our YouTube thumbnail size guide.