Image Optimization for Ecommerce: A Practical Guide

Ceramic bottle in ecommerce photo setup

Image optimization for ecommerce means sending fewer bytes and serving each image at a size that fits the shopper’s device, without making the product look worse. Do it well and your pages load faster, your images get found in search, and shoppers see the product clearly on the first try. This guide covers formats, dimensions, compression, responsive delivery, file names, alt text and Shopify specifics, then shows how to check that the work paid off.

Quicktoimpress
Build a Faster Ecommerce Experience
Quick To Impress builds and improves commerce platforms, including Shopify and BigCommerce, as part of connected systems designed for growth.
Explore growth engineering

TL;DR

  • Optimizing images means cutting network time: send fewer bytes and size images for the device that requests them.
  • On Shopify, upload a clean original (2048 x 2048 px is the recommended square size) and let the CDN handle WebP and AVIF delivery.
  • Never lazy load the main product image. Prioritize it, and lazy load everything below the fold.
  • Use short descriptive file names and honest alt text, and reserve space for every image so the layout does not jump.
  • Measure before and after with LCP and a lab test, not by eye.

Table of Contents

Why images decide how a store feels

Product pages are image pages. The hero photo is usually the largest element on screen, which makes it the thing the browser measures when it reports Largest Contentful Paint (LCP). A heavy hero image means a slow page, and a slow page means shoppers wait or leave before they ever see the product.

There are three payoffs from getting this right:

  1. Speed. Fewer bytes over the network and correctly sized files can significantly improve site performance.
  2. Search visibility. Google uses structured data to show images in rich results, and image sitemaps help it discover images (Google Search Central). Visual search matters too: Search Engine Land notes that Google Lens handles 12 billion searches a month, and well-prepared images give your products a chance to show up there.
  3. Conversion. Shoppers can’t buy what they can’t inspect. Sharp, fast, stable images reduce friction at the exact moment someone is deciding.

If you want the wider picture of site speed, our practical guide to website performance optimization covers the rest of the stack. Images are usually the cheapest place to start.

Choose the right format

Format choice is a trade between quality, file size and compatibility. Shopify’s documentation gives a good baseline: it supports JPEG, Progressive JPEG, PNG, GIF, HEIC and WebP. JPEG suits photography, and PNG suits graphics that need transparency. Shopify’s product media guidance adds that PNG is best for most product images, followed by JPEG.

Here is how that plays out in practice:

Image type Best starting format Why
Lifestyle and in-use photos JPEG Photographic detail compresses well
Cutouts on transparent backgrounds PNG Keeps transparency
Logos, icons, badges SVG or PNG Stay crisp at any size
Short product motion Video or animated WebP rather than GIF GIFs are large for what they show
Delivered to the browser WebP or AVIF Smaller files at similar visible quality

The last row is mostly automatic on Shopify. Its CDN optimizes storefront images and picks WebP or AVIF when the shopper’s browser supports them. That means your job is to supply a clean, correctly sized source file, not to hand-convert everything.

On other platforms, check whether your CDN or an image service does format negotiation. If it doesn’t, generate WebP versions yourself and serve them with a fallback.

Get dimensions right

The most common mistake we see in store audits is uploading a 6000 px camera export and relying on CSS to shrink it. The browser still downloads every byte.

Get dimensions right — overview diagram

For Shopify, the numbers are clear. Product and collection images can be up to 5000 x 5000 px, and 2048 x 2048 px usually displays best for square product images. That gives you enough resolution for zoom without paying for pixels no one will see.

A workable approach:

  • Pick one aspect ratio for the whole catalog (square is the simplest) so grids stay even.
  • Export at the recommended size, not the maximum, unless you have a real zoom feature that needs it.
  • Keep a master archive of full-resolution originals outside the store, so you can re-export later.
  • Match thumbnails to their slot. A collection grid card that renders at 400 px wide should never pull the 2048 px file.

If you want a broader primer on picking resolutions that stay sharp and fast, this walkthrough on website image resolution explains how browsers choose between image sizes on mobile and desktop screens.

Product angles and consistency

Optimization is not only technical. Decide the angles you shoot (front, side, detail, in use, scale reference) and keep lighting and backgrounds consistent. Fewer, better images beat a long gallery of near duplicates, because every extra image is another request and another thing to maintain. For help planning the shoot itself, these website photography tips show how people respond to well-composed photos.

Compress without wrecking the product

Compression is where quality and speed collide. Two rules keep you safe:

  1. Compress from the original. Re-compressing a file that is already compressed stacks artifacts, which show up as blotchy gradients and fuzzy edges on fabric or metal.
  2. Judge by the product, not the number. A flat-color mug can take heavy compression. A knit sweater or a piece of jewelry shows damage fast.

For a working budget, we aim for main product images in the low hundreds of kilobytes and thumbnails far below that, then loosen or tighten per category after looking at the results at 100% zoom. Treat that as a starting target to test, not a standard. The right number depends on your catalog.

A simple routine:

  • Export at target dimensions with a quality setting around the middle-high range.
  • Open the result at full size and check edges, text on packaging, and color gradients.
  • If it looks clean, try a lower quality setting. Stop one step before you notice a difference.
  • Write down the settings so everyone who uploads images uses the same ones.

On Shopify, the CDN does additional work on delivery, so aggressive pre-compression is less necessary than on a self-hosted store. Over-compressing before upload can actually cost you quality, since the CDN then compresses again.

Deliver responsive images

A phone and a 27-inch monitor should not download the same file. Google’s image guidance recommends using srcset and sizes so the browser can choose among versions for different screens.

The idea in plain terms:

  • srcset lists the available widths of an image.
  • sizes tells the browser how wide the image will display at each breakpoint.
  • The browser combines that with the device’s screen density and picks the best file.

Most modern Shopify themes already output responsive markup through Liquid image filters. Where we find problems is in custom sections, page builders and apps that insert fixed-size images, which bypass the theme’s logic. When you audit, view the rendered HTML for your product grid and confirm that each image has a sensible srcset and that the sizes value reflects the real layout, not a default of 100vw.

Lazy loading and priority

Lazy loading is useful and easy to misuse. Shopify’s performance team advises avoiding lazy loading for images in the initial viewport, which is usually the LCP element, while still lazy loading off-screen assets.

The practical split:

  • Above the fold: the main product image and the hero banner load eagerly.
  • Below the fold: gallery thumbnails, related products, reviews with photos and footer imagery load lazily.

You can go a step further for the LCP image. A web.dev case study on Nuvemshop describes using fetchpriority=“high” on critical images to tell the browser to download them first, and stresses using it sparingly so it stays effective. One or two images per template is the right scale. If everything is high priority, nothing is.

Reserve space to prevent layout shift

Images that load without reserved space push the page around, which hurts the experience and the Cumulative Layout Shift (CLS) score. Shopify’s performance engineers call reserving layout space critical for preventing layout shifts as images load. Set width and height attributes or a CSS aspect ratio on every image, including those inside apps and banners.

Optimizing images in Shopify

Shopify is where most readers searching this topic land, so here is the short version of what to do and what to leave alone.

Do:

  • Upload clean originals at 2048 x 2048 px for square products.
  • Use theme image filters with proper widths in custom code.
  • Eagerly load the LCP image and lazy load the rest.
  • Audit apps that inject images, such as reviews, badges and upsell widgets.
  • Remove unused app code after uninstalling an app.

Leave alone:

  • Manual WebP conversion for storefront images. The CDN already negotiates WebP or AVIF.
  • Giant originals that no zoom feature uses.
  • Stacking several image-compression apps on top of each other.

Image work rarely lives alone. If your product pages are still slow after the image pass, the cause is often scripts, fonts or app bloat. Our RUM-first Shopify performance audit walks through how to find the real bottleneck using field data and bring LCP under 2.5 seconds. For headless builds, the same image principles apply, with more of the responsibility on your own code, as we cover in our piece on Shopify Hydrogen for developers.

File names and alt text

This is the cheapest SEO work on the page, and it doubles as accessibility.

Google’s guidance is to use descriptive, short file names and informative alt text that explains the image in the context of the page, without keyword stuffing. Screen reader users depend on that alt text to understand what is on the page.

Examples for a leather bag:

Weak Better
IMG_4821.jpg brown-leather-tote-bag-front.jpg
alt=“bag bag leather bag buy cheap bag” alt=“Brown leather tote bag, front view, with two shoulder straps”
alt=“” on a product photo alt text describing the color, material and angle

Guidelines we use:

  • Describe what is visible: product, color, material, angle or use.
  • Skip phrases like “image of”.
  • Vary the alt text across a gallery so each image adds information.
  • Leave alt empty only for purely decorative images.
  • Use the same naming pattern across the catalog so it can be bulk-edited.

If you manage thousands of SKUs, don’t write each by hand. Generate drafts from product data (title, color, material) and review samples. For wider context on how structured data feeds search and AI answers, see our entity SEO strategy for growth teams.

Help search engines find your images

Three steps make your images easier to discover:

  1. Use real image elements for products rather than CSS backgrounds, so crawlers can find them.
  2. Add Product structured data so images can qualify for rich results, as Google explains in its image guidance.
  3. Submit an image sitemap if your images load in ways crawlers may miss. The same documentation says sitemaps can help Google discover images.

Shopify generates a sitemap for products with their images automatically, so check it rather than rebuilding it.

Our perspective

Most stores treat image optimization as a one-time cleanup: run a compressor, tick the box, move on. Six months later a new campaign, a new app and a new merchandising team have undone it.

We think of images as a system with owners and rules. Someone owns the upload standard. The theme enforces dimensions and loading behavior. Apps are reviewed for what they inject. Performance is monitored with field data so a regression shows up in a week, not a quarter.

That is also why we pair strategy and implementation. The person who decides your LCP budget should be the one who sees the product template that blows it. When image rules, theme code and measurement sit with one accountable team, they stay fixed.

— Quick To Impress growth engineering team

How to check that it worked

Don’t trust your eyes on a fast office connection. Test properly.

  1. Baseline first. Record LCP, CLS and total image weight for your top product, collection and home pages before changing anything.
  2. Use a lab test. Shopify’s performance team suggests WebPageTest to compare image loading before and after, checking LCP and that image space is reserved.
  3. Check field data. Lab tests show causes. Real-user data shows whether shoppers on mid-range phones benefited.
  4. Review quality. Compare before and after at full zoom on your five most detailed products.
  5. Watch conversion. Track product page conversion rate and bounce rate for a few weeks after release, keeping other changes steady where you can.

If quality dropped, raise the quality setting for that category only. If LCP didn’t move, the hero image probably isn’t the bottleneck, or it is still being lazy loaded or discovered late.

When to bring in a team

A small catalog and a modern theme can handle most of this in an afternoon. Complexity changes the math: multiple storefronts, thousands of SKUs, custom themes, a headless build, or images flowing in from a PIM or DAM.

That is where we work. Quick To Impress embeds with marketing and technology teams on growth platforms and commerce engineering, including performance, templates and the integrations that feed them. Engagements run on monthly capacity: Core capacity at $3,500 to $5,999 per month, Growth capacity at $6,000 to $9,999, and Scale capacity from $10,000. Enterprise teams can see how we approach enterprise commerce work.

FAQ

What is the optimal image size for an ecommerce website?

It depends on the platform and the slot. On Shopify, 2048 x 2048 px usually displays best for square product images, and files can be up to 5000 x 5000 px. Use smaller versions for thumbnails and grids, ideally through responsive srcset delivery.

Which image format is best for product photos?

Shopify says PNG is best for most product images, followed by JPEG, and its CDN serves WebP or AVIF to browsers that support them. Upload a clean original and let delivery handle the rest.

Should I lazy load all product images?

No. Load the main product image and hero eagerly, since they are usually the LCP element. Lazy load images that sit below the fold.

What should alt text say for product images?

Describe what the shopper would see: product, color, material and angle, in a natural sentence. Avoid stuffing keywords, and keep it specific to that image.

How do I know my image optimization worked?

Measure LCP, CLS and image weight before and after, using a lab tool like WebPageTest plus real-user data. Then compare quality at full zoom on your most detailed products.

Sources