Smushify / Guides

JPG vs PNG vs WebP vs AVIF: which image format to use

A plain comparison of the four formats, real test numbers, and a one-line rule for each kind of image.

The short answer

For images on a website, use WebP or AVIF. Every current browser supports both, both handle photos and graphics, both keep transparency, and both make files several times smaller than JPG or PNG. AVIF is usually the smallest; WebP is quicker to create and supported by more older software.

Use JPG when a file has to open anywhere: email attachments, upload forms, printing services and older apps. Use PNG when every pixel must stay exactly as it is, for images you will keep editing, or when an app accepts nothing else.

The four formats at a glance

Here is how they compare on the things that usually decide the choice.

JPG: the universal photo format

JPG, also written JPEG, has been the standard for photographs since the early 1990s, and everything opens it: every browser, phone, printer, email program and upload form. It compresses photos well by discarding detail the eye is less sensitive to, and a quality setting controls how much is discarded.

Its weaknesses are age and scope. It has no transparency, so transparent areas must be filled with a colour; Smushify uses white. It handles sharp edges and text badly, leaving fuzzy halos around letters in screenshots. And at the same visual quality it is much larger than the modern formats. Smushify encodes JPG with MozJPEG, which makes smaller JPGs than the encoder built into browsers, and saves them as progressive JPGs that build up gradually on slow connections.

PNG: exact, but heavy

PNG is lossless: open a PNG and you get back exactly the pixels that went in. That makes it the right choice for images you will keep editing, for pixel art and for graphics that must stay perfectly crisp. It also supports full transparency, which is why it became the default for logos and interface images.

The cost is size. For photographs, PNG is many times larger than any lossy format: in our test, a phone photo resized to 1280 pixels wide was 3.4 MB as PNG and 111 KB as WebP. Even for screenshots, where PNG does best, our 1440 by 900 test came to 420 KB after lossless optimisation, against 82 KB as WebP.

WebP: the safe modern default

Google released WebP in 2010, and since Safari added support in 2020 it works in every current browser. Google's own measurements put lossy WebP 25 to 34 percent smaller than JPG at the same quality, and lossless WebP about 26 percent smaller than PNG. It supports transparency and animation.

In practice WebP is the format you can use almost anywhere on the web without thinking about it. Most content management systems, WordPress included, accept it, and it encodes quickly, so converting a large batch takes seconds.

AVIF: the smallest files

AVIF is built on AV1, a modern video codec, and was finalised in 2019. Chrome added support in 2020, Firefox in 2021, Safari in 2022 and Edge in 2024, so every current browser now displays it. For photos it is usually the smallest of the four by a wide margin, and it holds on to detail at very low file sizes where JPG turns blocky.

The trade-offs: AVIF takes noticeably longer to encode than WebP, and support outside browsers, in image editors, upload forms and older phones, is still catching up. It is the best choice for images on your own website, where you control how they are shown, and a less safe one for files you send to other people.

Test results

To put real numbers on this, we converted a 12-megapixel phone photo (a 4.9 MB JPG, 3024 by 4032 pixels) and a 1440 by 900 screenshot with Smushify, at its recommended quality for each format: JPG 85, WebP 80 and AVIF 50. The photo was resized to 1280 pixels wide, a typical size for a web page; the screenshot was kept at full size.

Your own numbers will vary with the picture, but the order rarely changes: AVIF smallest, then WebP, then JPG, with PNG far behind for anything photographic.

How to pick

A photo for your website: AVIF, or WebP if you want the widest support.

A logo, icon or illustration for your website: WebP or AVIF, both of which keep transparency.

A photo you are emailing, printing or uploading to a form: JPG.

An image you will keep editing, or that must stay pixel-perfect: PNG.

Whatever you pick, first resize the image to the size it is actually shown at. That saves more than any change of format.

Open the PNG to WebP converter

Try it: PNG to WebP

Open the PNG to WebP converter. It runs in your browser, so nothing is uploaded.

Frequently asked questions

Do all browsers support WebP?

Yes. Every current version of Chrome, Edge, Firefox and Safari displays WebP. Safari was the last to add it, in 2020.

Does converting PNG to WebP keep transparency?

Yes. WebP and AVIF both support a full alpha channel, so transparent backgrounds and soft edges carry over. Only JPG lacks transparency.

What about GIF?

GIF is limited to 256 colours and makes very large files. For animation on a website, a short MP4 or WebM video is usually many times smaller, and Smushify can convert GIFs to either.

What about JPEG XL?

JPEG XL is a newer format with excellent compression, but among the major browsers only Safari displays it, so it is not yet practical for websites.

llms.txt: what Smushify does and how to automate it