PNG vs JPEG vs WebP vs AVIF: choosing an image format in 2026
Four formats cover almost every image on the web, and each one wins somewhere. A practical guide to which to use for photos, graphics, screenshots and logos, with the conversions that make sense.
Image formats have a reputation for being a settled question: JPEG for photos, PNG for everything else. That was true for twenty years. It stopped being true around 2023, when every browser finished adding AVIF and the gap between the old formats and the new ones became too large to ignore. Here is the current state, and a rule for each kind of image.
The split that matters: lossy or lossless
Every image format sits on one side of a line.
Lossy formats throw away detail the eye is unlikely to notice. They are small, and every re-save loses a little more. JPEG is the classic; WebP and AVIF have lossy modes that do the same job far better.
Lossless formats reproduce every pixel exactly. They are larger, and you can open and save them forever. PNG is the classic; WebP, AVIF and JPEG XL have lossless modes too.
Photographs and anything with continuous tone belong in lossy formats; the detail thrown away is invisible and the savings are enormous. Screenshots, diagrams, logos and anything with sharp edges or flat colour belong in lossless formats, where lossy compression produces visible smearing around edges and text.
JPEG: the format that will not die
JPEG is from 1992, supported by every device ever made, and still the format cameras shoot in and people share. Its compression is weak by modern standards, it has no transparency, and it tops out at 8 bits per channel, which rules out HDR.
Its survival is about compatibility, not quality. Nothing else is guaranteed to open on a 2010 printer, a car dashboard and an email client at once.
Use JPEG when the image must open anywhere, and for camera originals you intend to keep.
PNG: exact pixels, large files
PNG is lossless, supports transparency, and renders identically everywhere. It is the right format for screenshots, UI assets, logos exported from vector tools and anything with text in it. It is the wrong format for photographs: a photo saved as PNG is typically five to ten times larger than a visually identical JPEG, and a surprising number of slow web pages are slow because of exactly that.
Use PNG when pixels must be exact, there is transparency, or the image is a screenshot or graphic.
WebP: the first real upgrade
Google’s WebP (2010) does both jobs: lossy compression that beats JPEG by around 25 to 35 percent at the same quality, and lossless compression that beats PNG by around 25 percent. It supports transparency in both modes and animation, which makes it a far better GIF than GIF.
Every browser has supported it since 2020, and most image tools and CDNs produce it automatically. Its weaknesses are a hard 16383-pixel size limit, no HDR, and lossy quality that falls apart at low settings in a characteristic blurry way.
Use WebP when you want a safe, universal web format and AVIF is not an option.
AVIF: the current best for the web
AVIF applies the AV1 video codec to still images. For photographs it reaches JPEG quality at roughly half the size and beats WebP as well; it supports transparency, animation, 10 and 12-bit colour and HDR. Browser support has been universal since Safari 16 in 2022.
The costs are encoding speed (slow, which matters in real-time pipelines and not at all in build steps) and desktop support that still lags: Windows needs a free Store extension, and older operating systems need a third-party viewer.
Use AVIF when serving images on the web, with a WebP or JPEG fallback through the picture element.
The two to watch: JPEG XL and HEIC
JPEG XL is technically the strongest format of all: better lossless compression than anything else, fast decoding, progressive loading, and the unique ability to recompress existing JPEGs losslessly, about 20 percent smaller, and get the original back. Apple adopted it across its platforms in 2023; Chrome removed it the same year and the question of whether it returns is still open. It is a great archival format today and a web format only for Safari.
HEIC is the format iPhones shoot in. It is excellent at what it does (half the size of JPEG, HDR, Live Photos) and awkward everywhere else because its codec, HEVC, carries patent licensing that keeps it out of Chrome, Firefox and a default Windows install. It is a camera format, not a sharing format; convert to JPEG or AVIF to send.
And SVG, which is a different thing
SVG is not a competitor to any of the above; it is vector, not pixels. Logos, icons and diagrams drawn as shapes should be SVG, where they stay sharp at any size and are usually tiny. A photograph cannot be an SVG, and a logo should not be a PNG if an SVG exists.
A table, for the wall
| JPEG | PNG | WebP | AVIF | JPEG XL | |
|---|---|---|---|---|---|
| Lossy | yes | no | yes | yes | yes |
| Lossless | no | yes | yes | yes | yes, best |
| Transparency | no | yes | yes | yes | yes |
| Animation | no | no | yes | yes | yes |
| HDR / 10-bit | no | partial | no | yes | yes |
| Browsers | all | all | all | all | Safari only |
| Typical photo size vs JPEG | 100% | 500%+ | 70% | 50% | 55% |
Rules of thumb
- Photos on the web: AVIF, with a JPEG fallback. Let a build tool or CDN generate both.
- Photos to keep: the camera’s original. Do not convert a JPEG to anything lossy again.
- Screenshots, UI, diagrams: PNG, or lossless WebP if size matters.
- Logos and icons: SVG.
- Animations: WebP or AVIF, never GIF, which is 256 colours and enormous.
- Sharing from an iPhone: let the phone convert HEIC to JPEG, or set the camera to Most Compatible.
Conversions worth knowing
# JPEG or PNG to AVIF for the web (ImageMagick 7)
magick photo.jpg -quality 60 photo.avif
# Batch a folder to WebP at quality 82
for f in *.jpg; do cwebp -q 82 "$f" -o "${f%.jpg}.webp"; done
# Recompress a JPEG losslessly as JPEG XL, reversible
cjxl photo.jpg photo.jxl
# HEIC to JPEG at high quality
magick photo.heic -quality 92 photo.jpg
One last thing: the extension does not tell you which of these you have. A .jpg that is really a PNG, or a .png that is really a WebP, is common enough that image libraries check the bytes rather than the name. So does the detector, if you want to know what a file really is before you convert it.