JPEG, PNG, WebP or AVIF: Which Image Format to Use

Use JPEG or WebP for photographs, PNG for screenshots, diagrams and anything with sharp text, and SVG for logos and icons whenever you have the vector file. If a photo needs a transparent background, WebP is the only one of the three common raster formats that gives you both lossy compression and transparency. AVIF can beat all of them on size, but it is still the least widely accepted and many in-browser encoders cannot produce it yet.

That is the short version. Below are the numbers behind it: we encoded six test images in every format at four quality settings and wrote down the byte counts, so you can see how large the differences actually are rather than trusting rules of thumb.

The quick answer by image type

What we measured

Each test image was loaded into a current desktop browser (engine version 150, running headless) in September 2026, drawn onto an HTML canvas at a maximum width of 1,600 pixels, and exported with the canvas toBlob() function as PNG, JPEG and WebP at quality 60, 75, 85 and 95. That is exactly the path an in-browser compressor takes, so the sizes are what you would get from one. Images narrower than 1,600 pixels were kept at their own width, never enlarged. Sizes are in kilobytes of 1,024 bytes. The four photos are public-domain (CC0) pictures listed at the end of this page.

AVIF was not measured: this browser's canvas returned a PNG when asked for image/avif, which is how a browser signals that it cannot encode a type.

Five things the numbers show

1. PNG is the wrong container for photos

At 1,600 pixels wide the portrait photo was 2,521 KB as PNG and 106 KB as a quality-85 JPEG, about 24 times larger for a difference you cannot see on screen. Lossless formats must store every speck of sensor noise exactly, and photographs are mostly noise and gradients. Unless a photo is going to be edited again and again, save it lossy.

2. WebP saves the most on smooth pictures

At quality 75, WebP came out 60% smaller than JPEG on the portrait (28 KB vs 70 KB), 55% smaller on the landscape and 48% smaller on the interior. The portrait has a soft, out-of-focus background, and that kind of gentle gradient is where the newer format's prediction tools shine.

3. On fine, random detail the gap almost disappears

The bark close-up is sharp from corner to corner, and there WebP was only 8% smaller at quality 75 (784 KB vs 855 KB). At 800 pixels and quality 60 it was actually larger: 209 KB against 189 KB for JPEG. If your pictures are mostly foliage, gravel, fabric or crowds, do not expect a format switch to rescue an oversized file; reducing the pixel dimensions will do far more.

4. Quality 95 costs far more than it gives

Going from quality 85 to 95 made the portrait JPEG 2.4 times bigger (106 KB to 256 KB) and the WebP 3.5 times bigger. The visible improvement at normal viewing size is close to zero. The sweet spot for web photos is usually 75 to 85; drop to 60 only for thumbnails, and reserve 90 and above for files that will be edited or printed later.

5. Screenshots behave differently

The page screenshot was 335 KB as PNG and 67 KB as WebP at quality 85, so a lossy format is tempting. But lossy encoders blur the one-pixel edges of letters and add faint halos around lines, which is exactly what people look at in a screenshot. Try WebP at 90 or above and zoom in on small text before accepting it. Also note a quirk we did not expect: the original screenshot file was 296 KB, yet re-encoding the same 2560×1600 pixels through the canvas gave 445 KB. Browser PNG encoders favour speed over maximum compression, so re-saving a PNG in the browser can make it bigger. Keep the original if it is already a PNG you are happy with.

Transparency: the JPEG trap

JPEG has no alpha channel. When we exported the logo, whose rounded corners are transparent, the JPEG version came back with those corners painted solid black (we read the corner pixel back as red 0, green 0, blue 0, fully opaque). The WebP and PNG versions kept the corners transparent. Other tools fill with white instead (our own compressor paints a white background before saving a JPEG, so you get white corners there), but either way the cut-out is gone. If you see a black or white box around a logo after compressing it, this is why: switch the output to PNG or WebP.

Better still, keep logos and icons as SVG when you can. Our 28-by-28 unit logo is a 310-byte SVG file; rasterised to 1024 pixels it became 53 KB as PNG, and it would still look soft on a large, high-density display.

The formats in one paragraph each

JPEG (ITU-T T.81 and ISO/IEC 10918-1, first published in 1992) splits the picture into 8×8 blocks and throws away fine detail the eye is least sensitive to. It is lossy, has no transparency and no animation, and is readable by essentially every device made in the last thirty years. Heavy compression shows up as blocky squares and ringing around edges.

PNG (ISO/IEC 15948) is lossless: decode it and you get back exactly the pixels you saved. It supports full alpha transparency and is ideal for flat colours, text and line art. Its weakness is photographs, as the table shows.

WebP offers both a lossy mode, based on video-style block prediction, and a separate lossless mode, and both support transparency and animation. All current major browsers display it. The main friction is outside the browser: some older desktop software, printing services and upload forms still refuse it.

AVIF stores a single frame of AV1 video. It usually compresses photos better than WebP and supports high dynamic range, but encoding is slow, and support for creating AVIF files inside the browser is not universal, as our own test showed. It is a good choice for sites that build their images ahead of time, less so for quick one-off conversions.

A decision checklist

1. Is it a logo, icon or diagram you have as a vector? Keep it SVG.
2. Does it need transparency? Use WebP for photographic cut-outs, PNG for flat artwork.
3. Is it mostly text or interface elements? Use PNG, or WebP at quality 90 or higher after checking small text.
4. Is it a photograph going to a website you control? Use WebP around quality 75 to 80.
5. Is it a photograph going to a form, a print shop, an email or someone else's device? Use JPEG around quality 80 to 85.
6. Still too big after that? Reduce the pixel dimensions before lowering quality further; our guide to getting an image under a size limit has the numbers.

Test images

The four photographs come from Wikimedia Commons and are dedicated to the public domain under CC0; they were downloaded only for this measurement and are not hosted here. Pixel sizes are as decoded by the browser.