WebP vs AVIF vs JPG: Which Image Format Should You Actually Use

Two photos, same content, same quality slider, saved in different formats, can end up noticeably different in size. Which format to pick isn't a matter of taste - it depends on what the image actually is and where it's going.

JPG - the safe default

JPG is a lossy format built for photographs: smooth colour transitions, gradients, natural detail. It opens correctly in literally everything - every browser, every email client, every chat app, every operating system, going back decades. It doesn't support transparency. For a photo that just needs to display reliably everywhere, JPG at a sensible quality setting is still the least risky choice.

PNG - lossless, and the only safe choice for hard edges

PNG doesn't throw away any image data, which is exactly right for screenshots, logos, icons and anything with flat colour and sharp text edges - a photo compressor's blur-prone areas. It also supports transparency. The tradeoff is size: a PNG of a photograph is usually much larger than the same photograph saved as JPG or WebP, because lossless compression can't do what a lossy codec does with a gradient sky or a blurred background. This is also the format small UI icons and app graphics belong in, for the same reason: sharp edges, flat colour, nothing a lossy codec would do any favours.

WebP - smaller than JPG or PNG, for most images, in most current browsers

WebP was built specifically to replace both JPG and PNG on the web: it supports transparency like PNG and lossy compression like JPG, and it generally produces a smaller file than either for comparable visual quality. Browser support has been solid for years across Chrome, Firefox, Safari and Edge. If you're not sure and don't have a specific reason to pick JPG or PNG, WebP is a reasonable default for anything going on a website.

AVIF - the newest, often the smallest, but pickier

AVIF tends to produce the smallest files of the four at a given visual quality, particularly for photographic content. It costs more to encode (it's slower to produce than the others) and while modern browser support is good, it's newer and less universal than WebP - worth checking against wherever the image is actually going to be viewed before committing to it as your only format. Image compress takes all four formats in and Image convert writes all four out, so comparing the real result on your own file costs nothing but a few seconds.

Checking support before you commit to one format

"Modern browser support" isn't the same as "everyone's browser". A visitor on a locked-down work laptop, an older phone that hasn't been updated in years, or a corporate network with an outdated default browser can still land on WebP or AVIF content that fails to display. If you control the page (your own site, your own app), the safe pattern is to offer a modern format as the primary choice with a JPG or PNG fallback for anything that can't render it - most modern content management systems and image tags support this natively. If you're not in a position to build a fallback, sticking with the format that's guaranteed to work everywhere is the lower-risk choice, even at a size cost.

A specific case: compressing for WhatsApp or email

Messaging apps and email clients often re-compress images again on their own end regardless of what you send, and email in particular still has pockets of old, JPG-only rendering (some corporate mail clients, some older webmail). For anything you're attaching rather than embedding on a page you control, JPG remains the format that won't surprise you on the other end. For a page you control - your own site, your own app - WebP or AVIF is the better default, because you control what opens it.

Worth knowing specifically about WhatsApp: it applies its own compression to photos sent through a regular chat message regardless of the format or quality you started with, which is why a photo sent that way often looks softer on the receiving end than the file you actually sent. If preserving quality matters more than the resend costing a little more data, sending the file as a document attachment rather than a photo in most chat apps skips that second compression pass entirely.

A quick way to decide without overthinking it

If none of the above feels decisive: default to WebP for anything on a page you control, JPG for anything you're not sure will be opened correctly (an attachment, an old system, an unfamiliar destination), and PNG only when you specifically need lossless quality or transparency and WebP's own lossless mode isn't an option for some reason. That covers the large majority of real cases without needing to weigh every tradeoff each time.

None of this needs to be theoretical - try the same photo in two or three formats and compare the file sizes yourself. It runs entirely in your browser, so there's no cost to checking.