AVIF vs WebP in 2026: An Image Strategy for Faster Pages

Images decide how fast your site feels

On most small-business websites, images account for the majority of the bytes a visitor downloads, and the largest image is very often the Largest Contentful Paint element that Google's Core Web Vitals measure. Get images right and pages feel quick on a phone in a patchy signal area; get them wrong and no amount of code tuning saves you.

There is a commercial angle too: page speed influences both Google rankings and conversion, and image weight is usually the single biggest lever you can pull. The two modern formats that matter in 2026 are WebP and AVIF. Both are supported by every major browser, both beat JPEG and PNG comfortably, and choosing between them is less about winners and more about where each one fits.

WebP and AVIF, compared honestly

WebP: the reliable workhorse

WebP has been universally supported for years, encodes quickly, and typically produces files around a quarter to a third smaller than an equivalent JPEG. It handles photographs, graphics with transparency and animation, which makes it a safe default for bulk conversion where encoding speed matters, such as user uploads or very large media libraries.

AVIF: the compression leader

AVIF, based on the AV1 video codec, usually compresses photographs harder still, often approaching half the size of a comparable JPEG, and it degrades more gracefully: fewer blocky artefacts and less colour banding in skies and gradients. It also supports HDR and wide colour gamut. The trade-off is slower encoding, which matters for pipelines processing thousands of images but not for a brochure site's fifty.

In short: AVIF for the smallest files and the best-looking low-bandwidth images; WebP when encoding speed or older tooling is a constraint. Serving AVIF with a fallback, covered below, gets you both.

Run your own file-size test in ten minutes

Do not take anyone's percentages on faith, including ours; compression results swing widely with the content of the image. Squoosh, a free browser-based tool from Google, makes testing painless:

• 1. Drag in a real image from your site, ideally your homepage hero.
• 2. Set the right-hand pane to AVIF and adjust quality until you cannot see a difference at normal zoom.
• 3. Note the file size, then repeat with WebP and MozJPEG for comparison.
• 4. Test three image types: a photograph, a graphic with text, and a transparent logo, because the winner can differ for each.

A typical outcome with a photographic hero: the JPEG original weighing hundreds of kilobytes, the WebP noticeably smaller, and the AVIF smaller again, at which point your hero image may weigh less than your stylesheet. Text-heavy graphics sometimes tell a different story, which is exactly why you test with your own files rather than trusting headline figures.

A conversion pipeline for non-developers

You do not need a developer or a command line to adopt modern formats:

• WordPress: core has accepted AVIF uploads since version 6.5, and plugins such as ShortPixel, Imagify or EWWW convert existing libraries and serve the best format each browser supports automatically.
• Shopify: the platform's CDN already negotiates WebP and AVIF for capable browsers; your job is simply to upload sharp, correctly sized originals.
• Any site behind a CDN: Cloudflare's image optimisation, Bunny Optimizer and similar services convert on the fly, with no changes to your files.
• Manual batches: Squoosh for a handful of images, or XnConvert, a free desktop tool, for whole folders at a time.
• For developers: the sharp library in Node or ImageMagick scripts slot neatly into any build process.

Whichever route you choose, keep your original files at full quality. Formats will improve again, and you want to re-encode from clean sources, not from already-compressed copies.

The picture-element fallback recipe

Where you control the HTML, the picture element serves each browser the best format it understands. The pattern is a <picture> wrapping two <source> elements and an <img>. The first source points at the AVIF file with type="image/avif", the second at the WebP with type="image/webp", and the img carries the JPEG plus all the usual attributes. Browsers pick the first type they support and ignore the rest, so nobody downloads more than one version.

• Keep alt text on the img element; it applies to whichever source loads.
• Set explicit width and height so the page does not shift about while images load.
• Add loading="lazy" to below-the-fold images, but never to your hero.
• Give the hero fetchpriority="high" so browsers fetch it before less important assets.

With browser support where it stands in 2026, the JPEG fallback rarely triggers, but it costs nothing and still protects visitors on old embedded webviews, smart TVs and corporate machines running elderly browsers.

Your image strategy in five steps

• 1. Resize first. A 4,000-pixel photo displayed at 800 pixels wastes more bytes than any format choice can recover; export at the sizes you actually use, with srcset for responsive variants.
• 2. Adopt AVIF as your primary format, with WebP or JPEG as the fallback.
• 3. Automate conversion through your CMS or CDN rather than doing it by hand forever.
• 4. Keep originals archived at full quality for future re-encoding.
• 5. Measure LCP in PageSpeed Insights before and after, so you know exactly what the change bought you.

Image strategy is one of the highest-return performance jobs on any small-business site, and it needs doing once, properly, rather than revisited every month. If you would like your site's images, formats and Core Web Vitals audited and fixed, our team at Thind Global Services can take care of it.