Best Image Format for Web Performance in 2026: WebP, AVIF or JPEG

Images weigh more than anything else on a typical page. HTTP Archive’s Web Almanac 2025, built on a July 2025 crawl, puts the median mobile home page at 2,559 kB, and 911 kB of that is images, well ahead of JavaScript at 632 kB. So the format you save a picture in is not a cosmetic decision; it governs roughly a third of the bytes a visitor on a weak connection has to wait for. This guide compares JPEG, PNG, WebP and AVIF, and adds JPEG XL, whose status changed this month.

Quick answer: on a site you control, serve WebP by default, add AVIF for photo-heavy pages where every kilobyte counts, keep PNG for logos, screenshots and anything transparent that must stay crisp, and keep a JPEG fallback for old browsers and for every form or portal that lists accepted file types. Whatever you pick, bring the file down to a sensible target first; a 2 MB WebP is still a 2 MB download.

Where Image Formats Stand in 2026

JPEG and PNG are the legacy pair, and by count they still dominate. The 2024 Web Almanac Media chapter found that 32.4% of images requested by mobile pages were JPEG and 28.4% PNG, against 12% WebP and 1% AVIF. Capability is far ahead of usage: in caniuse.com’s October 2026 data, WebP displays in 97.18% of browsers in use worldwide and AVIF in 96.35%, so most sites are sending heavier files than their visitors’ browsers need.

JPEG XL is the newcomer: on by default in Chrome 155 and Firefox 158 as of this month, and covered in its own section below.

JPEG: Still the Workhorse

The JPEG standard, ITU-T T.81, dates from 1992, and every camera, phone, browser, email client and upload form can read it. It is the baseline every other format is judged against.

Pros: opens everywhere, encodes in milliseconds, and makes a photograph about a tenth of its raw size. A 1,200 × 800 photo is 2.88 MB uncompressed (24 bits per pixel); as a JPEG at the web’s median of 2.0 bits per pixel (Almanac 2024) it lands near 240 kB.

Cons: each re-save discards a little more detail, there is no alpha channel, so transparent areas turn solid, and it needs roughly a third more bytes than WebP for the same visual quality. Text and sharp edges pick up visible ringing.

When to use it: photographs on pages that must work on anything, the src fallback inside a <picture> element, and every upload where someone else sets the rules. Exam portals and passport-photo forms nearly always ask for JPG; see our guide to compressing images for government forms.

PNG: For Graphics and Transparency

PNG stores pixels losslessly, running DEFLATE over filtered scanlines, so what you save is exactly what comes back. It carries a full 8-bit alpha channel rather than a single see-through colour, which is why a PNG logo sits cleanly on any background.

Pros: lossless, perfect edges on text and line art, proper partial transparency, and a palette mode that keeps flat graphics with few colours very small.

Cons: photographs balloon. The Almanac’s 2024 median was 3.8 bits per pixel for PNG against 2.0 for JPEG, so the 240 kB JPEG above would be around 450 kB as a PNG, with no benefit a viewer could see. Animation exists only through the APNG extension, which few tools produce.

When to use it: logos, icons, interface screenshots, charts and diagrams, and anything that has to keep a see-through background pixel for pixel. Never for a photo gallery.

WebP: The Modern Default

Google built WebP for the web. It has a lossy mode derived from the VP8 video codec, a lossless mode, an alpha channel in both, and animation. Google’s WebP documentation (updated August 2025) puts lossy WebP 25 to 34% smaller than JPEG at the same SSIM score and lossless WebP 26% smaller than PNG; a lossy WebP with transparency is often about three times smaller than the matching PNG.

In practice the 240 kB JPEG above becomes roughly 160 to 180 kB as a WebP, and a 60 kB PNG logo becomes about 44 kB in lossless WebP, or around 20 kB if lossy WebP with alpha is acceptable. Across ten product photos on one page, that is 2.4 MB falling to about 1.7 MB.

Browser support: caniuse.com lists 97.18% global support as of October 2026: Chrome 32+ (2014), Edge 18+, Firefox 65+ and Safari 16+, with Safari 14 to 15.6 needing macOS 11 Big Sur or newer. The missing 3% is mostly very old devices.

Cons: the portals that insist on JPG reject WebP without explanation, and some desktop viewers and older email clients still cannot open it. It is a delivery format for your own site, not a file to hand to someone else.

When to use it: as the default for every raster image on a site you control; it often replaces a JPEG-plus-PNG pair with a single file.

AVIF and JPEG XL: The Next Generation

AVIF

AVIF wraps a still frame from the AV1 video codec inside a HEIF container, and because AV1 is a far younger codec than VP8 or the 1992 JPEG transform, it squeezes much harder. MDN’s image format guide (updated 8 October 2026) describes lossy AVIF as around 50% smaller than JPEG. Results swing with content and encoder settings, though: one of web.dev’s own examples saved only about 6%, so “about half” is typical, not guaranteed.

Pros: the smallest files of the mainstream formats, with alpha, HDR, wide colour gamut, 10- and 12-bit colour and animation.

Cons: encoding is slow, decoding costs more CPU on low-end phones, there is no progressive rendering (the picture appears only after the whole file has arrived), and tooling is less mature than WebP’s.

Current adoption: caniuse.com’s October 2026 data shows 96.35% global support: Chrome 85+, Edge 121+, Firefox 93+ (animated AVIF from 113) and Safari 16.4+, with Safari 16.0 to 16.3 showing stills only.

When to use it: image-heavy e-commerce, media and mobile-first sites, served through <picture> with a WebP or JPEG fallback and ideally generated by a CDN or build step.

JPEG XL

After years behind a flag, JPEG XL (ISO/IEC 18181) is on by default in Chrome 155, stable since 6 October 2026. Chrome’s announcement credits jxl-rs, a decoder written in Rust, and claims 30 to 50% better compression than JPEG, plus lossless mode, HDR and the ability to shrink an existing JPEG without losing a pixel. Firefox 158, released on 13 October 2026 according to Mozilla’s release notes, switched it on too. Safari has decoded still JPEG XL since version 17 (September 2023), without animation or progressive display. Edge 155 reportedly includes it, but we could not confirm that at the time of writing.

caniuse.com’s usage figure for JPEG XL still reflects September traffic, before either browser shipped, so we will not quote it. The honest status is “Chrome 155+, Firefox 158+, and still images in Safari 17+”: worth testing behind <picture>, not yet something to rely on alone.

Format Comparison

Format	Typical size at similar quality	Transparency	Animation	Browser support (caniuse.com, Oct 2026)
JPEG	Baseline	No	No	Universal
PNG	Lossless; about 1.9× JPEG on photos	Yes, 8-bit alpha	Only via APNG	Universal
WebP	25–34% smaller than JPEG	Yes	Yes	97.18%
AVIF	Around 50% smaller than JPEG	Yes	Yes	96.35%
JPEG XL	30–50% smaller than JPEG (Chrome’s figure)	Yes	Yes, except Safari	Chrome 155+, Firefox 158+, Safari 17+ (stills)

Size figures are each publisher’s claim (PNG from the Almanac 2024 medians), so expect variation on your own images.

How to Choose the Right Format for Your Use Case

A photograph or a busy scene? WebP, with an AVIF variant if the page is image-heavy, and a JPEG fallback inside <picture>. If you can only ship one file, a JPEG at quality 80 is still a respectable choice.

Need a transparent background? Lossy WebP with alpha for cut-out photos, PNG when the edges must be lossless, and AVIF if your pipeline already produces it.

Logo, icon or interface graphic? If the artwork exists as vectors, SVG beats all of them: it scales to any size and is usually a few kB. Otherwise PNG or lossless WebP.

Tight bandwidth or a mobile-first audience? AVIF first, WebP second, and resize before you encode; a 1,600 px wide image is wasted inside a 400 px column.

Uploading to a form, portal, job site or a client? JPG, at whatever size and dimensions they state. WebP and AVIF are delivery formats for pages you run, not submission formats. For the performance case, read why you should compress images for the web; for the three classic formats in depth, see JPEG vs PNG vs WebP.

Compressing Any Format with Mb2KbSizer

Format is half the story. The 911 kB of images on the Almanac’s median mobile home page would still be about 600 kB after a flawless WebP conversion; what cuts it further is sensible dimensions and a size target.

Mb2KbSizer runs entirely in your browser, with no upload and no storage. Drop in a JPG, PNG, WebP, GIF, BMP or AVIF file (AVIF wherever your browser can decode it), type a target such as 100 kB, and the tool searches quality settings until the file lands at or just under that number. If that would demand very low quality, it steps the pixel dimensions down instead, because a slightly smaller sharp picture beats a blocky full-size one.

Output can be Auto (JPG for most files; WebP input stays WebP) or forced to JPG, WebP or PNG, so one picture can become a WebP for your site and a JPG for a portal in two quick runs. The tool does not write AVIF or JPEG XL; compress and resize here first, then let your CMS or CDN derive the AVIF copy from the trimmed source.

A worked example: a 3.2 MB phone photo at 4,000 × 3,000 px, target 150 kB, output WebP, resize to fit within 1,600 × 1,200 px, comes out a hair under 150 kB. For a folder of product photos, the bulk image compressor applies one target and one longest-side limit to up to 200 images and hands back a ZIP; when a form wants a specific number, the 100 kB preset page has the target pre-filled.