Alt Text for AVIF, SVG & WebP

In 2026, the image formats running modern e-commerce have changed. JPEG and PNG — formats designed in the 1990s — are now the fallback, not the default. WebP has become the everyday workhorse, AVIF delivers the smallest files for hero shots and product galleries, and SVG handles logos, icons and UI. The payoff is real: faster pages, lighter bandwidth bills, and better Core Web Vitals.

But there’s a blind spot. Most alt-text advice still assumes everything is a JPEG. Modern formats raise two practical questions no one answers: can your alt-text tool even read them, and what does it cost you to tag them at scale? This guide covers both — the accessibility and SEO side, and the credit-cost side most providers don’t advertise.

1. Why Modern Formats Took Over E-Commerce

The switch isn’t about aesthetics — it’s about speed, and speed is money in e-commerce. Independent testing consistently shows WebP files run roughly 25–35% smaller than equivalent JPEG or PNG, and AVIF goes further: around 60% smaller than JPEG and about 20% smaller than WebP at the same visual quality.

That weight reduction lands directly on Largest Contentful Paint (LCP), the Core Web Vitals metric most tied to your hero and product images. Shrinking a large image by half can move LCP by 200–500 ms on mobile — often the difference between a “good” and a “needs improvement” score. Google has been clear that the format itself isn’t a ranking factor, but the page speed it unlocks is a factor. Faster product pages also convert better, which is the real reason stores bother.

It matters more than it sounds: images are the Largest Contentful Paint element on roughly 73% of mobile and 83% of desktop pages (Web Almanac 2024), so the format you ship is often the lever on your weakest Core Web Vitals metric. For discoverability, Google Search indexes images in BMP, GIF, JPEG, PNG, WebP, SVG and AVIF — so a modern format won’t hurt your image-search visibility, as long as the image sits in a real <img> or <picture> tag (Google doesn’t index CSS backgrounds) and carries proper alt text. And note: Google has said EXIF metadata isn’t a ranking signal — the alt text does that job.

2. The Four Formats You’ll Meet — and Their Alt-Text Implications

The golden rule across all of them: alt text describes what the image shows, never the file format. “Red leather ankle boot, side view” is good alt text whether the file is a JPEG, a WebP or an AVIF. Never write “AVIF image of a boot” — the format is irrelevant to a shopper using a screen reader or to Google Images.

3. The Hidden Cost: the “Format Penalty”

Here’s the part most format guides never mention. Many AI alt-text generators bill by credits — usually 1 credit per image. But advanced formats are more expensive to process: AVIF and HEIC use heavier codecs, and SVG is code (XML) rather than a picture, so the tool often has to decode or rasterise the file before an AI model can “see” it.

To cover that cost, some providers apply a format penalty: advanced formats are billed at 2 credits instead of 1. For example, AltText.ai’s documentation prices formats like AVIF, SVG, HEIC, HEIF, JP2 and TIFF at 2 credits each. That’s entirely legitimate — but it has a real budgeting consequence the moment your catalogue is mixed-format.

It compounds with two other common surcharges: per-language billing (some tools add +1 credit for each extra language) and animated or multi-frame files. None of this is hidden maliciously — it’s in the pricing docs — but it’s easy to miss until the credits run out faster than you planned. If your catalogue leans modern, a flat per-image price regardless of format is simply easier to forecast.

4. SVG Done Right: Decorative vs Meaningful

SVG is the one format where the alt-text decision genuinely changes, because SVGs are used for two very different jobs. Get this wrong and you either flood screen-reader users with noise or hide information they need.

Decorative SVGs → hide them

Dividers, background flourishes, purely ornamental icons next to text that already says the same thing — these carry no information. Give them an empty alt attribute or hide them from assistive tech:

Meaningful SVGs → describe them

Logos, charts, infographics, diagrams and standalone icons that label a control all carry meaning and need real alt text:

For an infographic or chart, the alt text should summarise the takeaway (“Bar chart: organic traffic up 40% after adding alt text”), not list every data point — put the full data in nearby text or a table. And note: because SVG is vector code, some AI tools can’t analyse it directly and must rasterise it first — another reason to check that your tagging tool actually supports SVG before you rely on it.

Inline SVG vs <img>: the technical catch

Here’s a trap most guides skip. The alt attribute only works when the SVG is embedded as a file via <img src="logo.svg" alt="...">. When the SVG is written inline in your HTML — the markup pasted straight into the page — there is no alt attribute to set. You give it an accessible name a different way:

A short <title> with role="img" is the minimum; add <desc> for charts that need more detail. A decorative inline SVG gets aria-hidden="true" instead. This <img>-vs-inline split is exactly where many generators fall down: some can’t process SVG at all (Webflow’s AI, for example, generates alt text for JPG, PNG, GIF, WebP and AVIF but not SVG), and others tag the file yet ignore inline graphics. If logos and icons matter to your brand, confirm your tool covers both.

5. File Names Matter Too — and AI Can Fix Them

Alt text gets the attention, but the file name is a second, separate image-SEO signal — and the one most stores neglect. IMG_4821.avif tells Google and shoppers nothing; red-leather-ankle-boot.avif tells both exactly what the image is. Descriptive, hyphen-separated, lowercase file names help products surface in Google Images, and they survive format conversion: rename once and the name carries through whether you later ship WebP or AVIF.

The catch is volume. Renaming thousands of camera- or supplier-numbered files by hand is the job that never gets done. This is where automation earns its place: some tools generate an SEO-friendly file name from the image content at the same time as the alt text. AutoAlt.ai, for instance, can rename newly uploaded files into keyword-based names during the upload flow — so the alt text and the file name are fixed in one pass instead of two.

6. Serving Modern Formats Without Tanking Core Web Vitals

Choosing AVIF is only half the job — how you serve it decides whether you actually gain the speed. The 2026 production pattern is the <picture> element with a layered fallback, and the alt text lives once on the inner <img>, shared across every source:

A few rules keep modern formats from backfiring on your scores:

• Don’t lazy-load the LCP image. Your hero or first product shot should load eagerly — add fetchpriority="high" and skip loading="lazy" on it. Lazy-loading the LCP element is one of the fastest ways to wreck the score.
• Always set width and height (or an aspect-ratio) so the browser reserves space and you don’t cause layout shift (CLS).
• Lazy-load everything below the fold with loading="lazy" — every image except the LCP one.
• Keep the alt identical across sources. Which format the browser picks is irrelevant to a screen reader; the description never changes.

7. Common Alt-Text Mistakes — Format Edition

The same handful of mistakes show up again and again, and modern formats add one of their own:

• Naming the format. “AVIF image of a boot” or “SVG logo graphic” — the format is noise. Describe the content.
• File name as alt text. alt="IMG_4821" helps no one, and a screen reader reading out a path is a poor experience.
• Keyword stuffing. alt="boots shoes buy boots best boots cheap boots" reads as spam to Google and is painful on a screen reader. One natural mention is enough.
• Identical alt on every variant. Twenty product shots all tagged “our product” give Google no reason to rank any one of them. Describe what’s different in each.
• Missing alt entirely. Leaving the attribute off is worse than an empty alt="" — assistive tech may read the file path aloud. Decorative images get alt=""; everything meaningful gets a description.

8. A Format-Agnostic Alt-Text Checklist

Whatever formats your store uses, these rules hold:

• Serve modern, keep a fallback. The 2026 pattern is AVIF → WebP → JPEG via the <picture> element. The alt lives on the inner <img> and stays the same for all sources.
• Describe content, not format or file name. No “IMG_4821.avif”, no “photo of”, no format names.
• Keep it concise. Aim for under ~125 characters; lead with the most important detail for product search.
• Decorative gets nothing. Empty alt="" or aria-hidden — don’t describe spacers and ornaments.
• Mind where your images are processed. Cloud taggers upload your images to their servers — check whether that’s inside the EU and whether files are stored or deleted, which matters under GDPR.
• Pick a tool that reads your formats — at a predictable price. Confirm it supports AVIF/SVG/HEIC and check whether those cost extra credits.

9. How AutoAlt.ai Handles Modern Formats

AutoAlt.ai was built for mixed, modern catalogues. It processes PNG, JPG, JPEG, WebP, GIF, SVG and AVIF, and every image counts as 1 credit regardless of format — no 2× penalty for AVIF or SVG, and translations are included in that single credit. In the upload flow you can even restrict generation to specific formats, so you only spend credits on the images that matter. All processing runs on EU servers in Germany, with no image storage.

The point isn’t that flat pricing is always the cheapest per image — it’s that for a format-diverse e-commerce catalogue, predictable beats cheap-with-asterisks. You can tag your whole library, AVIF and SVG included, and know exactly what it will cost.

10. Frequently Asked Questions