Shopify Image Sizes: Fast, Polished, Mobile‑First (Simple, Actionable Guide)

You’re building a sharp Shopify store—great products, clear descriptions, ready to sell. Now let’s make your images work just as hard. Right sizes and formats don’t just “look nice.” They make your site feel fast, trustworthy, and easy to shop.

Get this right, and customers glide through your pages. Get it wrong, and things can feel slow, blurry, or oddly cropped. No stress—we’ll keep this simple and actionable.

Quick size cheat sheet

• Product (1:1): 2048 × 2048 (min 800 × 800 for zoom)
• Collection (1:1): 1024 × 1024 (or 2048 × 2048 if shown large)
• Hero/Banner (16:9): 1920 × 1080 or 1536 × 864
• Blog featured: 1800 × 1000 (16:9) or 1200 × 800 (3:2)

Fast 60‑second Image workflow

1. Take hero image photograph
2. Upload hero image to Squoosh. (alternative image resizers are available)
3. Resize to target width (e.g., 1536 for hero), keep aspect ratio.
4. Choose WebP, quality 70–80; adjust quality until the image looks clean and sharp (no blocky edges or colour bands).
5. Export one master image (WebP, 1536w).
6. Upload to Shopify

Why image size is a quiet superpower

• Speed that converts: Smaller, well‑optimised images load fast. Fast sites rank better and sell more.
• Professional look: Crisp, consistent images build trust—no jagged edges, no weird crops.
• Smoother shopping: Clean grids and consistent aspect ratios make browsing effortless.
• Mobile first: Most shoppers are on phones. Your images must look great on every screen.

What if my image is too big?

Shopify will resize for display, but giant uploads slow things down and can compress poorly. Optimise before uploading—keep quality high and file size low. Use a local image optimiser to convert to WebP and resize (e.g., 1536×864) before upload.

Tip: After optimising, preview on mobile to ensure text overlays remain readable.

What if my image is too small?

Stretching small images makes them blurry or pixelated. Match the space: use the right aspect ratio and enough pixels for the largest display size.

Golden rules (use these everywhere)

• File size: Aim for < 200 KB for product images when possible. Keep large banners < 1 MB.
• Max dimensions: Shopify accepts up to 5000 × 5000 px, but upload only what you need.
• Resolution: 72 dpi is standard for web.
• Formats:
  • JPEG/JPG: Best for photos and lifestyle shots.
  • PNG: Use for graphics, text, or transparency (logos). Larger file sizes—use sparingly.
  • WebP: Modern and smaller; great if your workflow supports it.
  • GIF: Only for simple animations; avoid for photos.

Recommended sizes (practical starting points)

1) Product images

• Sweet spot: 2048 × 2048 px (square) for high‑quality zoom.
• Zoom minimum: At least 800 × 800 px.
• Consistency wins: Keep the aspect ratio the same across products (e.g., all 1:1 squares) so your collection grids align cleanly.

Do all product images need the exact same pixels?

Not exact pixels, but the same aspect ratio. 1000×1000 and 1200×1200 (both square) line up nicely. Mixing square and portrait does not.

2) Collection images

• Common display: Square.
• Good size: 1024 × 1024 px (2048 × 2048 px if your theme shows them large).
• Match the set: Keep aspect ratios consistent across collections.

3) Slideshows & hero banners

• Wide and responsive: Themes vary. Start with 1920 × 1080 px (16:9) for full‑width banners.
• Common width range: 1200–2500 px wide; height often 400–900 px.
• Mobile focal point: Set the image focal point in the theme so important content stays visible on phones.

4) Blog featured images

• Good options: 1800 × 1000 px (≈16:9) or 1200 × 800 px (3:2).
• Keep it tidy: Use one aspect ratio across the blog for a clean listing page.

5) Logos

• Header logo: Start around 450 × 250 px (adjust for your logo’s shape and theme).
• Favicon: 32 × 32 px (or 16 × 16 px).

Naming and ALT template

• Filename: brand-product-type-key-detail.webp (e.g., ecomschool-candle-vanilla-8oz.webp)
• Alt text: [Color/variant] [product] on [background], [context] (e.g., Vanilla 8oz candle on white background, label visible)

Common mistakes

• Uploading camera originals without compression
• Mixing aspect ratios within the same product grid
• Using PNG for photos (prefer WebP/JPEG; keep PNG for graphics/transparency)
• Baking text into images (hard to read on mobile, hurts SEO, and blocks localization—embedded text can’t be translated; use real HTML text or theme overlays)
• Skipping mobile preview and focal point checks

Accessibility notes

• Describe content and purpose in alt text; avoid keyword stuffing
• Decorative images should have empty alt ("")
• Ensure sufficient contrast for text overlays; avoid cropping key content on mobile

If your theme says something different… follow it

Always check your theme’s guidance in the editor (Online Store → Themes → Customize). Many sections display a recommended size or aspect ratio right beside the uploader. If in doubt, match the aspect ratio of the space, upload a few test images, and preview on mobile.

Dawn theme (quick notes)

• Product images: 2048 × 2048 px is safe for quality and zoom; 1500 × 1500 px can balance speed and detail.
• Hero/banner: 1920 × 1080 px (16:9) is a reliable starting point; Dawn also supports 3:2 well.
• Slideshow: 1920 × 1080 px is common.
• Collections: 1:1 ratio; choose a size that matches your layout (e.g., 1024 × 1024 px).

Theme quick reference (keep it lean)

• Horizon: Start with 16:9 banners (1920 × 1080) and 1:1 products (2048 × 2048). Check size hints in the section editor.
• Savor: Uses bold banners; try 16:9 (1920 × 1080) or 3:2 (1500 × 1000). Products 1:1 for tidy grids.
• Vessel: Visual-first; keep products 1:1, collections 1:1 (≥1024 × 1024). Banner 16:9.
• Atelier: Editorial layouts; featured images 3:2 (1200 × 800) or 16:9 (1800 × 1000). Products 1:1.
• Heritage: Traditional storefronts; products 1:1 (2048 × 2048), banners 16:9.

To confirm specifics, review your theme’s documentation or demo store for display dimensions.

Pro tips for speed and quality

• Compress before upload: Use TinyPNG, Squoosh, or similar. Target 70–85% quality for JPEG; keep hero images as light as possible.
• Right‑size images: Don’t upload bigger than your theme displays (often 2048 px max width for products).
• Use WebP where you can: Smaller files, great quality.
• Responsive images: Ensure your theme uses srcset and lazy‑loads off‑screen images.
• Consistent aspect ratios: Avoid layout shift and messy grids.
• Color & metadata: Use sRGB; strip metadata to reduce file size.

Does Shopify compress images automatically?

Shopify applies compression, but you’ll get better results by optimising first. Give Shopify a good starting point.

Note: Keep original assets safely stored so you can re-export if you change theme or crop.

What matters more—pixels or file size?

Both. Use enough pixels for a sharp display at the largest size, then compress to keep file size low. It’s a balance.

Name images well: Use descriptive filenames like blue-suede-running-shoes.jpg for easier asset management and better SEO.

Add alt text: Describe the image for accessibility and search (e.g., “Blue suede running shoes on white background”).

Always test on mobile: Preview on different devices before publishing.

You’ve got this

Stick to the rules above, follow your theme’s guidance, and test on mobile. Your store will load fast, look polished, and feel easy to shop—exactly what customers (and Google) love.