Product photos are the heaviest part of almost every e-commerce page, and they are also the single biggest driver of conversion. That tension is exactly what product image optimization solves: keeping the visual quality that convinces a shopper to buy, while shipping files light enough to load in under a second on a mid-range phone.

This is a practical walkthrough, not a theory piece. Below you will find the pixel dimensions we use, the compression targets we hold designers to, how we handle WebP and AVIF conversion, how we keep white-background framing consistent across a full catalog, and the alt text and file naming patterns that can be reused for thousands of SKUs without anyone having to improvise.

What product image optimization actually means

Most guides stop at “compress your images”. That is one lever out of six. A properly optimized product image is optimized on every one of the following axes at the same time:

• Dimensions: the image is never larger in pixels than the largest space it can occupy on screen (plus zoom allowance).
• Format: it is served in a modern format (WebP or AVIF) with a safe fallback.
• Weight: it meets a file size budget expressed in kilobytes, not “looks fine to me”.
• Framing and background: the subject occupies a consistent share of the canvas across the whole catalog.
• Delivery: responsive srcset, lazy loading below the fold, priority loading for the hero image, CDN in front.
• Semantics: descriptive file name, descriptive alt text, structured data referencing the image.

Skip any one of them and you either lose speed or you lose visibility in Google Images and Google Shopping. Both cost revenue.

Step 1: choose the right pixel dimensions

The rule is simple: export at twice the maximum CSS display size, then let responsive markup serve smaller variants to smaller screens. Doubling covers high density (Retina-class) displays without going overboard.

Here are the dimensions that work for the vast majority of stores:

Image role	Recommended export size (px)	Notes
Category / collection thumbnail	600 x 600	Square crop, generated automatically from the master file
Product page main image	1600 x 1600	Sweet spot for quality vs weight on most templates
Zoom / lightbox version	2048 x 2048 to 2560 x 2560	Loaded on demand only, never with the initial page
Gallery thumbnails under the main image	200 x 200	Tiny files, always lazy loaded
Lifestyle / in-context shots	1600 px on the long edge	Keep native aspect ratio, do not force square
Master archive file	3000 x 3000 or larger, lossless	Never published; source for every future re-export

Why square is still the safest aspect ratio

A 1:1 canvas keeps grids tidy, prevents layout shift, and is accepted everywhere: marketplaces, Google Shopping feeds, social commerce, email. If your brand needs a taller frame, 4:5 is the second best choice. What you must avoid is mixing ratios inside the same grid, because the browser then reserves inconsistent space and your Cumulative Layout Shift score suffers.

Always keep a lossless master

Compression is destructive. If you compress a JPEG, then crop it, then compress again, artifacts stack up. Store one high resolution master per SKU (TIFF, PNG or high quality JPEG at 3000 px or more) and generate every published derivative from it. When you change templates in two years, you re-export instead of re-shooting.

Step 2: set hard compression targets

“Looks good enough” is not a target. Give your designers kilobyte budgets they can check in the export dialog. A comparable breakdown sits on tinyseo.com.

Image role	Target weight	Hard ceiling
Gallery thumbnail (200 px)	Under 10 KB	15 KB
Category thumbnail (600 px)	30 to 60 KB	80 KB
Main product image (1600 px)	80 to 150 KB	200 KB
Zoom image (2048 px and up)	200 to 350 KB	450 KB
Total image payload, above the fold	Under 300 KB	500 KB

In practice, a quality setting of 75 to 82 for JPEG and 72 to 80 for WebP hits those numbers on white-background product shots without visible degradation. Products with fine texture (knitwear, brushed metal, printed fabric) need the upper end of the range. Flat colour products (plastic housings, plain packaging) survive the lower end easily.

Lossy or lossless?

Use lossy compression for everything you publish. Lossless has one legitimate use in e-commerce: PNG exports of logos, icons, size charts and any graphic with sharp text or a genuinely transparent background. For photographs, lossless PNG typically produces files five to ten times heavier for no perceivable gain.

Strip the metadata

Camera EXIF data, colour profiles beyond sRGB, embedded thumbnails and editing history can add 20 to 100 KB per file. Strip everything except the sRGB profile. Keeping sRGB matters: without it, some browsers render colours flatter, and colour accuracy on product pages is directly tied to return rates.

Step 3: convert to WebP (and consider AVIF)

WebP is now the default working format for e-commerce. It is supported by every browser your customers realistically use and typically delivers 25 to 35 percent smaller files than JPEG at equivalent visual quality. AVIF goes further, often 40 to 50 percent smaller, at the cost of slower encoding and slightly less predictable rendering in older environments. bluetuskr.com walks through the specifics.

Format	Best for	Transparency	Relative weight
JPEG	Universal fallback, feed files for marketplaces	No	Baseline (100%)
WebP	Default for all on-site product photography	Yes	65 to 75%
AVIF	Large hero and zoom images, high traffic pages	Yes	50 to 60%
PNG	Logos, icons, size charts, true transparency	Yes	Heavy for photos
SVG	Badges, payment icons, line illustrations	Yes	Tiny, resolution independent

The safe delivery pattern

Serve the modern format first and let the browser fall back on its own:

<picture>
  <source type="image/avif" srcset="running-shoe-black-side-1600.avif">
  <source type="image/webp" srcset="running-shoe-black-side-1600.webp">
  <img src="running-shoe-black-side-1600.jpg"
       width="1600" height="1600"
       alt="Black running shoe, side view, mesh upper"
       fetchpriority="high" decoding="async">
</picture>

Two details in that snippet matter more than people expect. First, explicit width and height attributes let the browser reserve space and eliminate layout shift. Second, fetchpriority="high" on the main product image tells the browser this is the Largest Contentful Paint element and should not wait behind scripts. plytix.com published something useful on the subject.

Do not convert manually, twice, for every SKU

If you are managing more than a few dozen products, format conversion belongs in the pipeline, not in Photoshop. Three viable approaches:

1. Platform native: Shopify and most managed platforms already serve WebP automatically from a JPEG or PNG upload. Upload the best quality master you can and let the CDN handle derivatives.
2. Image CDN: a transformation service in front of your storage generates dimensions and formats on the fly from a single master file, driven by URL parameters.
3. Build-time batch: a script (ImageMagick, Sharp, Squoosh CLI) that converts a folder of masters into every required size and format before deployment.

Step 4: standardise white-background framing

Consistency is an optimization, not a nicety. When every product occupies the same share of the canvas, category grids look professional, shoppers can compare products at a glance, and your automated crops never cut off a handle or a heel.

Our framing standard for pure e-commerce shots:

• Background: pure white for marketplace compatibility, or a very light neutral (roughly #F7F7F7) if your brand needs a softer look on your own site. Pick one and never mix within a category.
• Subject fill: the product occupies 85 to 90 percent of the frame’s longest dimension.
• Padding: 5 to 8 percent clear margin on every side so crops and rounded card corners never clip the product.
• Shadow: either a consistent soft contact shadow on every product, or none at all. Half a catalog with drop shadows looks broken.
• Angle set: define a fixed sequence per category, for example front, three-quarter, side, back, detail, in-use. Same order on every product page.
• Colour: shoot with a grey card, convert to sRGB, and verify the white point so “white” is not slightly blue on one product and slightly warm on the next.

Framing template, in one line

Give photographers and retouchers a single instruction they cannot misread: square canvas, pure white background, product centred, 88 percent fill, 6 percent minimum margin, consistent soft contact shadow, sRGB, exported at 3000 px master. Everything downstream is then automatable.

Step 5: make zoom work without wrecking performance

Zoom is where most stores accidentally break their own speed scores, by loading a 2500 px file on page load just in case someone hovers.

The correct behaviour:

1. Load the 1600 px version as the visible main image.
2. Load the zoom version on interaction only: hover on desktop, tap or pinch on mobile.
3. Optionally preload the zoom file after the page has finished its main render, on desktop only.
4. Cap the zoom file at roughly 2560 px on the long edge. Beyond that, shoppers gain nothing and you pay in bandwidth.

A useful sanity check: a shopper wants to see stitching, grain, weave and print quality. If the detail is not visible at 2048 px, the problem is the photography (lighting, focus, distance), not the resolution. Adding pixels to a soft photo just makes a heavier soft photo.

Lazy loading, done properly

• loading="lazy" on every image below the fold: gallery thumbnails, related products, review photos, footer badges.
• Never lazy load the main product image. It is your LCP element and lazy loading it delays it measurably.
• On category pages, load the first row eagerly and lazy load the rest.
• Always pair lazy loading with width and height attributes or a CSS aspect ratio to prevent shift.

Step 6: file naming patterns you can reuse across the catalog

File names are a genuine ranking signal for image search, and they are also how your team stays sane when a folder holds 40,000 files. Use one pattern, forever.

Pattern: brand-product-name-attribute-view-size.webp

Do this	Not this
acme-trail-runner-black-side-1600.webp	IMG_4471_final_v3.jpg
oak-dining-table-180cm-front-1600.webp	DSC00218-edited-copy.jpeg
linen-shirt-sage-detail-collar-1600.webp	shirt%20photo%20(2).png

Rules to enforce:

• Lowercase only.
• Hyphens between words, never underscores or spaces.
• No accents, no special characters, no percent encoding.
• Three to eight words. Descriptive, not a keyword dump.
• Include the view when a product has multiple angles, so the set stays sortable.

Step 7: alt text rules for product image SEO

Alt text has two jobs: describing the image to a screen reader user, and describing it to a search engine. A good alt text serves both with the same sentence. There is no accessibility version and an SEO version.

Formula: [product name] + [key attribute] + [view or context], in natural language, under about 125 characters.

Image	Good alt text	Weak alt text
Main shot, black trail shoe	Acme Trail Runner in black, side view with mesh upper	shoe
Sole close-up	Close-up of the lugged rubber outsole on the Acme Trail Runner	shoes running trail shoes buy shoes online
Lifestyle shot	Runner wearing black Acme Trail Runner shoes on a forest path	image of product 4471
Decorative divider graphic	alt=”” (empty, intentionally)	decorative line separator graphic image

Templating alt text for a whole catalog

You do not need to hand-write 40,000 alt attributes. Build them from product data you already hold:

• {product_name} in {colour}, {view} view
• {brand} {product_name}, {material} detail
• {product_name} {size} shown {context}

Then hand-refine the top 100 to 200 revenue-generating products, plus anything you actively want ranking in Google Images. Templates cover the long tail; humans cover the money pages.

Three alt text mistakes that cost visibility

1. Duplicating the same alt text across all six images of one product. Each view deserves its own description.
2. Starting with “image of” or “photo of”. Screen readers already announce that it is an image.
3. Stuffing keywords. It reads as spam to Google and it is a genuinely hostile experience for assistive technology users.

Step 8: the SEO layer beyond alt text

Compression and alt text get you most of the way. These finishing touches decide whether your images show up in Google Images, Google Shopping and rich results.

• Structured data: include the image property in your Product schema, pointing at high resolution, publicly crawlable URLs. Multiple images per product is better than one.
• Image sitemap: list product image URLs so crawlers discover images loaded by scripts or sliders.
• Crawlable URLs: images behind a login, a blocked directory or a script-only loader cannot be indexed. Check your robots.txt for accidental blocks on image or CDN paths.
• Stable URLs: do not regenerate file names on every re-upload. Churning URLs resets whatever image ranking you had earned.
• Surrounding context: Google reads captions, headings and nearby text to understand an image. A product page with a real description helps its own images rank.
• Long cache headers: a one year cache lifetime on immutable image assets, with a version suffix when the file genuinely changes.

A reusable production workflow

Here is the sequence we hand to design teams so nothing depends on memory:

1. Shoot to the framing standard: square, white, 88 percent fill, fixed angle sequence, grey card for colour.
2. Retouch on the master: clean the background, correct colour, keep the file lossless at 3000 px or more.
3. Rename to pattern before anything leaves the retouching folder.
4. Batch export derivatives: 200, 600, 1600 and 2048 px, in WebP with a JPEG fallback (add AVIF for hero images).
5. Verify against the KB budget. Anything over the ceiling goes back for a lower quality setting or a tighter crop.
6. Strip metadata, keep sRGB.
7. Generate alt text from the template, refine top sellers manually.
8. Upload and confirm width, height, srcset, lazy loading flags and fetchpriority on the main image.
9. Test the live page: check LCP, confirm the browser is actually downloading the WebP or AVIF variant and not the fallback, confirm no layout shift.
10. Re-audit quarterly. Catalogs drift. Someone always uploads a 4 MB PNG eventually.

Quick audit checklist

• Is any published image wider than 2560 px? Resize it.
• Is any product image above 200 KB in the main gallery? Recompress it.
• Are you still serving PNG photographs? Convert them.
• Does the main product image carry loading="lazy"? Remove it.
• Do all images have explicit width and height? Add them.
• Are file names still IMG_xxxx? Rename to pattern going forward.
• Are alt attributes missing, empty or duplicated on product photos? Fill them from your template.
• Are images served from a CDN with long cache headers? If not, that is the fastest single win available.

Common mistakes we still see on live stores

• Uploading straight from the camera. A 6 MB, 6000 px JPEG resized by CSS to 400 px still downloads all 6 MB.
• Compressing an already compressed file. Generational loss shows up first in gradients and shadows on white backgrounds.
• Mixing aspect ratios in one grid. Guaranteed layout shift and a visibly amateur category page.
• Transparent PNGs for products on white. If the background is white anyway, transparency buys nothing and costs kilobytes.
• Text baked into images. Not indexable, not translatable, not accessible. Use HTML overlays.
• Optimizing once and never again. Image debt accumulates with every seasonal upload.

FAQ

What is the ideal image size for e-commerce product pages?

Export the main product image at 1600 x 1600 px and keep it under 200 KB. Provide a 2048 to 2560 px version for zoom, loaded on interaction only, and generate 600 px and 200 px variants for grids and thumbnails.

Is WebP better than JPEG for product images?

Yes, in almost all cases. WebP delivers roughly 25 to 35 percent smaller files at comparable visual quality, and supports transparency. Keep a JPEG fallback in a <picture> element and keep JPEG masters for marketplace feeds that do not accept WebP.

Should I use AVIF instead of WebP?

AVIF compresses better and is worth using for hero and zoom images on high traffic pages. Encoding is slower and support is slightly less uniform, so the practical approach is AVIF first, WebP second, JPEG last, all inside the same <picture> block.

How much compression is too much?

Watch the edges of the product and any smooth gradient against the white background. When you see banding, halos or blotchy patches at 100 percent zoom, you have gone too far. Quality 75 to 82 for JPEG and 72 to 80 for WebP is the reliable working range for product photography.

Does alt text really affect e-commerce rankings?

It affects image search visibility, which drives real product discovery traffic, and it contributes context to the page as a whole. It is also an accessibility requirement. Descriptive, non-duplicated alt text on every product image is a low effort, high return task.

Do file names still matter for image SEO?

They do. Descriptive, hyphenated, lowercase file names help search engines understand the image before they analyse it, and they make large catalogs manageable. Set the pattern once and apply it to everything new; renaming already indexed files should be done carefully, with redirects if URLs change.

Can I automate product image optimization for a large catalog?

Yes, and you should past a few hundred SKUs. An image CDN or a build-time script can generate every size and format from a single master file, while alt text can be templated from your existing product attributes. Reserve manual work for your best selling products and your framing standard.

How often should I re-audit my images?

Quarterly for an active catalog, and always after a theme change or a platform migration. New uploads, new suppliers and new plugins are how oversized files sneak back in.

Where to start

If you only have an afternoon, do this: identify your twenty highest traffic product pages, resize anything over 1600 px, convert to WebP, hit the 200 KB ceiling, add explicit dimensions, remove lazy loading from the main image, and rewrite the alt text on every gallery photo. That short list captures most of the speed and visibility gains, and it gives you a template you can then roll out across the whole catalog.

Need help building an image pipeline and framing standard your team will actually follow? Get in touch with us at j-a-b.net and we will audit your catalog and set up the workflow.