AVIF, WebP, JPEG, PNG: Which Format When, in 2026
Published 2026-07-20
Four formats cover essentially every image on the web in 2026, and the good news is that you rarely need to think about more than two of them for any given job. Here is a practical decision guide with real numbers, plus the cases where 30-year-old JPEG is still the correct answer.
The contenders, one line each
JPEG (1992): lossy, built for photographs, universally accepted. PNG (1996): lossless, transparency, sharp edges, universally accepted. WebP (2010): lossy and lossless modes, transparency, animation, roughly a generation better than JPEG at compression. AVIF (2019, built on the AV1 video codec): the current compression champion, with transparency, animation, and HDR support, at the cost of slow encoding and patchier support outside browsers.
What about HEIC and JPEG XL?
Two formats you will run into but should mostly not publish in. HEIC is what iPhones shoot by default: excellent compression, but effectively an Apple-ecosystem format, with unreliable support in browsers and on Windows, so convert to JPEG before sharing. JPEG XL is technically superb, arguably the best all-rounder on paper, but its adoption story is messy: Chrome removed its experimental support in 2022 while Safari later added it, and the standoff has kept it off the safe list. Treat both as capture or archival formats, not delivery formats, until that settles.
Compression, with numbers
For a typical photograph at equivalent visual quality, WebP lands around 25 to 30 percent smaller than JPEG, and AVIF around 40 to 50 percent smaller than JPEG, with its biggest advantage at aggressive compression levels. Concretely: a 1.2 MB JPEG saved at quality 80 tends to come out around 850 KB as WebP and 600 to 700 KB as AVIF at comparable quality. For lossless work, optimized PNG is the baseline, and lossless WebP typically beats it by 20 to 25 percent.
AVIF's numbers come with two caveats. Encoding is slow, seconds per image rather than milliseconds, which matters for build pipelines and bulk conversions. And at very low quality settings AVIF fails differently than JPEG: instead of blocky artifacts it smooths away fine texture such as skin grain and foliage. That looks cleaner at a glance but can read as plasticky on close inspection.
One trap when comparing: quality sliders are not comparable across formats. JPEG quality 80, WebP quality 80, and AVIF quality 80 describe three different internal scales, so "same quality setting" comparisons are meaningless. Compare by output size at a visual quality you find acceptable, which in practice means compressing to a target size and inspecting the result side by side.
Browser support is solved; everything else is not
As of 2026 the browser question is easy: every evergreen browser renders all four formats. WebP has been safe everywhere since 2020, and AVIF since Safari 16 shipped in 2022. The real compatibility problems now live outside the browser: email clients that will not render WebP or AVIF, older built-in photo viewers, upload forms that accept only .jpg and .png, print shops, and CMS or social pipelines that re-encode or reject unfamiliar formats. That leads to the single most useful rule in this guide: on web pages you control, use modern formats freely; for files you hand to someone else's system, JPEG and PNG remain the lingua franca.
Transparency and animation
JPEG has no transparency, full stop; PNG, WebP, and AVIF all support alpha channels. The interesting case is photographic images with transparency, such as product shots cut out from their background: as PNG these are enormous, because PNG compresses photographic detail poorly, and converting one to WebP with alpha routinely cuts 80 to 90 percent of the size. For animation, animated WebP and AVIF are far smaller than GIF, which is stuck with 256 colors and 1987-era compression. For anything longer than a couple of seconds, though, a muted looping video file beats every image format.
When JPEG and PNG are still right
JPEG remains correct when compatibility outranks bytes: email attachments, files destined for forms and portals, anything headed to print, and platforms that re-encode uploads anyway (most social networks), where your carefully tuned AVIF gets converted to their JPEG on arrival. It also encodes essentially instantly and supports progressive rendering, so a slow connection shows a usable image early.
PNG remains correct for screenshots, UI mockups, diagrams, and logos, anywhere hard edges and flat color dominate, because lossy codecs produce visible ringing around sharp edges. The classic mistake runs the other way: saving photographs as PNG, which produces files 5 to 10 times larger with no visible benefit. We covered that trap, and the basics of all three older formats, in JPG vs PNG vs WebP.
The decision in five lines
Photo on a site you control: AVIF, with a WebP or JPEG fallback via the picture element. Photo going to email, an upload form, or print: JPEG. Screenshot, diagram, or logo: PNG, or lossless WebP where you control the destination. Photo that needs transparency: WebP or AVIF. Short animation: animated WebP or AVIF, or better yet a small looping video.
And before format choice at all: check resolution. A 4000-pixel-wide photo displayed in an 800-pixel column wastes more bytes than any codec can win back, so resize to the display size first, then pick the format.
For the conversions themselves, norito's image converter switches between JPG, PNG, and WebP directly in your browser, and the image compressor will squeeze any of them down to a target file size. If you are deciding how hard you can compress before quality visibly suffers, this guide covers the settings that matter.