Reviewed by the SEOPointz team · Last reviewed June 2026. We test the format and compression advice below against live Core Web Vitals field data, not lab scores. SEOPointz may earn a commission from some links; it never changes what we recommend.
On most product pages, the single biggest file a shopper downloads is the hero image — and that same image is usually the one Google measures to decide whether your page feels fast. Image optimization sits at the awkward intersection of three goals that pull in different directions: photos need to load quickly, they need to describe themselves to search engines and screen readers, and increasingly they need to be recognizable to a camera. Get all three right and images stop being dead weight; they become an acquisition channel. This guide walks through what actually moves the needle in 2026, and where the popular advice is either outdated or oversold.
Why product images decide your Core Web Vitals score
Largest Contentful Paint (LCP) is the Core Web Vitals metric most ecommerce sites fail, and the culprit is almost always the main product image. Industry measurements put images as the LCP element on roughly 73% of mobile pages and over 83% of desktop pages, and on product pages specifically the hero shot is the LCP element about 84% of the time. In other words, your LCP score is mostly a question of how fast that one image renders.
That reframes the work. You don’t need to shrink every thumbnail on the page first — you need the above-the-fold hero to arrive fast. The highest-leverage fixes are unglamorous: serve the hero in a modern format, give it explicit dimensions so the layout doesn’t jump, and tell the browser it matters with fetchpriority="high". Crucially, do not add loading="lazy" to images in the first viewport — lazy-loading your LCP image is one of the most common self-inflicted speed wounds, because the browser deprioritizes the exact file it should be rushing.
AVIF, WebP, or JPEG: choosing a format
The format question has a clear answer now. AVIF produces the smallest files — commonly 30–50% smaller than a quality-matched JPEG, and at the high end around 65% smaller — with support across current Chrome, Firefox, Safari, and Edge. WebP is the dependable fallback: roughly 50% smaller than JPEG, faster to encode than AVIF, and supported everywhere for years. JPEG and PNG survive only as a last-resort fallback for ancient browsers.
The practical pattern is a <picture> element that offers AVIF first, WebP next, and JPEG last, so each browser takes the best format it understands. On quality settings, you have more headroom than instinct suggests: WebP at 75–85 and AVIF at 60–70 typically look indistinguishable from JPEG 85 to the human eye. A good target for a product photo is under 200KB in WebP or AVIF.
| Format | Size vs. JPEG (same quality) | Browser support | Best used as |
|---|---|---|---|
| AVIF | ~30–50% smaller (up to ~65%) | Current Chrome, Firefox, Safari, Edge | Primary format for photos |
| WebP | ~50% smaller | Universal for years | Reliable fallback |
| JPEG | Baseline | Everywhere | Last-resort legacy fallback |
| PNG | Larger (lossless) | Everywhere | Logos, graphics with transparency |
Responsive delivery without the layout shift
One image file can’t serve a phone and a 27-inch monitor well. Use srcset with at least three widths — a mobile, tablet, and desktop size — so the browser downloads only what the viewport needs instead of pushing a full-resolution desktop image onto a phone. Pair that with sizes so the browser picks correctly before layout is final.
Then guard against Cumulative Layout Shift: give every image explicit width and height attributes, or set an aspect-ratio in CSS. This lets the browser reserve the space before the image arrives, so the page doesn’t lurch as photos pop in — a small change that protects both your CLS score and the shopper who was about to tap “Add to cart.”
Alt text that earns its keep
Alt text does double duty: it’s what a screen-reader user hears, and it’s a signal Google uses to understand what an image shows. Write it for a person. Describe the product plainly — material, color, key feature — and keep it under about 125 characters. “Matte black stainless steel water bottle, 750ml, with bamboo lid” is far more useful than “water bottle buy online best price.”
Resist keyword stuffing. Cramming search terms into alt fields reads as spam to Google and as noise to the person relying on it. Decorative images — spacers, background flourishes — should get an empty alt="" so assistive tech skips them rather than announcing clutter.
Optimizing for visual search and Google Lens
Camera-based discovery is no longer a niche. Google reports Lens handling well over 10 billion visual searches a month, and its integration into Shopping means a shopper can photograph a product they spotted in the wild and be shown places to buy it — sometimes before they ever type a query. For visual categories like fashion, furniture, and home goods, that’s real traffic most stores aren’t competing for.
To show up there, images need to be genuinely clear: high resolution, well lit without harsh shadows, the product cleanly separated from its background (a neutral or white backdrop is safest), and shot from multiple angles. The technical companion is Product structured data — schema that ties price, availability, and rating to the image. That combination is what lets Google surface your photo as a rich result and match it confidently to a camera search.
Frequently asked questions
Should I convert my entire image library to AVIF at once?
You don’t have to, and a big-bang migration can introduce risk. Start with the hero images on your top-traffic product and category pages, since those drive your LCP scores, then roll the rest out. Use a <picture> element so browsers that can’t read AVIF fall back gracefully.
Does compressing images really affect my Google ranking?
Indirectly but meaningfully. Faster images improve LCP, and Core Web Vitals is a confirmed (if modest) ranking signal. The larger payoff is conversion: shoppers abandon slow pages, so speed earns you sales whether or not it nudges your position.
Is alt text or the image filename more important for SEO?
Alt text carries more weight and serves accessibility too, so prioritize it. A descriptive filename (bamboo-lid-water-bottle.webp rather than IMG_4821.webp) is a useful secondary signal, but it won’t rescue a poorly described image.
Great images start before optimization — with the shoot itself, covered in our guide to ecommerce product photography — and pay off only when the whole page is quick, which we break down in ecommerce website speed optimization.
