PNG vs JPEG vs WebP vs AVIF: picking an image format on purpose

A lossless format archives every pixel exactly; a lossy format discards detail the eye barely registers in exchange for a dramatically smaller file. The choice is not quality snobbery—it is about what the file is for: a master you will edit again, or a delivery artifact you ship once.

One honest caveat for browser pipelines: the Canvas encoder exposes no lossless WebP switch, so in local tooling “lossless output” practically means PNG. A workspace that offers a fake lossless tier is telling you something about its honesty.

• Lossless keeps everythingLossless (PNG, and the lossless modes of WebP and AVIF): decoding reproduces the original pixels bit for bit, so nothing degrades no matter how often the file is opened and re-saved.
• Lossy spends detailLossy (JPEG, and the lossy modes of WebP and AVIF): the encoder models human vision and discards what it predicts you will not miss—and the saving is permanent, not a layer you can peel off later.
• Masters vs deliveriesThe practical split: keep masters lossless, ship deliveries lossy, and never treat a lossy export as the source for the next edit.

Compression formats specialize. JPEG’s cosine transform loves smooth photographic gradients and mangles sharp edges; PNG’s deflate loves flat color runs and exact lines and inflates noisy photographs; WebP and AVIF borrow video-codec tricks that handle both reasonably well.

The wrong pairing is expensive in both directions: a photographic PNG can be five to ten times heavier than an equivalent JPEG, while a logo saved as JPEG grows halos that no amount of quality increase fully removes.

• PhotographsPhotographs and gradients: JPEG at a moderate quality setting is dramatically smaller than PNG, and the loss is invisible at delivery size—this is exactly the workload lossy formats were built for.
• Flat graphicsLogos, icons, interface screenshots, and line art: flat regions and crisp edges compress perfectly in PNG, while JPEG rings visibly around every hard transition it meets.
• Mixed contentMixed content such as a screenshot with a photo inside: test both—WebP often lands between the two older formats, but the pixel mix decides, not the label on the box.

If the layout needs the background to show through, the format must carry an alpha channel. PNG, WebP, and AVIF all support transparency; JPEG does not—flattening the image onto a solid background is mandatory, not optional.

• Alpha is per-pixelAn alpha channel stores per-pixel opacity alongside color, which is what lets a logo sit cleanly on any background instead of on a white rectangle.
• JPEG flattensConverting a transparent PNG to JPEG replaces the alpha with a solid matte; choose that matte color deliberately, because it becomes permanent in the pixels.
• Choose the matteImage Format Converter discloses this flattening and asks for the background color to use, so the trade is explicit rather than discovered later in the layout.

WebP decodes in every current browser; AVIF decodes in current Chrome, Firefox, and Safari but not in older browsers or every downstream tool. Support is a property of the destination, not of the format—check the actual pipeline before committing an entire delivery set.

For web delivery, the standard answer is a fallback chain: serve AVIF or WebP with a JPEG or PNG fallback through the picture element, so modern browsers collect the savings and everything else still renders.

• Destination decidesEncoding support lags decoding: some browsers display WebP yet cannot encode it through Canvas, so a converter has to probe the capability instead of assuming it.
• Encoding needs a probeImage Format Converter runs exactly that probe up front and disables WebP export where encoding is missing, rather than silently handing you a PNG with a .webp name.
• Honest AVIF handlingAVIF input is accepted only when the browser actually decodes it; when it cannot, the workspace says so and asks you to export PNG or JPEG first, instead of trusting the file signature.

Every lossy save re-quantizes an already-approximated image, so artifacts stack: the third JPEG save of the same picture is visibly worse than the first at the same quality setting. Convert once, at the end of the pipeline, from the best source you have.

The compounding rule also settles the order of operations: every resample and every re-encode is a separate loss event, so the cheapest pipeline is the one with the fewest lossy steps in it.

• Convert onceEdit in a lossless master and export the lossy copy as the final step; each intermediate lossy save is a generation of damage you cannot undo.
• Side effectsA Canvas re-encode also drops the ICC color profile, EXIF metadata, and any animation—a GIF arrives as its first frame, which the workspace discloses next to the file.
• Keep the originalKeep the original after conversion; the converted file is a delivery artifact, not a master, and converting back never restores what was spent.

Format advice is a hypothesis until bytes say otherwise. Image Format Converter reports the before-and-after byte sizes exactly as produced, with JPEG and WebP quality adjustable from 0.50 to 0.95 (0.85 by default), so the trade-off is a number on screen rather than folklore.

• Convert the real fileConvert the real file, not a sample: byte savings depend on the actual content, and the report shows both sizes side by side.
• Pixels are the leverWhen bytes still miss the budget, pixels are the next lever: halving width and height removes roughly three quarters of them, often a bigger win than any format switch.
• Known limitsBoth tools accept files up to 12 MiB with sides up to 8,192 pixels, and the resizer can lock the aspect ratio so one dimension follows the other.