Why Image Format Choice Matters
Every image on a web page adds weight. The format you choose determines how much bandwidth each image consumes, how quickly it decodes in the browser, and whether it supports transparency or animation. In 2026, three formats dominate the conversation: JPEG (the long-standing default), WebP (Google's modern alternative), and AVIF (the newest contender based on the AV1 video codec).
Choosing well can shave hundreds of kilobytes off a page without any visible loss in quality. Choosing poorly means either bloated pages or unnecessary compatibility headaches.
JPEG: The Universal Baseline
JPEG has been the web's photographic workhorse since the mid-1990s. It uses lossy compression tuned for continuous-tone images such as photographs and illustrations with smooth gradients.
Strengths
- Universal browser and device support — every platform decodes JPEG without issue
- Mature tooling: Photoshop, GIMP, ImageMagick, Squoosh, and every image editor support it
- Progressive JPEG allows a low-resolution preview before the full image loads
- No licensing or patent concerns
Weaknesses
- No transparency support (alpha channel)
- No animation
- Lossy only — each re-save degrades quality
- Compression efficiency is lower than WebP or AVIF at equivalent visual quality
WebP: The Practical Middle Ground
Google introduced WebP in 2010, and browser adoption has since reached effective universality. WebP supports lossy compression, lossless compression, transparency, and animation — all in a single format.
Strengths
- Typically 25–35 % smaller than JPEG at the same perceived quality
- Supports alpha transparency (replacing the need for PNG in many cases)
- Supports animation (an alternative to GIF)
- Supported in all modern browsers including Safari (since version 16)
Weaknesses
- Older software and some native OS image viewers still lack WebP support
- Maximum dimension of 16383 × 16383 pixels
- Lossy WebP can produce slightly different artefacts compared to JPEG — some photographers dislike the "smearing" at low quality settings
AVIF: Maximum Compression, Growing Support
AVIF is based on the AV1 video codec and was standardised in 2019. It offers the best compression ratios of the three formats, particularly at low to medium quality settings where JPEG and WebP both show visible artefacts.
Strengths
- 30–50 % smaller than JPEG at comparable visual quality — and often 15–20 % smaller than WebP
- Supports HDR, wide colour gamut, and 12-bit colour depth
- Transparency and animation support
- Royalty-free under the Alliance for Open Media
Weaknesses
- Encoding is significantly slower than JPEG or WebP — up to 10× for high-quality settings
- Browser support is still catching up: Chrome, Firefox, and Safari 16.4+ support it, but older browsers do not
- Maximum tile size is 8193 × 4320 unless using grid-based encoding
- Tooling is less mature than for JPEG or WebP
Side-by-Side Comparison
| Feature | JPEG | WebP | AVIF |
|---|---|---|---|
| Lossy compression | Yes | Yes | Yes |
| Lossless compression | No | Yes | Yes |
| Transparency | No | Yes | Yes |
| Animation | No | Yes | Yes |
| HDR / wide gamut | No | No | Yes |
| Browser support | Universal | ~97 % | ~92 % |
| Encoding speed | Fast | Moderate | Slow |
| Typical file size (photo) | Baseline | ~25–35 % smaller | ~35–50 % smaller |
When to Use Each Format
Use JPEG when:
- You need guaranteed compatibility with every device, email client, and legacy system
- You are serving images to platforms you do not control (e.g. RSS feeds, email newsletters)
- Encoding speed matters and file size is acceptable
Use WebP when:
- You control the delivery environment and want a meaningful size reduction over JPEG
- You need transparency without the file-size penalty of PNG
- You need animated images without the colour limitations of GIF
- You want broad browser support with a single format
Use AVIF when:
- Page weight is critical and you can afford slower encoding (typically done at build time)
- You can serve AVIF with a JPEG or WebP fallback via the
<picture>element or content negotiation - You are targeting modern browsers and can accept that a small percentage of users will receive the fallback
Practical Implementation
The most robust approach is to serve all three formats 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 picks the first source it supports, falling through to the <img> tag for older clients. This gives you the best compression where possible without breaking anything.
CDNs such as Cloudflare, Fastly, and AWS CloudFront can also perform automatic format negotiation based on the Accept header, removing the need for multiple <source> elements entirely.
Frequently Asked Questions
Can I just use AVIF everywhere and forget the rest?
Not yet. Around 8 % of global browser traffic still lacks AVIF support. You need a JPEG or WebP fallback unless you are certain of your audience's browsers.
Does WebP support CMYK or print workflows?
No. WebP is designed for screen display. For print, stick with TIFF or high-quality JPEG.
Is JPEG XL worth considering?
JPEG XL offers excellent compression and can losslessly recompress existing JPEGs. However, Chrome dropped its JPEG XL support in 2023, leaving Firefox and Safari as the only major supporters. Adoption remains limited.