If you have copied photos off a phone, exported assets from a design tool, or saved an image from the web in the last few years, you have probably ended up with a folder full of mixed extensions: .jpg, .heic, .webp, .avif. Each represents a different generation of image compression, and each makes different trade-offs between file size, quality, compatibility, and features. This guide explains what each format actually is, where it shines, and how to choose between them.
A Short History of Lossy Image Compression
The problem all four formats are trying to solve is the same: photographic images are large, and storing or transmitting them losslessly is impractical. So they discard information the human eye is unlikely to notice — high-frequency detail, subtle color variations — in exchange for dramatically smaller files. The art of each format lies in which information it discards and how cleverly it stores what remains.
The chronology is roughly:
timeline
title Lossy Image Format Chronology
1992 : JPEG : DCT-based, ubiquitous
2010 : WebP : Google, derived from VP8 video
2017 : HEIC : Apple, derived from HEVC / H.265
2019 : AVIF : AOM, derived from AV1A pattern emerges: every modern image format is essentially a single video frame in a sophisticated video codec wrapper. That is not coincidence — video codecs have absorbed an enormous amount of compression research, and image formats benefit from the spillover.
JPEG (1992)
The format every program understands. JPEG uses block-based DCT compression, chroma subsampling, and Huffman coding. It works well for photographs but produces visible artifacts (blockiness, mosquito noise) at low quality settings.
- Strengths: universal support; fast to encode and decode; mature ecosystem
- Weaknesses: no alpha channel; no animation; mediocre compression by modern standards
- Typical use: anything that needs to “just open everywhere”
A 32-year-old format is still the safest default for a reason. If you are not sure who will open your image, JPEG is the answer.
HEIC / HEIF (2017)
HEIC stands for High Efficiency Image Container — technically the file wrapper, with HEVC providing the actual compression. Adopted by Apple as the default for iPhone photos starting with iOS 11.
- Strengths: roughly 2× smaller than JPEG at the same visual quality; supports transparency, image sequences (Live Photos), and HDR
- Weaknesses: HEVC is patent-encumbered, which has limited adoption outside Apple; many Windows and web platforms still need plugins to decode it
- Typical use: iOS photo storage; cross-Apple workflows
If you have an iPhone, HEIC is silently saving you significant storage every day. If you share those files with non-Apple users, you may find yourself converting to JPEG more often than you would like.
WebP (2010)
Google’s attempt to replace both JPEG and PNG with a single format. WebP supports both lossy (VP8-based) and lossless modes, transparency, and animation.
- Strengths: 25–35% smaller than JPEG at equivalent quality; broad browser support since 2020; royalty-free
- Weaknesses: lossy WebP can soften fine detail more than JPEG at high quality settings; some older image viewers and editors still lack support
- Typical use: web delivery — virtually every major site serves WebP versions of its images now
WebP was the bridge format. It was good enough to push the web away from JPEG-only, but AVIF has since surpassed it on compression.
AVIF (2019)
Based on the AV1 video codec, developed by the Alliance for Open Media (Google, Mozilla, Netflix, Amazon, Apple, Microsoft, and others). AVIF is royalty-free and currently the most efficient mainstream image format.
- Strengths: 30–50% smaller than JPEG; supports HDR, wide color gamut, alpha, and animation; royalty-free
- Weaknesses: encoding is slow (AV1 trades encode time for compression efficiency); some older browsers and image viewers still missing support; tooling is younger and less polished
- Typical use: bandwidth-sensitive web delivery; streaming thumbnails; future-proofing
AVIF is the format most likely to dominate the next decade of web imagery. It has the right combination of compression, royalty-free licensing, and broad-coalition browser support. See Getting Started with AVIF for a hands-on encoding guide.
Side-by-Side Comparison
| Feature | JPEG | HEIC | WebP | AVIF |
|---|---|---|---|---|
| Year | 1992 | 2017 | 2010 | 2019 |
| Underlying codec | DCT | HEVC | VP8 | AV1 |
| Compression vs JPEG | baseline | ~50% smaller | ~30% smaller | ~40% smaller |
| Lossless mode | No | Yes | Yes | Yes |
| Transparency (alpha) | No | Yes | Yes | Yes |
| Animation | No | Yes | Yes | Yes |
| HDR / wide gamut | No | Yes | Limited | Yes |
| Royalty-free | Yes | No | Yes | Yes |
| Browser support (2026) | Universal | Safari only | Universal | Wide |
| Encode speed | Very fast | Fast | Fast | Slow |
| Decode speed | Very fast | Fast | Fast | Medium |
(Compression numbers are approximate and vary heavily by content. Photographic images favor newer codecs more than synthetic images do.)
Visual Comparison: Same Source, Four Formats
To make the size differences concrete, here are two source images each encoded in all four formats. Quality settings were tuned to be roughly perceptually equivalent on a typical desktop display (JPEG q≈85, HEIC q=50, WebP q=80, AVIF crf=30). Sizes shown are the actual on-disk file sizes.
HEIC note: outside Safari, browsers don’t render HEIC. The HEIC tile below shows the JPEG fallback via
<picture>. The size figure is still the real HEIC file size — open the actual.heiclink in Safari or a HEIC-aware viewer to see the encoded result.
Photographic subject (1114×760)
For typical photographic content like this, AVIF cuts the file by more than half while looking essentially identical at normal viewing distance. WebP and HEIC sit in between, both well under the JPEG baseline.
High-detail graphic source (1200×861, originally PNG)
The richer, more detailed source closes the gap between formats — AVIF’s lead over WebP narrows, and HEIC catches up with WebP. This is the pattern you generally see: AVIF wins by larger margins on simpler photographic content, while busier images compress more uniformly across formats. Always benchmark on your own representative content rather than trusting a single vendor’s headline number.
How to Choose
A practical decision tree:
- Sharing a file with someone you don’t know? → JPEG. Universal support beats every other consideration.
- Building a website and care about page weight? → AVIF with WebP and JPEG fallbacks via the
<picture>element. Most CDNs and image services (Cloudflare Images, Vercel, imgix) handle this automatically. - Storing photos on an iPhone or Mac? → HEIC is fine; it is the system default for good reason.
- Need transparency? → AVIF or WebP. PNG also works but produces much larger files for photographic content.
- Need lossless quality (e.g., archival)? → AVIF lossless or PNG. Avoid JPEG.
- Building a UI asset pipeline? → AVIF for raster, SVG for vector, with WebP as a fallback.
A Note on “Quality”
When comparing formats, it is important to compare at equivalent perceptual quality, not equivalent file size or quality slider value. A JPEG at quality 80 and an AVIF at quality 80 are not directly comparable — the encoders use different scales, different tone-mapping, and different psychovisual models. The fairest way to compare is to encode the same source image at multiple settings in each format, then plot file size against a perceptual metric like SSIM or VMAF. Several open-source benchmarking tools (e.g., image_optim_pack, Cloudinary’s image format comparison page) do this automatically.
The Format That Actually Wins
For most users, the format that wins is the one your tools handle without thinking. iPhones save HEIC; Chrome serves AVIF; old programs open JPEG. The good news is that, in 2026, conversion is cheap, automatic, and widely supported. Pick the format that matches your delivery context and let the tooling handle the rest.