JPG vs PNG vs WebP vs AVIF — Which Image Format Should You Use?

Choosing an image format really comes down to three questions: what the content is (a photo, or a graphic full of text and lines), whether you need a transparent background, and whether the recipient can open the format. This article first explains the structural differences between the four main formats, then ends with a quick selection table for common situations. Browser support figures were checked against Can I use data on the reference date (2026-09-23).

Comparison at a glance

Support percentages are based on Can I use's global browser usage share. If you have to account for old browsers or internal company viewers, JPG and PNG are still the safest choices.

JPG — the 30-year standard built for photos

JPG splits an image into 8×8 pixel blocks, converts each block into frequency components with the discrete cosine transform (DCT), and then coarsely quantizes and discards the high-frequency components the human eye is less sensitive to. Color information is also often stored at a lower resolution than brightness (chroma subsampling). That's why photos with smooth color transitions, such as sky or skin, look nearly identical at a quality of around 80, while images with lots of text, lines and hard color edges show smudges around the edges (ringing and block noise).

• Pros: accepted by almost every device, program and upload form. The quality setting lets you control file size over a wide range.
• Limits: no transparency, and loss accumulates every time you save again. Not suitable as an intermediate file while editing.

PNG — the default for text, logos and screenshots

PNG is a lossless format that preserves pixel values exactly. It applies a filter that computes the difference from neighboring pixels on each row, then compresses the result with Deflate (the same family as zip). For screenshots, charts and logos with large areas of the same color it is smaller and sharper than JPG, but for photos, where every pixel differs slightly, it compresses poorly and can end up several times the size of a JPG.

The third edition of PNG, published by the W3C in June 2025, formally added animated PNG (APNG), HDR color information and EXIF chunks to the standard. Compatibility with existing PNG files is unchanged.

WebP — JPG and PNG in a single format

WebP contains both a lossy mode (based on the VP8 video codec) and a lossless mode in one format, and both modes support transparency and animation. Google reports that at the same SSIM quality score, lossy WebP is 25–34% smaller than JPG and lossless WebP is 26% smaller than PNG. These figures come from Google's own tests, so actual savings vary with image content and encoder settings.

In November 2024, WebP's specification and media type (image/webp) were formally registered as IETF RFC 9649. Safari added support starting with version 14 (Big Sur or later on macOS), so if many of your users are on Apple devices from before 2020, it's safer to provide a fallback image as well.

AVIF — the smallest but slowest-to-encode newcomer

AVIF stores images compressed with the royalty-free AV1 video codec inside a HEIF-family container. The Alliance for Open Media (AOMedia) published the 1.0.0 specification in February 2019. It can hold 10- and 12-bit color per channel and HDR, and at the same quality it often comes out smaller than WebP. On the other hand, encoding is computationally heavy, so converting many large photos takes a while, and according to MDN it does not support progressive rendering.

Support started in Chrome 85, Firefox 93, Safari 16.4 (partial support from 16.1) and Edge 121. Edge joined last (early 2024), so if a company PC's Edge is locked to an old version, AVIF images may not display.

Quality breaks down differently in each format

Even at "low quality," each format degrades in its own way. Knowing where to look when checking results makes it easier to choose a quality setting.

• JPG: 8×8 block boundaries show up as a grid, and wavy smudges (ringing) appear around text and lines. Smooth areas like sky show banding.
• WebP (lossy): fewer block artifacts than JPG, but fine detail gets mushy and colors bleed. Thin red and blue lines become especially blurry.
• AVIF: almost no block artifacts even at low quality, but textures like skin, grass and hair can be smoothed away, giving a "watercolor" look.
• PNG: lossless, so there's no quality loss. If you reduce the number of colors to cut the size, however, gradients develop bands.

When checking the result, rather than looking at the whole image, zoom in to 100% or more on faces, text and sky and compare with the original.

Where do JPEG XL and HEIC fit in?

• JPEG XL: a next-generation format with many strengths, such as being able to losslessly repackage existing JPGs into smaller files. But as of the reference date, according to Can I use, only Safari 17 and later support it partially, and Chrome and Firefox don't display it in their default settings. It's still too early to use on the web.
• HEIC: the default format for iPhone photos, but among web browsers only Safari 17 and later display it. It's common to convert to JPG before submitting or sharing (HEIC guide).

Choosing by situation

1. Has the recipient (government office, school, online store) specified allowed formats? → Follow that list. It's usually JPG.
2. Do you need a transparent background? → WebP for the web, PNG for editing or print.
3. Is it a photo or a graphic? → For photos, JPG (compatibility) or WebP/AVIF (size); for text, lines and charts, PNG or lossless WebP.
4. Want to speed up a website? → Use AVIF or WebP, and keep a JPG alongside for older browsers.

Things to know when converting

• Lossy-to-lossy conversion compounds the loss. Converting a JPG to WebP adds WebP's loss on top of the information JPG already threw away. If you have the original, convert from it just once.
• Transparent-to-opaque conversion (PNG or WebP → JPG) requires filling transparent areas with a background color such as white.
• Color depth and HDR drop to 8 bits the moment you convert to JPG.
• If changing the format alone doesn't shrink the file, reducing the resolution as well has the biggest effect. The principles are explained in detail in How image compression works.

You can convert between formats entirely in your browser with the Image Format Converter, and the detailed specs of each format are collected in the format dictionary.

Frequently asked questions

Last updated: 2026-09-23

Sources

• MDN — Image file type and format guide
• Google for Developers — An image format for the Web (WebP)
• ITU-T Recommendation T.81 (09/92) — JPEG specification
• W3C — PNG Specification (Third Edition)
• AOMedia — AV1 Image File Format (AVIF)
• Can I use — WebP image format
• Can I use — AVIF image format
• Can I use — HEIF/HEIC image format
• Can I use — JPEG XL image format