How to Optimise Images for Your eCommerce Website (2026 Guide)

Quick answer

To optimise images for your eCommerce website, convert product photos to WebP or AVIF format, compress each image below 200KB, write descriptive alt text with relevant keywords, add explicit width and height attributes to prevent layout shifts, and serve images through a CDN. These steps directly improve page speed, Core Web Vitals scores, and Google Image Search visibility — all of which drive more traffic and higher conversion rates.

Key takeaways

• Images typically account for 50–70% of an eCommerce page's total weight — optimising them is the single highest-leverage performance improvement most stores can make.
• WebP is the right default format for 2026: it is 25–35% smaller than JPEG at comparable visual quality and supported by 97%+ of browsers.
• Alt text, descriptive file names, and image sitemaps are not cosmetic — Google Images drives 22–27% of all web searches, reaching 40–60% in visual industries like fashion and home goods.

Images are the most important selling tool on any eCommerce product page. A shopper cannot touch, smell, or try on what you sell — so your photos do all the persuading. But every unoptimised image is a double penalty: it slows your page down and makes it harder for Google to understand what you are selling.

This guide walks through every meaningful image optimisation technique, in the order that produces the most impact, with specific targets and tool recommendations for each step.

Why image optimisation matters for eCommerce

Before diving into the how, it is worth being clear on what is at stake:

• Page speed and conversions: Google's research found that 53% of mobile visitors abandon pages that take longer than three seconds to load. Images are the leading cause of slow eCommerce pages. A 1-second improvement in load time can increase mobile conversion rates by up to 27%.
• Core Web Vitals rankings: Google uses Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) as ranking signals. The hero product image is almost always the LCP element. An unoptimised hero image alone can push your LCP above the 2.5-second threshold Google considers "good".
• Google Image Search traffic: Google Images accounts for 22–27% of all web searches. In fashion, home goods, and beauty, that figure reaches 40–60%. Stores with properly optimised images rank higher in image search and capture this free traffic that competitors miss.
• Bandwidth costs: If you serve thousands of product pages per day, every unnecessary kilobyte in your images adds up to real CDN and hosting costs.

Step 1: Choose the right image format

Format choice is the most impactful single decision in image optimisation. The wrong format can double or triple your file sizes before any compression is applied.

WebP — your default for everything

WebP delivers 25–35% smaller file sizes than JPEG at equivalent visual quality. Browser support is now 97%+, which means there is virtually no reason to default to JPEG for product images in 2026. Use WebP for all product photos, lifestyle shots, and banner images.

AVIF — maximum compression where it counts

AVIF (AV1 Image File Format) offers 50% smaller files than JPEG and 20% smaller than WebP. Browser support sits around 90% globally as of 2026. Use AVIF for your highest-traffic pages — homepage banners, category hero images, and top-selling product pages — where the performance gain justifies the encoding time. Serve WebP as the fallback via a <picture> element.

<picture>
  <source srcset="product-red-leather-bag.avif" type="image/avif">
  <source srcset="product-red-leather-bag.webp" type="image/webp">
  <img src="product-red-leather-bag.jpg" alt="Red leather shoulder bag, front view" width="800" height="800" loading="lazy">
</picture>

PNG — only for images with transparency

PNG is lossless and produces large files. Reserve it exclusively for product images where you need a transparent background — such as packshots on a white canvas or overlay graphics. Even then, convert to WebP with transparency support when possible.

JPEG — legacy fallback only

JPEG has no advantages over WebP for new images. Only use JPEG as the fallback src in <picture> elements for browsers that support neither AVIF nor WebP. Compress JPEG fallbacks to 80–85% quality in tools like ImageMagick or Sharp.

SVG — logos, icons, and simple graphics

SVG is resolution-independent and tiny for icons, logos, and UI elements. Use it wherever your graphics are vector-based. Never use SVG for product photography.

Step 2: Compress images to the right file size target

Format alone is not enough. You also need to compress images to an appropriate file size. The target depends on image role:

• Product hero images: Under 150KB in WebP.
• Product thumbnail images: Under 30KB in WebP.
• Category / collection banners: Under 200KB in WebP or AVIF.
• Homepage full-width hero: Under 250KB in AVIF, with WebP fallback under 350KB.

Lossy vs. lossless compression

Lossy compression (available in JPEG, WebP, AVIF) discards some image data to achieve smaller file sizes. For product photography, a quality setting of 75–85% in WebP is typically indistinguishable from the original to the human eye. Lossless compression (PNG, lossless WebP) preserves every pixel but produces larger files — use it only when fidelity is non-negotiable, such as technical product diagrams or print-ready assets being reused across channels.

Tools for batch compression

• Mida Free Image Compressor — browser-based JPEG, PNG, and WebP compression with no upload or sign-up.
• Squoosh (squoosh.app) — free browser-based tool, excellent for one-off optimisation and format comparison.
• TinyPNG / TinyJPG — simple drag-and-drop batch compression, integrates with Shopify and WordPress via plugin.
• ImageOptim (Mac) — runs multiple compression algorithms and strips unnecessary metadata automatically.
• Sharp (Node.js library) — for teams running custom build pipelines; handles WebP/AVIF conversion at scale.
• Cloudinary / imgix — cloud-based image transformation APIs that compress and convert on the fly based on the requesting device. The right choice for large catalogues with thousands of SKUs.

Step 3: Resize images to their actual display dimensions

Serving a 4000×4000px image in a slot that displays at 800×800px wastes bandwidth on 25× more pixels than the user ever sees. This is one of the most common and most costly mistakes on eCommerce sites with product catalogues uploaded directly from camera rolls or supplier files.

Define your display dimensions first

Before resizing, audit your product page template and note the maximum display width for each image slot on desktop and mobile. Common eCommerce display sizes:

• Product hero: 800×800px to 1200×1200px
• Thumbnail gallery: 150×150px to 300×300px
• Category card: 400×400px to 600×600px
• Homepage feature banner: 1440×600px to 1920×800px

Resize source images to 1.5–2× the CSS display size to account for high-DPI (Retina) screens, then let the browser scale down. Serving a 1600×1600px WebP image in a 800×800px container on a Retina display is correct. Serving a 4000×4000px image in the same container is wasteful.

Step 4: Write descriptive, keyword-rich file names

Google reads file names as a relevance signal for both web search and image search. A file named IMG_20260315_094532.jpg tells Google nothing. A file named womens-red-leather-shoulder-bag-front.webp tells Google exactly what the image shows and reinforces the keyword context of the page it lives on.

File naming rules

• Use lowercase letters only.
• Separate words with hyphens, not underscores. Google treats hyphens as word separators; underscores are treated as joiners, so red_bag is read as one word "redbag".
• Include the primary product keyword and one or two descriptive attributes (colour, material, view angle).
• Keep names concise: 3–6 words is the practical sweet spot.
• Rename files before uploading. On Shopify, file names become part of the CDN URL and cannot be changed without re-uploading.

Good vs. bad file name examples

Bad	Good
IMG_5021.jpg	mens-running-shoes-black-side.webp
product_image_1.png	ceramic-coffee-mug-12oz-white.webp
final_FINAL_v3.jpg	yoga-mat-non-slip-purple-rolled.webp

Step 5: Write effective alt text for every product image

Alt text (the alt attribute on an <img> tag) serves three purposes: it tells Google what the image contains, it appears in place of the image if the image fails to load, and it is read aloud by screen readers for visually impaired users. Skipping alt text or filling it with keyword-stuffed garbage hurts all three.

Alt text formula for product images

For product images, a reliable formula is: [product name] + [key attribute(s)] + [context if useful].

• Product hero: alt="Mens black running shoes, side view"
• Detail shot: alt="Non-slip sole close-up, mens black running shoe"
• Lifestyle shot: alt="Man running on trail wearing black running shoes"
• Packaging: alt="Mens black running shoes in branded box with tissue paper"

What to avoid in alt text

• Do not leave alt text empty on product images (empty alt is reserved for decorative images only).
• Do not start with "Image of" or "Photo of" — Google already knows it is an image.
• Do not stuff multiple unrelated keywords into a single alt attribute.
• Do not use the same alt text on multiple images of the same product — vary the description by view angle or detail shown.

Step 6: Add width and height attributes to every image tag

This is a small change with a disproportionate impact on Core Web Vitals. When a browser does not know an image's dimensions in advance, it cannot reserve space for it in the page layout. As images load, they push other content down, causing Cumulative Layout Shift (CLS) — one of Google's ranking signals, and one of the most frustrating user experiences on mobile.

Adding explicit width and height attributes lets the browser calculate the aspect ratio before the image loads and reserve the correct space:

<img
  src="ceramic-mug-white.webp"
  alt="White ceramic coffee mug, 12oz"
  width="800"
  height="800"
  loading="lazy"
>

If you use a responsive CSS rule like img { max-width: 100%; height: auto; } the browser will still scale the image correctly while using the declared aspect ratio to prevent layout shift.

Step 7: Implement responsive images with srcset

A single image file cannot be optimal for both a 375px mobile screen and a 1440px desktop screen. The srcset attribute lets you provide multiple image files at different sizes and let the browser choose the most appropriate one based on the device's screen width and pixel density.

<img
  srcset="
    product-bag-400.webp 400w,
    product-bag-800.webp 800w,
    product-bag-1200.webp 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  src="product-bag-800.webp"
  alt="Red leather shoulder bag, front view"
  width="800"
  height="800"
  loading="lazy"
>

The sizes attribute tells the browser what percentage of the viewport width the image will occupy at each breakpoint, so it can select the smallest file that still looks sharp. On a 375px mobile screen, serving the 400w image saves ~40KB compared to serving the 800w version.

Platforms like Shopify generate srcset automatically from uploaded images. If you are on a custom stack, use Sharp or Cloudinary to generate the required size variants during your build or upload pipeline.

Step 8: Enable lazy loading for below-the-fold images

Lazy loading defers the loading of images until they are about to enter the viewport. This means a product page with 20 images only downloads the images visible on screen at load time — dramatically improving initial page load speed and Time to First Byte (TTFB).

Native lazy loading requires a single attribute:

<img src="product.webp" alt="..." loading="lazy" width="800" height="800">

Browser support for native lazy loading is 96%+ as of 2026. No JavaScript library is needed.

Critical exception: do not lazy-load your LCP image

The hero image at the top of a product page is almost always the Largest Contentful Paint (LCP) element. If you add loading="lazy" to it, the browser will delay loading it, which directly increases your LCP time and hurts your Core Web Vitals score. Set loading="eager" (or omit the attribute entirely, since eager is the default) on your hero image and use loading="lazy" only on all other images.

For even faster LCP, add a <link rel="preload"> hint in the page <head> for the hero image:

<link rel="preload" as="image" href="product-hero.webp" fetchpriority="high">

Step 9: Serve images through a CDN

A Content Delivery Network (CDN) stores copies of your images on servers distributed around the world. When a user in Berlin requests your product image, it is served from a Frankfurt edge node rather than your origin server in Singapore — cutting latency from 200ms to 20ms.

For most eCommerce platforms, CDN delivery is already built in:

• Shopify uses Fastly to serve all uploaded images via their global CDN automatically.
• WooCommerce / self-hosted stores should add Cloudflare (free tier available) or BunnyCDN ($0.01/GB) in front of their origin server.
• Headless / custom stacks should use Cloudinary or imgix, which combine CDN delivery with on-the-fly image transformation (format conversion, resizing, quality adjustment) based on the requesting device.

CDN caching is controlled by Cache-Control headers. Set a long max-age (e.g. max-age=31536000, immutable) for product images and use cache-busting via versioned URLs or filenames when images change.

Step 10: Add product images to your XML sitemap

Google can discover images it finds on your pages through normal crawling. But submitting an image sitemap (or including image data in your existing XML sitemap) makes discovery faster and more reliable — especially for new products, seasonal catalogue updates, or images that are loaded via JavaScript.

The image sitemap extension adds <image:image> entries within each <url> block:

<url>
  <loc>https://www.example.com/products/red-leather-bag</loc>
  <image:image>
    <image:loc>https://cdn.example.com/images/red-leather-bag-front.webp</image:loc>
    <image:title>Red Leather Shoulder Bag – Front View</image:title>
    <image:caption>Handstitched red leather shoulder bag, available in S/M/L</image:caption>
  </image:image>
</url>

Shopify, WooCommerce (with Yoast SEO), and most enterprise platforms generate image sitemaps automatically. For custom stores, the Google image sitemap documentation covers the full spec.

Step 11: Optimise for Core Web Vitals — LCP and CLS checklist

Core Web Vitals are the single most important technical SEO metric set for eCommerce in 2026. Here is a condensed checklist focused specifically on image-related CWV issues:

Largest Contentful Paint (LCP) — target: under 2.5 seconds

• Hero image is served in WebP or AVIF format and under 150KB.
• Hero image has loading="eager" and a <link rel="preload"> in the <head>.
• Hero image is served from a CDN edge node close to the user.
• No render-blocking resources (large CSS, JavaScript) delay the hero image from painting.

Cumulative Layout Shift (CLS) — target: under 0.1

• Every <img> tag has explicit width and height attributes.
• Image containers in CSS use aspect-ratio or the padding-hack technique to reserve space before images load.
• No images are injected into the page by third-party scripts without reserved space.

Bonus: Use AI to generate new image variants — then A/B test them

Image optimisation improves speed and discoverability. But once your pages load fast, a harder question remains: which image actually drives more purchases?

The angle, background, model vs. packshot, lifestyle context, and number of images in a gallery all affect conversion rate significantly. These choices cannot be answered by technical best practices alone — and historically, testing image variants required hiring a photographer, scheduling a reshoot, waiting weeks, and only then discovering whether the new creative actually performed better.

That bottleneck is now gone.

Generate image variants with MidaGX, then test them immediately

MidaGX — Mida's generative experimentation feature — lets you pick any product image on your page and describe what you want to change in plain language. The AI generates a new image variant on the spot. That variant is immediately wired into an A/B test, ready to run against your live traffic — no designer, no developer, no reshoot required.

Examples of what you can prompt MidaGX to do with a product image:

• "Show this jacket being worn by a model outdoors" — generates a lifestyle variant from a packshot.
• "Place this on a clean white background" — removes a cluttered background and replaces it with studio white for marketplace-compliant imagery.
• "Make this look more premium — darker background, subtle lighting" — creates a luxury-tier creative to test against the original.
• "Show this product from the side angle" — generates an alternate angle when you only have a front-facing photo.
• "Add seasonal context — show this in a Christmas setting" — produces a seasonal variant without a dedicated shoot.

Once MidaGX produces the variant, Mida runs it as a proper A/B test: 50% of your visitors see the original image, 50% see the AI-generated variant, and Mida tracks which version produces more "Add to Cart" clicks and completed purchases. You get statistical significance data — not a gut feeling — before committing to any creative change across your catalogue.

Mida's script is 15KB compressed, so adding it to your store does not undo the performance gains from the image optimisation steps above.

Image hypotheses worth testing once you have MidaGX

• Lifestyle image vs. packshot on white background as the product hero.
• Model-worn vs. flat-lay for apparel and accessories.
• Premium dark background vs. neutral white background for electronics and luxury goods.
• Seasonal or contextual setting vs. evergreen studio shot.
• 3 images in the gallery vs. 6 vs. 9 — does more choice help or overwhelm?
• Zoom-on-hover enabled vs. disabled.
• 360° spin vs. static multi-angle gallery.

The combination of AI-generated variants and live A/B testing collapses what used to be a multi-week creative cycle into a same-day experiment. You ship a new image hypothesis in minutes rather than waiting for a shoot, and you only make the change permanent once your own customers have told you — with their clicks and purchases — that it works. For the broader principle, see why you should A/B test changes before deploying them.

Best tools for eCommerce image optimisation

Tool	Best for	Cost
Squoosh	Manual one-off optimisation, format testing	Free
TinyPNG / TinyJPG	Batch compression, Shopify/WP plugin	Free (500 images/month), paid plans available
ImageOptim (Mac)	Local batch compression, strips EXIF metadata	Free
Sharp (Node.js)	Build pipeline integration, WebP/AVIF conversion at scale	Free (open source)
Cloudinary	Large catalogues, on-the-fly transformation, CDN delivery	Free tier, paid from ~$99/month
imgix	Headless stores, real-time image transformation API	From $10/month
BunnyCDN	CDN delivery for self-hosted stores	$0.01/GB
Cloudflare Images	CDN + optimisation for self-hosted stores	$5/month for 100,000 images

Platform-specific notes

Shopify

Shopify automatically converts uploaded images to WebP and serves them via its Fastly CDN. However, it does not resize images on upload — you must upload images at the correct dimensions before uploading. Use a theme that generates srcset attributes in product image tags (most modern Shopify themes do). For bulk optimisation of existing product images, the Crush.pics or TinyIMG apps handle compression within the Shopify admin.

WooCommerce

WordPress and WooCommerce do not convert to WebP by default before WordPress 6.1. Install the EWWW Image Optimizer or ShortPixel plugin to handle WebP conversion, compression, and lazy loading. Both plugins also generate srcset variants automatically based on your configured image sizes.

Magento / Adobe Commerce

Adobe Commerce has a built-in image resizer that generates thumbnail sizes on the fly, but it does not produce WebP by default. The Yireo WebP or Webp Images module adds WebP support. For large catalogues, pairing Adobe Commerce with Cloudinary or Fastly IO (Fastly Image Optimization) handles format conversion and CDN delivery at scale.

BigCommerce

BigCommerce serves images via Akamai CDN and supports WebP delivery automatically for browsers that request it. Images are resized server-side based on your theme's configuration. Upload at 1280×1280px minimum to ensure all size variants render at high quality.

How to audit your current image performance

Before making changes, benchmark your current state so you can measure improvement:

1. Google PageSpeed Insights — run your top product page URL. Look at the "Opportunities" section for "Serve images in next-gen formats", "Efficiently encode images", "Properly size images", and "Defer offscreen images". Each recommendation shows the estimated file size saving.
2. Google Search Console — navigate to Core Web Vitals report. Filter by page type (product pages) and check LCP and CLS scores.
3. Chrome DevTools Network tab — load your product page with the Network tab open, filter by "Img", and sort by Size. This immediately shows which images are the largest contributors to page weight.
4. WebPageTest.org — run a filmstrip test to see exactly which images are delaying page rendering. The waterfall chart shows load order and timing for every resource.

FAQs

Q: Should I use WebP or AVIF for my Shopify store? Use WebP as your primary format — Shopify serves it automatically. AVIF offers better compression but encoding is slower and you would need a third-party app or Cloudinary integration to serve it. For most Shopify stores, WebP delivered through Shopify's CDN is the right choice without additional complexity.

Q: How many product images should each listing have? Aim for a minimum of 5–8 images per product: front, back, side, detail close-up, lifestyle in use, and size/scale reference. More images reduce return rates by setting accurate expectations. The question of whether more or fewer images in the gallery hero increases conversion on your specific store is worth A/B testing.

Q: Does image file size affect Google search ranking directly? File size affects ranking indirectly through page speed signals (Core Web Vitals, especially LCP). Google does not use file size as a direct ranking factor, but pages that load slowly because of large images rank lower than comparable pages that load quickly.

Q: Do I need different images for mobile? You need different sizes for mobile, not necessarily different creative. Use srcset to serve a smaller file to mobile browsers. If your product images are very landscape-oriented, consider using the <picture> element with an art direction crop — a vertically-cropped version for mobile — to ensure the product fills the smaller screen without excess whitespace.

Q: What image dimensions should I use for Shopify product images? Shopify recommends 2048×2048px as the maximum supported size for product images. In practice, uploading at 1200×1200px for square products is sufficient for most themes and significantly reduces storage and delivery overhead. Shopify generates all required size variants from your uploaded image.

Q: How do I check if my images are slowing down my pages? Run your product page URL through Google PageSpeed Insights (free). The "Opportunities" section will quantify exactly how much load time each image issue is adding and provide specific file-level recommendations. Chrome DevTools Network tab also shows image file sizes and load times in real time.

Q: Should product image backgrounds be white or lifestyle? It depends on your category and customer. Marketplace listings (Amazon, Google Shopping) require white backgrounds for compliance. For your own storefront, white backgrounds perform better for technical or functional products where detail matters. Lifestyle images perform better for fashion, home goods, and aspirational products. The only reliable answer is to test both with your actual customers. With MidaGX you can generate a lifestyle variant from an existing packshot and A/B test it against your live traffic the same day — no photographer needed.

Q: Can I generate product image variants with AI and test them? Yes. MidaGX lets you select any image on your product page, describe what you want to change in plain language, and it generates a new image variant that is immediately ready to run as an A/B test on your live store. You can go from idea to live experiment — for example, testing a model-worn lifestyle shot against your current packshot — in minutes rather than weeks.