How to Optimize Product Images

6 minutes Intermediate How-To

Overview

Why Image Optimization Matters

  • Improve page speed and reduce bounce rate
  • Increase add-to-cart and conversion rates
  • Boost SEO rankings and organic traffic
  • Reduce server load and bandwidth costs by 30–60%

Optimize product images to improve page speed, conversions, and SEO. A faster, cleaner product gallery reduces bounce rate and increases add-to-cart and revenue, especially for growing catalogs.

Set measurable goals: Aim for LCP under 2.5s on product detail pages (mobile) and reduce total image bytes by 30–50%. These improvements typically increase add-to-cart rate, revenue per session, and organic rankings.

Impact First (Time-to-Value)

  • Enable CDN image optimization: 30–60% byte reduction; 15–30 minutes
  • Compress existing assets: 20–40% reduction; hours for large catalogs
  • Resize mis-sized images: Reduces blurriness and bytes; ongoing

Version compatibility: New Media Gallery Replace action is available in Magento 2.4.2+. Adobe Commerce on cloud supports Fastly Image Optimization (IO) for next-gen formats and compression. Magento Open Source or self-hosted environments can use third-party CDNs for similar optimizations.

Prerequisites

Before you begin, make sure you have:

Admin Panel Access

Access to Magento Admin Panel

Product Catalog Setup

Product catalog with images to optimize

Cache Management Access

Ability to purge Varnish/CDN cache (e.g., Fastly)

Media Gallery Permissions

Admin role with permissions to Catalog and Content > Media > Media Gallery

Best Practices

Use ImageMagick adapter if available for better quality/performance. Set via CLI: bin/magento config:set dev/image/adapter imagemagick (flush cache after). Plan changes off-peak, back up originals, and keep a list of SKUs/images changed so you can roll back quickly if needed.

What You'll Accomplish

By following this guide, you will:

  • Optimize product images end-to-end (format, size, compression, filenames)
  • Improve page speed, LCP, and visual quality to boost conversions
  • Reduce image payload by 30–60% through CDN and compression
  • Implement SEO-friendly filenames and alt text

Step-by-Step Instructions

0

Establish a baseline

Do this for 2–3 high-traffic PDPs:

  • Open Chrome Incognito > DevTools > Network, check "Disable cache", select the Img filter
  • Reload the page; note total Transferred (images only) and identify the largest product image size
  • Run Lighthouse (Mobile) or PageSpeed Insights; record LCP and image-related opportunities

Save baseline results (total image bytes, LCP score, largest image size) for before/after comparison. Document which pages you tested to ensure consistent measurement.

1

Choose the right format per image

Quick Win: Enable CDN Image Optimization First

If Fastly (or another CDN optimizer) is available, enable its image optimization first—this alone can reduce image payload by 30–60% within minutes.

Decide format before editing: Upload JPEG for photos and PNG when transparency is required. Out of the box (as of Magento 2.4.x), product image uploads accept JPEG/JPG, PNG, and GIF. WebP uploads for product images are not supported without customization.

To serve WebP/AVIF to browsers, upload JPEG/PNG and enable image optimization on your CDN (e.g., Fastly IO on Adobe Commerce) so the CDN delivers WebP/AVIF derivatives automatically.

Adobe Commerce on Cloud:

  1. 1. Go to Stores › Configuration › Advanced › System › Full Page Cache › Fastly Configuration › Image Optimization
  2. 2. Enable WebP/AVIF and set quality (around 70–80)
  3. 3. Click Upload VCL to Fastly (if prompted) and Purge All to apply changes

Magento Open Source/Self-Hosted:

Use a CDN (e.g., Cloudflare, Akamai) to auto-convert and compress images at the edge.

Verification

In Chrome DevTools › Network, select a product image and check Headers › Content-Type. Confirm image/webp or image/avif is served. If JPEG/PNG is still served to compatible browsers, recheck CDN config and purge caches.

2

Resize to target dimensions

Find your target sizes in your theme's view.xml (ask your developer), or measure rendered sizes on the storefront with DevTools. Prepare source images at ~2x the largest displayed width for each role (avoid upscaling). Do not crop to square unless your theme specifically uses square images.

Check Your Theme's Image Role Definitions:

In your theme, review app/design/frontend/<Vendor>/<theme>/etc/view.xml for roles such as:

  • product_page_image_medium – Main product detail page image
  • category_page_grid – Category listing grid images
  • product_page_image_small – Thumbnail images

Open each source image in your editor. Do not crop to square unless your theme requires it. As examples only (verify in your theme): category images are often ~600 px wide, thumbnails ~300 px; swatch sizes vary by theme/CSS and can be adjusted via CSS.

Pro Tip

Theme image sizes come from view.xml. Share this file with your implementer to align source image sizes and aspect ratios with the theme, preventing distortion or blurriness.

3

Compress and clean metadata

Use Squoosh, TinyJPG/TinyPNG, or ImageOptim to compress: set JPEG quality ~70–80; strip EXIF/metadata. Before exporting, convert images to the sRGB color profile to ensure consistent rendering across browsers and devices.

Compression Targets:

  • Aim for under 200 KB per main image (under 100 KB ideal for grid)
  • Visually compare to ensure quality is acceptable
  • After compression, zoom to 200% on key details (logos, stitching, text) and compare against the original

Bulk Optimization for Large Catalogs:

  1. 1. Export originals and run batch compression with ImageOptim CLI or Squoosh CLI
  2. 2. After re-upload, run bin/magento catalog:images:resize to pre-generate cached sizes before peak traffic

Performance Warning

catalog:images:resize is CPU and IO intensive. Run during off-peak hours or in maintenance mode. If available, use --batch-size to limit concurrent processing and monitor server load.

4

Apply clear, SEO-friendly filenames

Rename files with SKU and descriptive keywords, using hyphens (e.g., sku-12345-red-sneaker-side.jpg). Keep names lowercase; avoid spaces and special characters.

Why It Matters

Descriptive filenames improve image search visibility and help deduplicate assets by SKU for faster operations.

5

Upload and assign image roles in the product

  1. 1. Go to Catalog › Products. Edit a product.
  2. 2. In Images and Videos, drag-and-drop your optimized files
  3. 3. Set image roles as needed: Base Image, Small Image, Thumbnail, and Swatch
    (Base Image is used on the PDP, Small Image on listings, Thumbnail in carts/mini cart)
  4. 4. Magento generates resized images per role automatically—pick the appropriate source image(s); you don't need to upload different sizes
  5. 5. Add meaningful Alt Text. Reorder images as needed. Click Save.

Alt Text Best Practices:

  • 80–125 characters
  • Describe product + variant (color/material/angle)
  • No keyword stuffing. Make it unique per variant.
  • Example: "Men's red leather sneaker, side view, size 10 (SKU 12345)"

Optional: Advanced Features

  • Check Exclude to hide an image from the gallery while still using it for a role (e.g., Swatch)
  • If you run multiple store views/languages, switch the Store View (upper-left) and enter localized Alt Text; uncheck Use Default Value to override
6

Organize and, if needed, replace via Media Gallery

For multiple images, go to Content › Media › Media Gallery. Create folders by category/season. Upload optimized images.

To replace a heavy existing file that's reused, select it and use Replace to upload the lighter version, preserving the file path so references update automatically—this avoids broken links and saves time reassigning in CMS blocks, categories, and products.

Version Note

The Replace action is available in the New Media Gallery (Magento 2.4.2+). On older versions, upload the new file and reassign it in products or CMS content. If you do not see Replace, ensure the New Media Gallery is enabled (Stores › Configuration › Advanced › System › Media Gallery: set Enable Old Media Gallery to No) and you are on Magento 2.4.2 or later.

7

Flush image cache

  1. 1. System › Cache Management › Click Flush Catalog Images Cache
  2. 2. Click Flush Page Cache. If you use Varnish, flush the Page Cache and trigger a Varnish purge.
  3. 3. Purge your CDN cache. For Fastly: Stores › Configuration › Advanced › System › Full Page Cache › Fastly Configuration › Purge (Purge All)

Warning: Avoid using Flush Cache Storage on production systems.

8

Validate on the storefront

Open the product page and a category grid in a private window. Confirm images render quickly, look sharp, and are not stretched. Hover/zoom should work. Right-click › Inspect › Elements to confirm alt attributes are present. In DevTools › Network, confirm smaller image transfer sizes.

Test on Mobile Conditions:

  • In Chrome DevTools › Network, enable Fast 3G or Slow 4G throttling
  • Re-run Lighthouse on Mobile
  • Aim for LCP < 2.5s on PDPs and a 30–50% reduction in total image bytes vs. baseline

Check Core Web Vitals Details

  • Ensure product images have width/height attributes or CSS aspect-ratio to prevent layout shifts (CLS)
  • For LCP, ensure the main above-the-fold product image is not lazy-loaded (loading='eager' or no lazy attribute)
  • Coordinate with your developer if adjustments are needed
9

Measure the improvement

Re-run Lighthouse or PageSpeed Insights. Compare LCP and total image bytes with your baseline. Record improvements. Target LCP < 2.5s (Mobile) and at least a 30–50% reduction in total image bytes on PDPs and category pages.

Track Impact Over 2–4 Weeks:

Monitor these metrics in your analytics tool:

  • Add-to-Cart rate
  • Conversion rate
  • Revenue per session
  • Bounce rate

Annotate the optimization date to attribute improvements.

If Targets Aren't Met

Take these actions and retest: re-compress the heaviest images, enable or tune CDN image optimization (WebP/AVIF, quality 70–80), align aspect ratios with view.xml, and avoid upscaling. If possible, limit the number of above-the-fold images on PDPs.

Verification

To confirm everything is working correctly:

  • Admin Configuration
    • ✓ In Admin › Catalog › Products, confirm images display with correct roles (Base/Small/Thumbnail/Swatch) and meaningful Alt Text
  • Storefront Rendering
    • ✓ On PDP and category pages (Incognito), confirm images load quickly, look sharp, and are not stretched or distorted
  • Performance Metrics
    • ✓ In DevTools › Network (Img filter), confirm total image bytes decreased vs. baseline
    • ✓ Re-run Lighthouse (Mobile) and confirm LCP improved relative to the baseline

Common Issues and Solutions

DavidLambauer DavidLambauer 92 1 carl-simpson carl-simpson 8 2
View all contributors
Edit this page on GitHub