Picking Between PNG, JPG, and WebP

I have been asked some version of "which image format should I use" enough times that I sat down and wrote out an answer once, properly, with the reasoning behind each recommendation. That answer turned into the post you are reading now. The short version: JPG for photos, PNG for graphics with text or sharp edges, WebP for the web if you control the audience, AVIF when browser support catches up. The long version, which is what most people actually need, is the rest of this post.

The fundamental split: lossy vs lossless

Every image format falls on one side of a basic line. Lossy formats throw away information that the encoder considers visually unimportant in exchange for much smaller files. Lossless formats preserve every pixel value exactly. The line matters because the math is fundamentally different on each side.

Lossy compression works by transforming the image data into a frequency-domain representation (DCT for JPEG, wavelet for some others), then quantizing the higher-frequency components more aggressively than the lower-frequency ones. The human visual system is less sensitive to high-frequency detail than low-frequency detail, so this throws away information that "looks" the same to a human while producing a much smaller file. The trade-off is that the discarded information is gone forever, and each round of re-encoding loses a little more.

Lossless compression works by finding patterns in the pixel data and representing them more compactly. PNG, for example, applies a per-row filter (None, Sub, Up, Average, Paeth) to make the data more compressible, then runs the result through deflate (zlib). The output is bit-for-bit reversible to the original pixel values. The trade-off is that files are larger than lossy equivalents at "comparable" visual quality, because nothing is being discarded.

JPEG, in practice

JPEG is the format you use for photographs. Why: photographs have lots of smooth gradients and continuous tones, and the DCT-based lossy compression handles those almost invisibly. A JPEG at quality 80 is usually impossible to distinguish from the original photo unless you zoom in to inspect specific pixels.

Things JPEG does badly:

Sharp edges. The DCT quantization produces ringing artifacts around high-contrast edges. Text on a uniform background is the classic case - you can see faint "halos" around the letters. For text-heavy images, PNG is the right choice.
Transparency. JPEG cannot store an alpha channel. There is no way to make part of a JPEG transparent. If your image needs transparency (a logo to overlay on a colored background), use PNG or WebP.
Multiple round-trips. Each time you save a JPEG, more information is discarded. If you are editing an image and saving repeatedly, work in a lossless format (PNG, TIFF) and export to JPEG only at the end.

The quality slider on JPEG output controls how aggressively the DCT coefficients are quantized. Quality 100 produces files almost as large as PNG with imperceptible artifacts. Quality 90 is "high quality" and is the right default for most uses. Quality 80 is "web quality" and saves significant bytes. Below 60 the artifacts start to be visible to a casual viewer. Below 40 the image looks visibly degraded.

I personally save photos for the web at quality 80 to 85. Anything I might want to print or revisit later, I keep a lossless original of and export JPEG copies as needed.

PNG, in practice

PNG is the format you use for graphics with sharp edges, text, or transparency. Why: PNG's lossless compression preserves every pixel exactly, so text stays crisp and edges stay clean. The alpha channel lets parts of the image be transparent.

Things PNG does badly:

Photographs. A PNG version of a 5 MP photo is typically 3 to 8 megabytes. The same photo as JPEG quality 80 is 500 KB to 1 MB. The PNG is not "better" - they are visually identical at typical display sizes; the PNG is just much larger.
Very large dimensions. PNG file size grows roughly with pixel count, and complex images compress less efficiently than simple ones. A 10,000-pixel-wide PNG of a photograph can easily be 50 MB.

PNG does have an 8-bit mode (palette-based, like GIF) that can produce small files for graphics with limited color palettes. Most modern PNG encoders produce 24-bit RGB or 32-bit RGBA output by default, which is what you want for screenshots, logos with gradients, and anything with photographic content. The 8-bit mode is mostly a curiosity now.

There is no quality slider for PNG. The compression is lossless, and the level of deflate compression (which is the lever PNG encoders expose) only affects encoding speed and file size, not visual quality. Most encoders default to a reasonable balance.

WebP, in practice

WebP is Google's image format, designed to be a single replacement for both JPEG and PNG. It supports both lossy and lossless compression, transparency, and animation. The compression algorithms are more modern than JPEG's, producing files 25 to 35 percent smaller at equivalent visual quality.

The case for WebP:

It is universally supported in modern browsers (since Safari added WebP support in 2020).
The lossy compression produces visibly better results than JPEG at the same file size, especially in flat areas and around edges.
The lossless mode is competitive with PNG, often smaller for the same image.
It supports transparency, like PNG does, in both lossy and lossless modes.

The case against WebP:

Some older desktop apps and email clients do not handle WebP images. Microsoft Office added support in 2021; Adobe Photoshop added support in 2022. If you are emailing an image to a corporate environment running old software, JPEG is still the safer bet.
Some print services do not accept WebP. If you are uploading to a commercial print shop, convert to PNG or TIFF first.
Image-editing tools support WebP unevenly. If you are handing the file to a designer or producer to work on, JPEG or PNG is more interoperable.

For images you control - your own website, your blog, an app you build - WebP is the right modern default. For images that will live in the broader ecosystem, JPEG (for photos) and PNG (for graphics) are still safer.

AVIF, briefly

AVIF is the newest format, based on the AV1 video codec. It compresses about 50 percent better than JPEG at equivalent quality - significantly better than WebP. Browser support is now broad (Chrome, Firefox, Safari, Edge all support AVIF as of 2024), but encoding is computationally expensive and not every image tool can produce AVIF output yet.

The Toolium Image Format Converter does not currently produce AVIF because the canvas API's toBlob('image/avif') support is uneven across browsers, and I do not want to ship a tool whose output works in some browsers and silently fails in others. When the support stabilizes (probably within a year), I will add it.

For now: if you control both ends of the pipeline and have a tool that produces AVIF (Squoosh, sharp, ImageMagick), use AVIF. Otherwise WebP is the practical modern choice.

The format decision tree

The decision I make for any image, in order:

Does the image need to work in older email clients or old desktop apps? If yes, JPEG for photos, PNG for graphics. Stop here.
Does the image need transparency? If yes, PNG or WebP. (Not JPEG.)
Is the image a photograph? If yes, JPEG at quality 85, or WebP at quality 80. Both look fine; WebP is smaller.
Is the image text-heavy, a logo, or a screenshot? If yes, PNG. (Or lossless WebP if you want smaller files and control the audience.)
Is the image for a web context where you control browser support? If yes, WebP is the default. (Or AVIF if you have an AVIF encoder.)

The conversion workflow

The Image Format Converter handles PNG, JPG, and WebP conversion in your browser. The flow: drop an image, pick the target format, adjust quality if it is a lossy target, click convert. The output downloads in seconds. The transparent-to-JPG case fills with white instead of black (the bug I shipped a fix for early in the tool's life, described on the methodology page).

For batch conversion of many files at once, the browser is fine for tens of files but not hundreds. For larger batches, ImageMagick or sharp on the command line is the right tool. One-liner for ImageMagick to convert a folder of PNGs to WebP: mogrify -format webp -quality 80 *.png.