In e-commerce, images often decide in fractions of a second whether a visitor buys or bounces. An image is the LCP element on 68% of mobile pages (Web Almanac 2024), which makes it the central lever for your Core Web Vitals. At the same time, the median page transfers around 135 KB for its largest image alone (Web Almanac 2024). In this guide, we show how modern formats such as WebP and AVIF, clean alt text and well thought-out SEO structures deliver faster load times, better rankings and higher conversion rates – without compromising accessibility or legal requirements.
Why images decide your ranking
Images in modern online shops are no longer decorative extras but the most important visual sales lever. According to Web Almanac 2024, an image is the LCP element on roughly 68% of mobile pages (Web Almanac 2024) – exactly the element Google uses to judge perceived load time. Neglecting product imagery therefore means losing not only UX points, but rankings and visibility in organic search.
- The median page embeds around 13 images on mobile and 14 on desktop, rising to 56 and 62 in the 90th percentile (Web Almanac 2024)
- For the largest image on a page the median transfer is 135 KB, rising to 404 KB in the 75th percentile (Web Almanac 2024)
- The median image on the web is compressed to 2.1 bits per pixel (Web Almanac 2024)
- On desktop 20% of sizes attributes are inaccurate enough to change the selection from srcset, on mobile it is 14% (Web Almanac 2024)
- 45% of all img elements carry no alt text at all (Web Almanac 2024)
Visual search is becoming more important too. Being visible there with your product images unlocks an independent acquisition channel – especially for visual categories such as fashion, interior, decor or toys. A clean image strategy is no longer optional, it is mandatory for modern e-commerce SEO. How shops can actively leverage this trend is covered in our article on visual search with image recognition.
In most categories product visuals are the first thing a visitor perceives – they carry the purchase decision before title, description or price are even read. Better images therefore influence not only customer lifetime value but also brand trust.
WebP, AVIF and JPEG in direct comparison
Format choice is an important performance lever for shop images. JPEG remains the classic industry standard, but modern codecs deliver much smaller files at almost identical perceived quality. Google's WebP compression study, based on the Lenna, Kodak and Tecnick test collections plus a sample from the Google image crawl, shows that WebP is 25–34% smaller than equivalent quality JPEG at the same SSIM index on average (Google WebP Compression Study). AVIF goes even further: according to Web Almanac 2024 the median AVIF image needs 1.4 bits per pixel, while JPEG needs 2.0 bits per pixel (Web Almanac 2024).
| Format | Bits per pixel | Typical savings vs. JPEG | Browser support 2026 | Ideal use |
|---|---|---|---|---|
| JPEG | 2.0 (Web Almanac 2024) | — (reference) | all browsers | Legacy product photos, fallback |
| PNG | 3.8 (Web Almanac 2024) | larger than JPEG | all browsers | Logos, UI graphics with transparency |
| WebP | 1.3 (Web Almanac 2024) | 25–34% smaller (Google) | 96.74% (caniuse) | Main format for product imagery |
| AVIF | 1.4 (Web Almanac 2024) | smaller than JPEG | 95.35% (caniuse) | Hero images, large visuals |
| GIF | 6.7 (Web Almanac 2024) | significantly larger | all browsers | Avoid animation – prefer MP4/WebM |
The numbers are clear: at 2.0 bits per pixel, JPEG needs around half as much again as WebP (1.3) or AVIF (1.4) for the same content (Web Almanac 2024). For large hero images, collection banners or product video thumbnails, moving to AVIF is especially worthwhile because absolute byte savings are largest there. For list and thumbnail views with many small images, WebP often offers a better balance of file size, encoder speed and caching behavior.
The adoption trend underlines this recommendation: WebP's share of all web images grew 34%, reaching about 12%, while JPEG remains the most common format at 32.4% but lost 20% (Web Almanac 2024). AVIF is starting from a smaller base but with +386% shows the strongest increase of any image format (Web Almanac 2024). Preparing your shop for AVIF today positions you early for the ongoing format shift.
Browser support 2026: who can render what?
No format brings value if the browser cannot render it. The good news: browser support for modern formats is practically ubiquitous in 2026. WebP reaches 96.74% global coverage (caniuse.com), AVIF sits at 95.35% (caniuse.com). Apple closed the AVIF gap with Safari 16.4 on the desktop and Safari 16 on iOS, so Safari now renders AVIF just like Chrome, Firefox and Edge. For shops this means that using both formats safely is possible as long as a JPEG fallback covers the small remaining share of older browsers.
WebP: 96.74% support
Chrome, Firefox, Edge, Safari and Opera render WebP natively. Old Internet Explorer versions and a few rare mobile browsers still need a JPEG fallback (caniuse.com).
AVIF: 95.35% support
Safari has supported AVIF since version 16.4 on the desktop and Safari 16 on iOS. Combined with the picture element, you cover almost every active user (caniuse.com).
Fallback via picture tag
With the picture element you deliver AVIF first, then WebP, then JPEG. The browser automatically picks the best format it understands – without any JavaScript.
Despite this wide availability, many shops hardly use the potential: according to Web Almanac 2024, only 42% of mobile pages use the srcset attribute, and the picture element appears on just 9.3% of sites (Web Almanac 2024). That is enormous, largely untapped performance potential – especially for headless commerce setups that can deploy modern front-end components.
Optimizing images without quality loss
Picking a format is only the first step. What matters is delivering images in the right dimensions, with the right compression level and a clean cache strategy. A typical pitfall in WooCommerce (WooCommerce agency) or Shopware shops: product photos get uploaded in full print quality and then simply resized with CSS. The browser still loads unnecessarily large files – a classic LCP killer.
Use responsive image delivery via srcset, sizes and the picture element instead. That way the browser picks the correct resolution for each device and saves traffic for small screens. Here is a robust pattern that combines AVIF, WebP and JPEG at the same time:
<picture>
<source
type="image/avif"
srcset="/images/shoe-480.avif 480w,
/images/shoe-800.avif 800w,
/images/shoe-1200.avif 1200w,
/images/shoe-1600.avif 1600w"
sizes="(max-width: 600px) 92vw,
(max-width: 1024px) 50vw,
640px">
<source
type="image/webp"
srcset="/images/shoe-480.webp 480w,
/images/shoe-800.webp 800w,
/images/shoe-1200.webp 1200w,
/images/shoe-1600.webp 1600w"
sizes="(max-width: 600px) 92vw,
(max-width: 1024px) 50vw,
640px">
<img
src="/images/shoe-800.jpg"
srcset="/images/shoe-480.jpg 480w,
/images/shoe-800.jpg 800w,
/images/shoe-1200.jpg 1200w"
sizes="(max-width: 600px) 92vw,
(max-width: 1024px) 50vw,
640px"
width="1600"
height="1200"
loading="eager"
fetchpriority="high"
decoding="async"
alt="Beige trail running shoe with mesh upper and black sole, side view">
</picture>Always set width and height on the img element: without those, the browser recalculates the page height after loading and causes layout shifts that directly penalize your CLS score. Also add decoding="async" so the main thread is not blocked, and use fetchpriority="high" to explicitly prioritize the LCP image.
Using lazy loading the right way
Lazy loading is a lever for taking load off shop pages. The logic is simple: images outside the visible area are only fetched when the user scrolls near them. That saves bandwidth, CPU and battery – and is possible without any library thanks to the native loading="lazy" attribute. What matters is where it is applied: according to Web Almanac 2024, 9.5% of LCP images on mobile carry native lazy loading (Web Almanac 2024) – exactly where it hurts.
The web.dev dataset also shows the downside: if the LCP image is marked with loading="lazy" by mistake, the LCP gets measurably worse. The median page with lazy loading reaches a 75th percentile LCP of 3,546 ms, the median page without lazy loading 2,922 ms (web.dev). The rule therefore is: load all images above the first visible viewport eagerly, the rest lazily – and never add loading="lazy" blindly to every img tag.
- Hero image: always
loading="eager"plusfetchpriority="high" - Product image above the fold: load eagerly, also with high priority
- Thumbnails in the gallery below the fold:
loading="lazy" - Footer, cross-sell and review images:
loading="lazy"plusdecoding="async" - CSS background images: only with
image-set()and media queries
Alt text: mandatory for SEO and accessibility
Alt text is an often underestimated lever in image SEO. It serves two goals at once: it helps screen readers and therefore accessibility, and it gives Google the textual context required for image rankings. Google calls alt text the most important attribute for supplying additional metadata about an image and evaluates it together with computer vision algorithms and the content of the page (Google Search Central). Placing motif and keyword precisely at the start of the alt text is therefore key.
There is also a legal dimension: the German BFSG has been in force since 28 June 2025; service contracts concluded before that date may continue unchanged until 27 June 2030 at the latest (section 38 BFSG). Violations can be treated as a regulatory offense and fined with up to 100,000 euro (section 37 BFSG). Missing or useless alt text is a common BFSG audit finding – and one of the easiest to fix.
- Product image: product name + color + material + view (e.g. "Red leather handbag with gold clasp, front view")
- Detail image: describes the concrete detail (e.g. "Close-up of the stitching on the carrying strap")
- Lifestyle image: scene instead of just naming the product (e.g. "Woman carrying a red leather handbag at a market square")
- Decorative graphics: use empty
alt=""so screen readers skip them - No filler:
alt="image",alt="product"oralt="IMG_1234.jpg"is worse than an empty alt - No keyword stuffing: natural language beats chaining SEO terms (Google Search Central)
Google recommends placing images near relevant text wherever possible and on pages that are relevant to the image subject, and it draws information about the image subject from the content of the page, including captions and image titles (Google Search Central). Embedding images into WCAG 2.2 compliant structures – with a clear heading, surrounding body text and a caption – gives the crawler exactly the context signals it needs for a good ranking.
Image CDNs as a scaling lever
As catalogs and traffic grow, manual image maintenance becomes a bottleneck. This is where image CDNs shine: they convert original images on-the-fly into WebP or AVIF, generate multiple sizes for srcset and cache the result globally. According to Web Almanac 2024, 75% of third-party content and 48% of subdomain content come from a CDN, for HTML documents it is 33%; among the top 1,000 websites CDN usage reaches 70% (Web Almanac 2024).
A look at the technology shows how effective edge optimization can be: CDN provider Cloudflare reports that its Polish feature reduces average image file size by 48% in lossy mode and by 21% in lossless mode. Combined with WebP conversion, Polish saves around 26% additional for PNGs and 17% for JPEGs (Cloudflare). Numbers like that are particularly relevant for marketplaces, multistore setups and B2B catalogs with large image volumes.
Global edge delivery
Images are served from the nearest PoP, lowering TTFB and improving LCP for international visitors.
Automatic format negotiation
The CDN checks the Accept header to see which format the browser supports and delivers AVIF, WebP or JPEG without developer effort.
Signed URLs & hotlink protection
Many CDNs prevent hotlinking and protect against unwanted traffic usage, which is particularly important for exclusive product images.
XICTRON typically integrates image CDNs together with the shop's hosting architecture so that caching, security and format selection line up. This avoids the classic mistakes in which shop cache, CDN cache and image CDN step on each other's toes – a problem that especially affects express checkout flows where LCP and interactivity are tightly coupled.
Schema.org ImageObject in the online shop
Structured data is no longer a bonus but a central part of any serious SEO strategy. Google explicitly recommends describing images with the ImageObject schema and prefers JSON-LD (Google Search Central). For shops this means every product image should be part of the Product schema and also be describable as an independent ImageObject.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Lightweight Trail Running Shoe Summit Pro",
"description": "Trail running shoe with mesh upper, Vibram sole and 8 mm drop.",
"sku": "SP-2026-42",
"image": [
{
"@type": "ImageObject",
"contentUrl": "https://shop.example.com/images/summit-pro-1600.avif",
"thumbnailUrl": "https://shop.example.com/images/summit-pro-480.avif",
"width": 1600,
"height": 1200,
"caption": "Summit Pro trail running shoe side view",
"encodingFormat": "image/avif",
"creator": {
"@type": "Organization",
"name": "Shop Example"
},
"creditText": "Shop Example",
"copyrightNotice": "Copyright 2026 Shop Example",
"license": "https://shop.example.com/license/"
}
],
"brand": {
"@type": "Brand",
"name": "Summit"
}
}The additional fields creator, creditText, copyrightNotice and license are relevant for presentation in Google Images: since the rollout of image license features, Google shows these details as an overlay and makes your shop visible as the source (Google Search Central). For shops that rely heavily on visual search traffic, this is a direct lever for brand perception.
Anchoring image SEO in your workflow
A one-off optimization is not enough for a growing shop. New products, seasonal campaigns and creator content constantly push new images into your system. Anchor image SEO as a fixed part of your editorial and development workflow – ideally hand in hand with your content cluster SEO strategy.
- Define a consistent file name scheme (e.g.
brand-product-variant-view.jpg) – descriptive file names are one of the few context signals Google gets without an alt text. - Create image presets per usage: hero, product, thumbnail, zoom, OG image. This keeps the output consistent.
- Set up an upload pipeline with automatic conversion into AVIF, WebP and JPEG – in the PIM, CMS or image CDN.
- Enforce alt text as a required field in the editorial tool, including a hint to put motif and keyword at the start.
- Automate Lighthouse and CWV monitoring – for example daily via CI/CD or weekly via a dashboard.
- Define a regression budget: no page should leave the target LCP after a release – otherwise the deployment gets blocked.
- Run a quarterly image audit: archive old images, delete orphan thumbnails, update metadata.
Shops tracking their Lighthouse score evolution should know this: LCP accounts for 25% of the Lighthouse performance score, Total Blocking Time for 30% (Chrome for Developers). Chrome for Developers also gives a reference value: the best performing sites render LCP in around 1,220 milliseconds, and that measurement is assigned a score of 99 (Chrome for Developers). Consistently switching to modern image formats and clean lazy loading moves a shop structurally into that zone – with a visible effect on visibility, conversion and server costs.
Faster images improve Core Web Vitals and with them the conditions for organic visibility. At the same time, meaningful product visuals give visitors the orientation they need for a purchase decision: size, material, finish and fit are hard to judge without good imagery. Image work therefore pays into both sides – into rankings and into the completed order.
How XICTRON supports your image optimization
As a specialized e-commerce agency from Lower Saxony, we look at images as part of your shop's overall architecture, not in isolation. We review the current image setup, identify LCP killers, plan the move to modern formats and anchor everything in your hosting – including caching, CDN integration and monitoring. At the same time we keep an eye on BFSG requirements so that alt text and semantic structures are both SEO effective and compliant. Our development teams implement image optimization, srcset strategies and Schema.org markup directly in Shopware, WooCommerce or headless commerce projects – so that your images finally do what they are there for: sell.
This article is based on data from: Web Almanac 2024 (HTTP Archive), Google WebP Compression Study, caniuse.com, web.dev, Chrome for Developers, Google Search Central, the German Accessibility Strengthening Act (BFSG) and Cloudflare. The numbers referenced may vary depending on the time of measurement and market developments.
AVIF offers the best compression, but a JPEG or WebP fallback via the picture element is still advisable today. This covers the remaining browsers without AVIF support (caniuse.com). We typically use AVIF for hero and product images and WebP for thumbnails as a balanced combination.
As a rule of thumb, the most important information – product name, color, material, view – should appear at the start. Google calls alt text the most important attribute for supplying additional metadata about an image and evaluates it together with computer vision algorithms and the content of the page (Google Search Central). The language should remain natural; keyword stuffing does more harm than good.
An automated migration through the image CDN or shop media pipeline usually pays off because it standardizes delivery across the full catalog. New images are then produced in the same workflow. Experience shows that this yields the largest LCP gains, especially when older product lists are still heavily visited.
Yes, Google Shopping feeds benefit from high-quality images, clear motifs and proper resolution too. Google notes that sharp images are more appealing to users in the result thumbnail and can increase the likelihood that the page is visited (Google Search Central). Fixing this in feeds and in the shop usually pays off in both channels.
The most important rule: the LCP image must never receive loading="lazy"; it should be loaded eagerly with fetchpriority="high". Web.dev measures a 75th percentile LCP of 3,546 ms for the median page with lazy loading versus 2,922 ms without it (web.dev). A strict rule in your template system plus CWV monitoring helps avoid this mistake.
In most cases yes. According to Web Almanac 2024, 75% of third-party content comes from a CDN, and among the top 1,000 websites CDN usage reaches 70% (Web Almanac 2024). An image CDN handles format negotiation, caching and resizing automatically, which relieves small teams in particular. The effect on LCP and server costs is usually noticeable from moderate traffic levels – and therefore amortizes faster than many expect.