Speeding up your website: AVIF and WebP instead of legacy formats

In today's web, page load speed is not just an abstract technical metric—it's a direct indicator of conversion rates and search engine rankings. According to Google research, if a mobile page's load time increases from 1 to 3 seconds, the bounce rate rises by 32%.

The main "weight contributor" on any modern landing page, online store, or corporate portal remains the media content. Graphics generate between 50% and 70% of a web page's total weight.

Yet thousands of projects still serve users heavy JPEG photos and uncompressed PNG illustrations designed back in the 1990s. In 2026, using legacy formats by default means deliberately giving up top search rankings and losing mobile traffic.

Let's explore the technological evolution of image containers and find out how choosing the right format can save your site's loading speed.

Honored Veterans: Why JPEG and PNG Have Reached Their Limit

To understand the advantages of newer technologies, we need to look at how their predecessors are built.

JPEG (Joint Photographic Experts Group) — The 1992 Standard

JPEG uses discrete cosine transform (DCT). The algorithm splits the image into 8×8 pixel blocks and discards color details that the human eye is less sensitive to.

• Main drawback: Outdated mathematical models. When trying to heavily compress a JPEG file, block boundaries become visible, and a characteristic "noise" (compression artifacts) appears around high-contrast elements (e.g., text or a logo on a photo).
• Limitation: No alpha channel (transparency) support.

PNG (Portable Network Graphics) — The 1996 Standard

PNG was designed as a lossless compression format based on the DEFLATE algorithm. It's ideal for graphics with sharp edges, flat color areas, icons, and text.

• Main drawback: Huge file sizes when dealing with gradients and photos. A vector banner with gradients exported as PNG-24 with transparency can easily weigh 3–5 MB.

A New Era: WebP and AVIF Under the Hood

Modern web demands maximum compression while preserving flexibility (transparency, animation, wide color gamut). The classics have been replaced by containers based on video stream compression algorithms.

WebP: A Mature All-Rounder from Google

Based on the VP8 video codec, WebP combines the best features of JPEG and PNG: it supports both lossy and lossless compression, as well as full transparency and animation.

• Efficiency: On average, 25–35% smaller than JPEG at similar visual quality, and up to 30% smaller than PNG.
• Compatibility: In 2026, WebP support in browsers reaches 99.8% (including older Safari versions and mobile web views).

AVIF: A Revolution Based on the AV1 Codec

AVIF (AV1 Image File Format) is an open format developed by the Alliance for Open Media (AOMedia), which includes Google, Mozilla, Apple, Microsoft, and Netflix. It's built on the advanced AV1 video codec.

• Efficiency: AVIF compresses files 50% better than JPEG and 20–30% better than WebP while maintaining excellent detail.
• Technological edge: Supports 10- and 12-bit color (HDR), wide color gamuts (P3/Rec.2020), and avoids pronounced pixel noise under extreme compression (instead of "blocks," AVIF softly blurs the texture).

Comparative Analysis: Benchmarks and Impact on Core Web Vitals

The key metric for page efficiency in Google's algorithms is LCP (Largest Contentful Paint). It measures the time it takes for the largest element (often the main banner or Hero image) to render within the viewport.

If your Hero banner weighs 1.8 MB in PNG format, the LCP on a mobile 4G connection will be around 3.2 seconds (the "needs improvement" zone). Converting the same banner to AVIF reduces its weight to 180 KB, and LCP instantly improves to an ideal 0.8 seconds.

Comparison Table of Format Characteristics

Parameter	JPEG	PNG	WebP	AVIF
Underlying algorithm	DCT (1992)	DEFLATE (1996)	VP8 / VP9	AV1
Lossless compression	No	Yes	Yes	Yes
Transparency (Alpha channel)	No	Yes	Yes	Yes
Average weight relative to JPEG	100% (baseline)	150–300%	65–75%	40–50%
Artifacts under heavy compression	Blocks, pixel noise	None (but file size grows)	Light blur	Soft smoothing
Browser support (2026)	100%	100%	~100%	>93%

Practical Implementation Strategy for Your Site

Despite AVIF's dominance, the ideal architecture for a modern site follows the principle of graceful degradation.

1. Prepare Source Files

Always save source materials (from Figma or stock photo libraries) in the highest quality. Avoid converting JPEG to AVIF "on the fly" repeatedly—double lossy compression will destroy detail.

If clients or content managers upload heavy source files in HEIC (from iPhone), TIFF, or legacy PNG formats to your site, automate their processing. Use the Convert Images tool on Flimpa to quickly convert heavy sources into efficient WebP or AVIF asset arrays.

2. Additional Optimization

Before pushing graphics to production, run files through lossless compression algorithms. The Compress Image tool on Flimpa gently strips metadata (EXIF tags, camera data, geolocation) and optimizes color tables, saving an additional 15–20% of file size without losing a single pixel.

3. Markup Using the <picture> Tag

To guarantee 100% image rendering for all users (including rare legacy devices), use the correct HTML structure. The browser will automatically select the most advanced format it supports:

HTML <picture> <!-- 1. Browser attempts to load the ultra-light AVIF --> <source srcset="banner.avif" type="image/avif"> <!-- 2. If AVIF isn't supported, fall back to reliable WebP --> <source srcset="banner.webp" type="image/webp"> <!-- 3. Fallback for legacy systems --> <img src="banner.jpg" alt="Main banner" loading="lazy" width="1200" height="600"> </picture>

Summary

Migrating your site from JPEG/PNG to WebP and AVIF is the fastest, cheapest, and most effective way to boost page load speeds, improve SEO metrics, and reduce server load.

1. Use AVIF as the primary format for photos, banners, and complex illustrations.
2. Keep WebP as a universal layer for transparency and as a backup format.
3. Leave PNG and JPEG in the past—treat them as archive formats for source files in your local storage.

Optimize your project's graphics in a couple of clicks on Flimpa and win the battle for milliseconds against your competitors!