Image SEO 2026: WebP, AVIF and Alt Text for Stores

In e-commerce, images often decide in fractions of a second whether a visitor buys or bounces. Images are the LCP element on 73% of all mobile pages and 83.3% of desktop pages (Web Almanac 2024), which makes them the central lever for your Core Web Vitals. At the same time, 56% of shop visitors click into the product gallery first according to Baymard Institute — even before title or price (Baymard Institute). 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 73% of mobile and 83.3% of desktop 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 loads around 18 images on desktop and 16 on mobile, rising to 60 and 55 in the 90th percentile (HTTP Archive)
• The median page currently transfers 135 KB for the largest image payload, up 8% since 2022 (HTTP Archive)
• An average pageview causes around 0.36 g CO2e, with images contributing a significant share (Sustainable Web Design)
• 56% of visitors click the product gallery first — before title or price (Baymard Institute)
• 93% of consumers name visual product presentation as a central purchase factor (Justuno)

Visual search is becoming more important too. More than 10.1% of total Google traffic flows through images.google.com, and Google Images receive around 1 billion clicks per day on average (Backlinko). Being visible there 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.

WebP, AVIF and JPEG in direct comparison

Format choice is the biggest 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 large-scale WebP compression study on around 1 million images shows that WebP is 25–34% smaller than equivalent quality JPEG at the same SSIM score on average (Google WebP Compression Study). AVIF goes even further: compared to JPEG, AVIF achieves about 50% smaller file sizes at identical visual quality, and another 20–30% less than WebP (SpeedVitals / Cloudinary).

The numbers are clear: at 2.0 bits per pixel, JPEG is almost twice as heavy as WebP (1.3) or AVIF (1.4) for the same content (HTTP Archive). 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 behaviour.

The adoption trend underlines this recommendation: WebP's share of all web images grew 34% between 2022 and 2024, reaching about 12%, while JPEG's share fell from 40% to 32.4% (HTTP Archive). AVIF is starting from a smaller base but with +386% growth (from 0.3% to 1.0%) shows the strongest increase of any image format (HTTP Archive). 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 95.29% global coverage (caniuse.com), AVIF sits at 93.8% (caniuse.com). Apple closed the AVIF gap with iOS 16 and macOS Ventura, 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.

Despite this wide availability, many shops hardly use the potential: according to HTTP Archive, only 42% of websites use the srcset attribute, only 32% combine srcset with sizes, and the picture element appears on just 9.3% of sites (HTTP Archive). That is enormous, largely untapped performance potential — especially for headless commerce setups that can deploy modern front-end components.

Optimising 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 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 penalise your CLS score. Also add decoding="async" so the main thread is not blocked, and use fetchpriority="high" to explicitly prioritise the LCP image.

Using lazy loading the right way

Lazy loading is one of the most effective levers for taking load off shop pages. According to web.dev, modern image loading can improve LCP by more than 70% when applied correctly (web.dev). 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 has been possible without any library since Chrome 76 thanks to the native loading="lazy" attribute.

• Hero image: always loading="eager" plus fetchpriority="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" plus decoding="async"
• CSS background images: only with image-set() and media queries

Alt text: mandatory for SEO and accessibility

Alt text is the most 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 itself states that for web ranking mainly the first ~16 words of an alt text are considered, while image search can use up to 50 words (Google Search Central). Placing your keyword and motif 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 29 June 2025 without transition period, and violations can be fined with up to 100,000 euro (BFSG law / German Federal Accessibility Office). Missing or useless alt text is one of the most common BFSG audit findings — and one of the easiest to fix.

• Product image: product name + colour + 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" or alt="IMG_1234.jpg" is worse than an empty alt
• No keyword stuffing: natural language beats chaining SEO terms (Google Search Central)

Image CDNs as a scaling lever

As catalogues 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 HTTP Archive, 54% of all web requests are already served via CDN, and for the top 1,000 sites the share even reaches 71% (HTTP Archive).

A look at the technology shows how effective edge optimisation 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 catalogues with large image volumes.

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 licence 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 Pinterest or visual search traffic, this is a direct brand lever — Sprout Social reports Pinterest to have around 619 million MAUs in 2025, more than 600 million visual searches per month and 80% of users discovering new products there (Sprout Social).

Anchoring image SEO in your workflow

A one-off optimisation 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.

1. 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.
2. Create image presets per usage: hero, product, thumbnail, zoom, OG image. This keeps the output consistent.
3. Set up an upload pipeline with automatic conversion into AVIF, WebP and JPEG — in the PIM, CMS or image CDN.
4. Enforce alt text as a required field in the editorial tool, including a hint that the first 16 words carry the SEO weight.
5. Automate Lighthouse and CWV monitoring — for example daily via CI/CD or weekly via a dashboard.
6. Define a regression budget: no page should leave the target LCP after a release — otherwise the deployment gets blocked.
7. Run a quarterly image audit: archive old images, delete orphan thumbnails, update metadata.

Shops tracking their Lighthouse score evolution should know this: LCP currently accounts for 25% of the Lighthouse performance score (Chrome for Developers). Web.dev shows that top sites keep their LCP around 1,220 ms and therefore almost exclusively reach a score of 99 (web.dev). 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.

How XICTRON supports your image optimisation

As a specialised 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 legally sound. Our development teams implement image optimisation, 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.