Four image formats dominate the web — JPEG, PNG, WebP, and AVIF — and the reason they produce such different file sizes comes down to how each one compresses data. This article opens up the compression model behind each format: the math JPEG uses to shrink photos, why PNG can be lossless, and how WebP and AVIF borrow techniques from video codecs to beat both. If you already know the technical side and just want a recommendation, our guide on which image format to use gives the direct decision for each use case.
The core distinction: lossy vs lossless
Every compression model falls into one of two camps. Lossless compression removes only mathematical redundancy — repeated patterns and predictable pixel sequences — and reconstructs the original image exactly, pixel for pixel. Lossycompression goes further: it permanently discards image information that human vision is unlikely to notice, trading a small amount of fidelity for a large reduction in file size. PNG is lossless. JPEG is lossy. WebP and AVIF can do either. Understanding which model a format uses — and how it decides what to throw away — explains every trade-off below.
JPEG: the workhorse for photographs
JPEG has been the standard format for photographic web images since the mid-1990s. It uses a lossy compression model based on the Discrete Cosine Transform (DCT): the image is divided into 8×8 pixel blocks, transformed into frequency components, and the high-frequency color detail that human vision is less sensitive to is quantized away. The result is a small file that looks nearly identical to the original at normal viewing sizes.
JPEG's strengths:
- Universal support across every browser, OS, email client, and app
- Efficient for photographs and complex gradients
- Adjustable quality slider gives direct control over the size/quality trade-off
- Widely understood by developers, designers, and content teams
JPEG's weaknesses:
- No transparency support
- Produces visible blocking artifacts on text, sharp edges, and flat-color areas
- Quality degrades each time the file is re-saved
- Less efficient than WebP and AVIF at equivalent quality
When to use JPEG: photographs and camera images that do not need transparency, especially when maximum compatibility with old systems is required.
PNG: the right tool for graphics
PNG uses lossless compression. Every pixel value is preserved exactly. This makes it ideal for images where accuracy matters: text that must remain sharp, logos that must render cleanly at any size, screenshots that must match the original pixel-for-pixel, and diagrams with flat-color regions. PNG also supports a full alpha channel for per-pixel transparency.
PNG's strengths:
- Lossless: no quality degradation on re-save
- Alpha channel transparency
- Sharp text and hard edges with no compression artifacts
- Excellent compression for flat-color and repetitive content
PNG's weaknesses:
- Files are very large for photographs — often 5–10× larger than JPEG
- No benefit for photographic content where lossless accuracy is unnecessary
When to use PNG: logos, icons, screenshots, diagrams, UI graphics, and any image that will be edited further. Also the correct format for images with transparent backgrounds.
WebP: the practical modern default
WebP was developed by Google and supports both lossy and lossless compression as well as alpha transparency. Lossy WebP uses a VP8-based compression model that is more efficient than JPEG's DCT approach. Lossless WebP applies a different algorithm tuned for pixel-accurate reproduction with good compression on varied content.
As of 2026, WebP is supported in Chrome, Firefox, Safari, Edge, and all major mobile browsers. There is no meaningful compatibility risk for new web projects. It effectively replaces both JPEG and PNG in most scenarios with smaller files and no loss of features.
WebP's strengths:
- 25–35% smaller than JPEG at equivalent visual quality for photographs
- Supports alpha transparency
- Supports both lossy and lossless modes — one format for most use cases
- Broad browser support
- Fast encoding compared to AVIF
WebP's weaknesses:
- Not supported in email clients or some older native apps
- Some CMS plugins and image editors have limited WebP support
- Less compression efficiency than AVIF for complex content
When to use WebP: most web images. If you are choosing a default format for a new project today and do not have a specific constraint that prevents it, WebP is the straightforward recommendation.
AVIF: maximum compression for modern audiences
AVIF is built on the AV1 video codec, a royalty-free format developed by a consortium that includes Google, Apple, Amazon, Netflix, and Mozilla. It achieves some of the best compression ratios available for web images: typically 30–50% smaller than WebP and 50–60% smaller than JPEG at equivalent visual quality. It supports alpha transparency, HDR, wide color gamut, and both lossy and lossless modes.
Browser support reached broad availability in 2023–2024. Chrome, Firefox, Edge, and Safari all support AVIF as of 2026.
AVIF's strengths:
- Best-in-class compression for photographs and complex imagery
- Alpha transparency, HDR, and wide color gamut
- Royalty-free: no licensing costs for browser vendors or developers
AVIF's weaknesses:
- Encoding is slow — generating AVIF from large images takes significantly longer than WebP or JPEG
- Less toolchain support in some older image editors and build pipelines
- Marginal improvement over WebP may not justify added complexity for smaller projects
When to use AVIF: static sites and content-heavy pages where file size is the primary concern and you have build infrastructure that can absorb the slower encoding time.
Why better compression costs encoding time
There is a consistent pattern across these four formats: the better the compression, the more computation it takes to produce. JPEG's DCT is decades old and encodes almost instantly. WebP's VP8-based model does more analysis per block and is slightly slower. AVIF inherits AV1's exhaustive, video-grade search for the most efficient way to represent each region, which is why a single AVIF can take seconds to encode where a JPEG takes milliseconds. Decoding is fast in every case — the cost lives almost entirely on the encoding side, which is why AVIF suits build pipelines and static sites more than on-the-fly generation.
This also explains why the same "quality 80" means different things in different formats. The number feeds each format's own quantization model, not a shared scale, so WebP at 80 and JPEG at 80 discard different information and produce different file sizes. Judge the visual result and the byte count, never the number alone.
Knowing how each model works tells you what it costs and where it breaks down. For the practical "which one should I pick for this image" answer, see our image format decision guide.
How to convert between formats
PhotoTools converts between JPG, PNG, WebP, AVIF, and HEIC directly in your browser without uploading files to a server. Drop in your images, choose the target format, and download the results. The quality slider lets you control the size-to-quality trade-off for lossy formats. Compare the output at the actual display size before publishing rather than at full resolution zoom — small differences that look significant at 100% zoom often disappear entirely at the size the image will be rendered on a web page.
Frequently asked questions
Which format has the best compression?
AVIF produces the smallest files of the four — roughly 30–50% smaller than WebP and 50–60% smaller than JPEG at equivalent quality — because it borrows AV1's video-grade encoding. The cost is much slower encoding.
Is PNG ever smaller than JPEG?
Yes, for the right content. On flat-color graphics, screenshots, and text, PNG's lossless model compresses the repetition efficiently and can beat a clean JPEG. On photographs it is the opposite — PNG balloons because there is no repetition to exploit.
Why does re-saving a JPEG make it look worse?
JPEG is lossy, so each save discards detail again on top of the previous loss. Repeated re-saving compounds the artifacts. Keep a lossless master (PNG or the original) and export a fresh JPEG only when you need to deliver one.