How to Choose an Image Format: JPG, PNG, WebP and AVIF Compared
JPG, PNG, WebP or AVIF? A side-by-side look at how the four formats compress, how they handle transparency, and a three-question flow that tells you which one your file needs.
Images, not text, account for most of the bytes a browser downloads. Choosing the right image format means shipping the same picture at a third of the weight; choosing wrong means a slow page, ragged edges around type, or a logo that suddenly sits on a white box. This guide walks through the four formats you will actually meet on the web, explains what each one does to your pixels, and ends with a short decision flow you can apply to any file on your desk.
If you just need the conversion, the browser-side tools share one upload queue: JPG to WebP, PNG to WebP, WebP to AVIF, and for the return trip AVIF to PNG. When the goal is a smaller file rather than a different container, reach for the image compressor instead.
Why an image format is more than a file extension
The usual argument stops at “which one is smaller”, but you are really deciding along three axes at once: whether the compression throws pixels away, whether the container carries an alpha channel, and where the file has to open. Those axes pull against each other. A lossless container keeps the crisp type in a screenshot intact but makes a photograph several times heavier. A lossy container shrinks a photograph beautifully, then degrades a little more every time you re-save it.
Lossy versus lossless, in practice
Lossy compression buys space by discarding detail the eye struggles to notice. On photographs, where colour drifts smoothly from one pixel to the next, that is extraordinarily efficient: around quality 80 a typical photo lands at roughly a fifth of its original weight. Lossless compression throws nothing away; it only encodes repeating patterns more compactly. Flat fills, logos, interface captures and charts shrink very well that way. Photographs barely shrink at all.
So the rule of thumb is short: natural noise and texture go lossy, hard edges and flat colour stay lossless. To judge the difference yourself, put two exports side by side at full zoom and look at the edges of letterforms and at any large expanse of sky or flat background. Artefacts show up there first.
The alpha channel decides half the argument
Transparency lives in a separate alpha channel inside the file. PNG, WebP and AVIF carry it; JPG does not. Convert a transparent logo to JPG and the empty area is flattened to white or black, permanently. That is why shrinking a transparent asset should start with PNG to WebP rather than a trip through JPG. If the background is already an opaque colour and you genuinely do not need transparency, PNG to JPG will hand you a much lighter file.
What each of the four formats actually does
JPG, the photographic default
JPG has opened everywhere since the 1990s and is still a defensible choice for photographs. Eight bits per channel, no alpha, lossy only. Its weak spot is the halo of ringing artefacts that appears around sharp edges on flat backgrounds, which rules it out for screenshots and anything containing type. Its strength is reach: mail clients, ancient dashboards and print shops all accept it without argument.
PNG, for edges and transparency
PNG is lossless and carries a full alpha channel. It is the correct pick for interface captures, logos, icons, line charts and any graphic with words in it. On photographs it is a poor bargain: the same shot as PNG can be three to eight times heavier than a good JPG. Publishing photo archives as PNG is one of the fastest ways to wreck a page load.
WebP, the balanced choice today
WebP works in both lossy and lossless modes, keeps the alpha channel in either, and supports animation. In practice it lands about a quarter smaller than JPG at matching visual quality, and roughly a third smaller than PNG on graphics. Browser support stopped being a real objection years ago. For a site being built today, defaulting to WebP is the lowest-risk decision available.
AVIF, the smallest files and the slowest encoder
AVIF is the still-image form of the AV1 video codec. At the same perceived quality it beats WebP by a clear margin, supports ten-bit colour and wide gamut, and carries alpha. The price is encoding time: the same source takes many times longer to write as AVIF than as JPG. That makes AVIF excellent for hand-picked hero images and product shots, and questionable for a pipeline that has to produce hundreds of derivatives per minute.
Comparison table: where each image format wins
| Property | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Compression | Lossy | Lossless | Lossy + lossless | Lossy + lossless |
| Alpha channel | No | Yes | Yes | Yes |
| Animation | No | No (except APNG) | Yes | Yes |
| Colour depth | 8-bit | 8 / 16-bit | 8-bit | 8 / 10 / 12-bit |
| Typical photo weight | Baseline | 300% – 800% | 60% – 75% | 40% – 55% |
| Encoding speed | Very fast | Fast | Moderate | Slow |
| Best suited to | Photographs | Logos, screenshots | General web use | Hero and cover art |
The weight ratios describe the same source saved at visually indistinguishable quality. Your own files will drift a little either way; what matters is that the ranking holds.
A three-question flow for choosing the right image format
- Does the picture contain transparency? If yes, JPG is out. Start with WebP, try AVIF if the file is still heavy, and keep a PNG as your archive copy.
- Is it a photograph or a graphic? Photographs go lossy. Charts, screenshots and anything with type stays lossless, because lossy compression smears letter edges.
- Where will the file be opened? On a web page, use WebP or AVIF. If it is going into an email, a third-party dashboard or an older desktop application, stay on JPG or PNG.
That flow settles most cases in one pass. The remaining grey area is an asset used both online and in print; there, keep a lossless master and export separate delivery copies rather than trying to make one file serve both.
Real limits you will hit while converting
Browser-based converters come with concrete ceilings, and knowing them up front saves a wasted afternoon.
- A single upload may be up to 24 MB. Raw camera exports above that need resizing before conversion.
- A queue holds at most 20 files. Larger batches are simply run in several rounds.
- Quality is adjustable between 20 and 95, with 82 as the default. Pushing past 95 inflates the file without a visible payoff.
- Resizing caps a single edge at 4000 pixels, which is far beyond what web delivery needs anyway.
One more habit worth breaking: re-encoding a lossy file as lossy again loses a little quality every round. Rather than chaining JPG to WebP to AVIF, export each target separately from the highest-quality master you still have.
Frequently asked questions
Is WebP safe to use everywhere?
In browsers, effectively yes. The risk sits outside the browser: some older editors and internal dashboards still refuse WebP uploads. When a file is destined for one of those, keep a JPG or PNG copy alongside it.
Should AVIF be my default?
If you prepare images by hand, yes, because the size win is real. If you are building an automated pipeline, measure the encoder first: converting hundreds of assets to AVIF takes far longer than the same job in WebP and puts a noticeable load on the machine doing it.
Is there any harm in storing photographs as PNG?
None as an archive, and it helps if you expect to edit them again. The harm comes from serving that PNG directly to visitors, which makes them download several megabytes for a picture that could have been a few hundred kilobytes.
How do I check whether a conversion damaged the picture?
Open the export next to the original at 100% zoom and inspect three places: the edges of text, large flat colour fields, and gradients in the shadows. Degradation shows up there before anywhere else. Note the lowest quality setting that still passes, then reuse it for images of the same kind.
To carry on from here, read how compression translates into load time in image compression and web performance, see the vector side of the story in what is an SVG file, and work through the pre-publish checklist in image optimization for SEO.
