JPG vs PNG vs WebP vs AVIF

Quick answer by use case

The rest of this guide explains the trade-offs and shows the numbers behind them.

What we measured

Published comparisons rarely say how they were made, so we ran our own and recorded the method.

Method. Four photographs from the Kodak test set (kodim03, kodim05, kodim15 and kodim23, each 768 × 512 pixels, stored losslessly) were encoded with sharp 0.35 (libvips 8.18: mozjpeg for JPG, libwebp 1.6 for WebP, libaom 3.15 for AVIF) at every quality setting from 5 to 100. For each format we kept the smallest file whose structural similarity (SSIM) to the original reached a target: 0.95, a level where differences are visible on close inspection, and 0.98, where they are hard to spot. SSIM was computed on the brightness channel in 8 × 8 windows.

Results (sizes in KB of 1,000 bytes):

Overall, WebP was 26% smaller than JPG at the 0.95 target and 22% smaller at 0.98; AVIF was 40% and 38% smaller. Per photo the WebP saving ranged from 9% to 31% and the AVIF saving from 31% to 48%, so the content of the image matters as much as the format.

The same photos stored losslessly took 545–869 KB each as PNG and 391–571 KB as lossless WebP, between 7 and 27 times the size of the JPGs above.

Two caveats. SSIM is one measure of quality, not a judgment by human viewers, and different encoders or settings (for example, a slower AVIF speed setting) shift these numbers. The direction, though, matches Google's own published figures for WebP, which it puts at 25–34% smaller than JPEG at equal SSIM.

Photos: JPG, WebP or AVIF

JPG (JPEG) has been the default photo format since the 1990s. Its compression throws away detail the eye is least likely to miss, and its quality setting trades size for sharpness. Every device, browser, email client and form accepts it, which is still its main advantage.

Is WebP better than JPG? For web delivery, yes. WebP makes smaller files at the same quality (22–26% smaller overall, 9–31% per photo in our test), supports transparency and animation, and every current major browser displays it. Its drawbacks show up outside the browser: some older desktop software, upload forms and email setups still accept only JPG and PNG.

Should I use AVIF on my website? Usually, with a fallback. AVIF gave the smallest files in our test (38–40% overall smaller than JPG) and supports transparency, wide color gamut and HDR. Its costs: encoding is noticeably slower, which matters if you convert thousands of images on upload, and AVIF images don't render progressively, so a large one appears all at once rather than gradually. Devices that can't run a recent browser, such as iPhones stuck on iOS 15, don't display it.

The usual way to get both is the <picture> element. The browser takes the first format it supports:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Describe the photo" width="1200" height="800">
</picture>

Many image CDNs and frameworks do the same automatically by reading the browser's Accept header. Format is only part of the saving: a photo sized to its display width saves more than any format switch.

Graphics and transparency: PNG, WebP, SVG

When is PNG the right choice? When every pixel must survive exactly: screenshots, UI mock-ups, diagrams, charts, images with small text, and images you will edit again. PNG compression is lossless, and it supports full transparency. It is a poor choice for photos: our four test photos averaged 708 KB as PNG, against tens of kilobytes as JPG.

Graphics with gradients and soft shadows sit in between. We converted the hero illustration on our own homepage (270 × 237 pixels, with a transparent background, glows and small text; 84.5 KB as an optimized PNG):

Lossy WebP and AVIF kept the transparency at a ninth of the PNG's size or less, but they soften fine text, so zoom in before you switch. The palette PNG is the safe middle ground where WebP isn't accepted.

SVG is different in kind: it describes shapes rather than pixels, so a logo stays sharp at any size and often weighs a few kilobytes. If you only have a logo as a JPG, the JPG to SVG converter traces it into vector paths; that works for flat logos and line art, not for photos.

JPG can't store transparency at all. Converting a transparent PNG with the PNG to JPG converter fills the transparent areas with a background color, so pick one that matches where the image will sit.

Browser and app support

As of October 2026, according to MDN's compatibility data:

Browser support is now the easy part. The gaps are elsewhere: government and job portals that accept only JPG or PNG, older image editors and office software, and email clients. If a recipient can't open a WebP or AVIF, convert it back: WebP to JPG and AVIF to JPG both run in the browser.

Converting between formats

Converting is easy; converting without losing quality or growing the file takes a little care:

1. Lossy to lossless doesn't restore anything. Saving a JPG as PNG keeps its compression artifacts and usually makes the file several times larger. Convert to PNG only if you need to edit it losslessly from here on.
2. Each lossy save loses a bit more. Go from the original or a lossless master to each output format, rather than chaining JPG to WebP to AVIF.
3. Transparency needs a decision. PNG, WebP and AVIF keep it; JPG needs a background color.
4. Check color and metadata. Photos from phones and cameras may carry a color profile and EXIF data (location, camera, rotation). Converters may drop or rewrite it, which is often what you want for privacy but can shift colors slightly.
5. Resize first, then convert and compress. Pixel count drives file size more than format does.

For web images, the image compressor can resize, convert to WebP and compress in one pass, with a before-and-after preview so you can judge the quality setting yourself.