Image Compression Formats Compared: JPG vs WebP vs AVIF in 2026
Choosing the right image format for the web in 2026 is no longer as simple as "use JPEG." WebP has been widely supported for years. AVIF offers even better compression but comes with encoding complexity. Meanwhile JPEG — introduced in 1992 — is still the universal baseline every device on earth can open. Here is how the formats compare in practice.
The baseline: JPEG
JPEG (Joint Photographic Experts Group) has been the dominant image format for three decades because it does one thing extremely well: compress photographic images with tunable quality loss at low computational cost.
The JPEG algorithm works by dividing an image into 8×8 pixel blocks, applying a discrete cosine transform to each block, and quantising the frequency coefficients. This is why JPEG compression artefacts look like blocks at high compression levels — the block grid becomes visible when too much frequency information is discarded.
Typical real-world compression ratios compared to an uncompressed bitmap:
- JPEG at 90% quality: 5–15× smaller than uncompressed, minimal visible artefacts
- JPEG at 75% quality: 15–30× smaller, very mild artefacts visible under close inspection
- JPEG at 50% quality: 30–60× smaller, visible blocking artefacts at normal viewing size
JPEG's limitations: no transparency support, no lossless mode, and visible artefacts on images with sharp edges (text, graphics, diagrams). For photographic content it is excellent. For anything else, it is the wrong tool.
WebP: Google's 2010 answer
WebP was developed by Google and released in 2010 as a single format with both lossy and lossless modes, transparency support, and animation support. It uses a compression algorithm derived from the VP8 video codec.
Over JPEG, the advantages are meaningful. WebP lossy achieves comparable visual quality at 25–35% smaller file sizes — a 200 KB JPEG at 80% quality is typically 130–150 KB as WebP. WebP also supports transparency (often 25–45% smaller than an equivalent PNG), a true lossless mode (around 26% smaller than PNG for the same image), and animation with full colour where GIF is limited to 256 colours per frame.
Browser support as of mid-2026: Chrome (since 2011), Firefox (since 2019), Safari (since 2020), Edge (since 2018). WebP is now supported by 97%+ of browsers globally. It is safe to use as the primary format for web delivery with JPEG as a fallback for legacy systems.
WebP's limitation: encoding speed. Creating a WebP file is computationally more expensive than creating a JPEG at the same quality. This matters at scale (image CDNs, on-the-fly conversion) but is imperceptible for individual file operations.
AVIF: the current state of the art
AVIF (AV1 Image File Format) is a container format that stores images compressed using the AV1 video codec. AV1 was developed by the Alliance for Open Media (a coalition including Google, Apple, Microsoft, Amazon, and others) specifically to outperform HEVC without patent royalties.
AVIF achieves comparable visual quality to JPEG at 50–60% smaller file sizes — roughly double the efficiency gain of WebP over JPEG, and 40–50% smaller than an equivalent WebP. It handles gradients, skin tones, and natural photography particularly well — the areas where JPEG blocking artefacts are most noticeable. For photographic content, the difference is visible at moderate compression levels.
Browser support as of mid-2026: Chrome (since 2020), Firefox (since 2021), Safari (since 2022, iOS 16). Edge (since 2021). Global support is around 94–95% of browsers. A small gap remains with older browsers and some mobile browsers.
AVIF's real-world limitation is encoding speed. Encoding a high-quality AVIF file is significantly slower than JPEG or WebP — for a single image, this may mean seconds rather than milliseconds. For server-side image pipelines processing thousands of images, this has infrastructure implications. For a user converting a photo manually, it is not a concern.
Practical comparison at the same visual quality
Using a typical 12-megapixel photograph (4032 × 3024 px) as a reference:
| Format | Approximate file size | Notes |
|---|---|---|
| JPEG (85% quality) | ~1.8 MB | Baseline. Mild artefacts at edges. |
| WebP (equivalent quality) | ~1.2 MB | ~33% smaller than JPEG. Similar visual quality. |
| AVIF (equivalent quality) | ~700 KB | ~60% smaller than JPEG. Excellent for gradients. |
At aggressive compression settings, AVIF's advantage grows. At maximum quality, the differences narrow because the bottleneck shifts to content detail rather than codec efficiency. When I tested this with a batch of product photos for a client project, the AVIF files were consistently 55–60% smaller than the equivalent JPEG with no visible difference at normal screen size.
When to use each format
Use JPEG when
- The file needs to open on any device without exception, including old printers, legacy software, and email clients from 2010.
- You are distributing photos to a general audience (family, clients) without knowing what software they use.
- The upload form or platform specifies JPEG or does not accept WebP/AVIF.
Use WebP when
- You are optimising images for a website and control the delivery pipeline.
- You need transparency (logos, interface elements) and want smaller files than PNG.
- Your target audience uses modern browsers (97%+ as of 2026).
- You want a single format with both lossy and lossless modes.
Use AVIF when
- File size is the primary constraint and encoding time is acceptable.
- You are building a web application targeting Chrome/Firefox/Safari 16+ users.
- You are working with photographic content with smooth gradients (AVIF excels here).
- You want to future-proof your image pipeline — AVIF adoption is growing rapidly.
Use PNG when
- The image requires lossless quality: screenshots, interface mockups, pixel art.
- The image has sharp edges and solid colours (PNG compresses these better than JPEG).
- You need maximum compatibility with transparency (PNG is universally supported; WebP alpha is not).
The best practice for web delivery in 2026
Serving images on the web, the optimal approach is to offer AVIF with WebP as a fallback and JPEG as the final fallback, using the HTML <picture> element:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="800" height="600">
</picture> The browser automatically picks the first format it supports. AVIF-capable browsers get the smallest file; WebP-capable browsers get the second-smallest; everyone else gets JPEG. This approach requires maintaining three versions of each image but delivers optimal performance across the entire browser matrix.
For a smaller site or simpler workflow, serving WebP with a JPEG fallback covers 97%+ of users and is significantly simpler to implement.
Converting between formats
The keptlocal Convert Image tool converts between JPG, PNG, and WebP entirely in your browser. Drop your images, select the output format, and download — no upload required. For AVIF output requiring the AV1 encoder, Squoosh (Google's browser-based tool, open-source) is the easiest option — it also lets you compare the compressed result side-by-side before downloading, which is useful when you are calibrating a quality setting.
Convert images between JPG, PNG, and WebP in your browser with the keptlocal Convert Image tool — no upload, no account.
Shrink JPG, PNG, and WebP images in your browser — no uploads, no limits.
No upload. No signup. Runs in your browser.