Image Optimization for Web: WebP vs AVIF vs JPG Compared in 2026

Images are the single biggest weight on most web pages — typically 50–70% of total bytes. Picking the right format saves 30–70% per image, which compounds across a page into the difference between a 4-second and a 1.5-second load.

This guide compares every realistic format choice for 2026 — JPG, PNG, WebP, AVIF, JPEG XL — with real benchmark numbers, browser support reality, and the decision tree for picking the right format per use case.

The contenders in 2026

Five formats matter for web images this year:

JPG (JPEG) — 1992 standard. Lossy compression. Universal support. Best at photographic content. 24-bit colour, no alpha channel.
PNG — 1996 standard. Lossless compression. Universal support. Best at sharp graphics, logos, screenshots with text. Supports alpha transparency.
WebP — Google, 2010. Both lossy and lossless modes, alpha support, animation support. Universal browser support since 2020.
AVIF — AOMedia, 2019. Both lossy and lossless, alpha, animation, wide colour gamut (HDR). 92% browser support globally as of 2026.
JPEG XL — JPEG committee, 2021. Designed as a JPEG successor. Lossless re-encoding of existing JPEGs. ~75% browser support in 2026 (Safari yes, Chrome yes since v126 in 2024, Firefox flag-gated).

GIF still exists but is obsolete — WebP and AVIF both handle animation better at a fraction of the size.

Headline benchmark numbers

Tested against the same 1920 × 1080 photographic source (24-bit colour photograph of a market scene, JPG original at 1.8 MB at quality 95):

Original JPG (q95): 1,800 KB. Reference baseline.
JPG re-encoded at q80: 480 KB (-73%). Visible artefacts only under pixel-peep.
JPG re-encoded at q70: 320 KB (-82%). Acceptable for thumbnails and background images.
WebP at q80: 290 KB (-84%). Slightly better quality than JPG q80 at half the size.
WebP at q70: 195 KB (-89%). Sweet spot for hero images.
AVIF at q60 (default high quality): 165 KB (-91%). Better detail preservation than WebP q70.
AVIF at q45: 95 KB (-95%). Better quality than JPG q70 at one-third the size.
JPEG XL at q80: 245 KB (-86%). Similar to WebP q80 with better high-frequency detail.

For sharp graphics (1920 × 1080 dashboard screenshot with text):

PNG (lossless): 280 KB. Reference baseline.
PNG re-encoded with pngquant 256 colors: 65 KB (-77%). Lossy palette reduction; visible only for gradient-heavy content.
WebP lossless: 195 KB (-30%). Smaller than PNG, lossless, same visual.
WebP lossy q90: 45 KB (-84%). Some text aliasing.
AVIF lossless: 175 KB (-37%). Best lossless for sharp graphics.
AVIF lossy q70: 35 KB (-87%). Sharper text rendering than WebP at similar size.

Takeaway: AVIF is the new winner across both photographic and graphic content. WebP is a strong second. Old JPG/PNG is for compatibility only.

Browser support in 2026

Real-world support (caniuse.com as of May 2026):

JPG / PNG / GIF: 100% (every browser ever).
WebP: 96.8% globally. Universally supported on every browser shipped since 2020.
AVIF: 92.4% globally. Supported in Chrome (since v85, 2020), Edge (since v121, 2024 — late!), Firefox (since v93, 2021), Safari (since v16, 2022). The 7.6% gap is mostly old Android browsers, Edge < v121 (auto-updates handle most), and some embedded webviews.
JPEG XL: 75% globally. Chrome v126+ (June 2024), Edge v126+ (followed Chrome), Safari (since v17, 2023), Firefox behind flag.

Practical conclusion for 2026: use AVIF with WebP fallback with JPG fallback. The 7.6% who can't see AVIF will see WebP. The 3.2% who can't see WebP will see JPG. Everyone sees an image.

The picture element pattern that handles all this

Standard HTML pattern for 2026:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600" loading="lazy" decoding="async">
</picture>

The browser picks the first format it supports. Always provide JPG as the final fallback for maximum reach.

For responsive images (different sizes for different viewports):

<picture>
  <source type="image/avif"
          srcset="hero-480.avif 480w, hero-960.avif 960w, hero-1920.avif 1920w"
          sizes="(min-width: 960px) 1920px, 100vw">
  <source type="image/webp"
          srcset="hero-480.webp 480w, hero-960.webp 960w, hero-1920.webp 1920w"
          sizes="(min-width: 960px) 1920px, 100vw">
  <img src="hero-960.jpg" alt="Hero" width="1920" height="800" loading="eager">
</picture>

Hero images above the fold: loading="eager". Everything else: loading="lazy" saves bandwidth and improves LCP (Largest Contentful Paint) Core Web Vital.

Compression settings that hit the sweet spot

After running thousands of comparisons, these are the production-safe defaults:

JPG (for legacy/fallback):

Photographic content: quality 80. Larger reductions visible.
Screenshots, graphics: quality 90. Lower causes text artefacts.
Thumbnails (small displayed size): quality 70 acceptable.
Use MozJPEG or ImageMagick as the encoder. Default GIMP/Photoshop JPEG is 15–20% larger at the same visual quality.

WebP:

Photographic: lossy quality 75–80.
Screenshots / sharp graphics: lossless mode, or lossy quality 90.
Use cwebp -q 80 from command line, or WebP converter.

AVIF:

Photographic: quality 50–60 (note: AVIF's quality scale is calibrated differently — q60 in AVIF is similar perceptual quality to q80 in JPG).
Screenshots: quality 70 with -s 4 speed (slower encoding, better compression).
Use avifenc from the libavif suite, or AVIF converter.

PNG:

Lossless when needed (logos with transparency, screenshots that go through OCR).
Run through pngquant for 60–80% reduction with palette quantisation if the image has fewer than 256 distinct colours.
Avoid PNG for photographs — JPG/WebP is always smaller.

When to use which format (decision tree)

The simplified 2026 decision flow:

Photographic content (hero images, lifestyle shots, product photos): AVIF primary, WebP fallback, JPG fallback. Quality 60 / 80 / 80 respectively.
Graphics with text (screenshots, dashboard demos, infographics): AVIF lossy or WebP lossy at high quality (q90+), with PNG fallback if transparency matters.
Logos, icons, sharp simple graphics: SVG primary. Falls back to PNG if SVG impractical. Never JPG (terrible for sharp edges).
Animations: AVIF animation > WebP animation > GIF. AVIF supports HDR and 10-bit colour for animations.
Photo with transparency (rare but happens — e.g. product cutouts): WebP with alpha. AVIF as primary in 2026.
Hero image, critical LCP element: AVIF/WebP with fetchpriority="high" and loading="eager". Pre-load via <link rel="preload"> if extreme priority.

Image dimensions: the underrated leverage

Compression formats are tuned for the size you actually display. Serving a 4000 × 3000 pixel image scaled down in CSS to 800 × 600 wastes 95% of the bytes you sent.

Use responsive image sets with explicit srcset and sizes to deliver only the resolution needed for that viewport. Targets:

Mobile-first sites: 480w, 800w, 1200w sets. Hero images add a 1920w for high-DPI.
Desktop-first sites: 800w, 1200w, 1920w sets. Optional 2560w for 4K displays.
Device pixel ratio: provide 2× variants for icons and small graphics (1× is blurry on retina).

The image resizer tool generates a complete srcset in one pass.

The "Largest Contentful Paint" (LCP) impact

LCP is the Core Web Vitals metric that measures when the largest above-the-fold element appears. For 70% of pages, LCP is an image. Optimising that one image often improves the whole page's LCP score from "needs improvement" (>2.5s) to "good" (<2.5s).

Three moves that compound:

Use AVIF or WebP for the LCP image. 60% smaller bytes = 60% faster transfer.
fetchpriority="high" on the LCP image tells the browser to prioritise it over other resources.
Pre-load via <link rel="preload" as="image" href="hero.avif" type="image/avif"> in <head> so the browser starts downloading before discovering the image in HTML.

Combined, those three moves typically cut LCP by 0.5–1.2 seconds.

EXIF metadata and privacy

Photos from phones and cameras embed metadata: GPS coordinates, camera model, capture timestamp, camera settings, sometimes thumbnail. Common 2026 mistake: uploading vacation photos with GPS coordinates still embedded.

Most image optimisers should strip EXIF by default. Verify with EXIF viewer before publishing user-uploaded images. The CMS or upload pipeline should strip metadata server-side; client-side stripping is a fallback.

Common mistakes that cost performance

The patterns we see in audited sites:

Serving PNG for photographs: 4× larger than equivalent JPG/WebP/AVIF for the same content.
Serving original-resolution images and scaling in CSS: bandwidth wasted, LCP delayed.
No width and height on <img>: causes layout shift (bad CLS Core Web Vital).
loading="lazy" on the hero image: delays LCP by 200–500ms. Hero should be eager.
JPG quality 100: 30% larger than quality 90 with no visible difference. Default to 80 unless print-equivalent.
WebP-only without JPG fallback: 3% of users see broken images. Always provide fallback.
AVIF generated at wrong speed setting: -s 10 (default fast) gives 20% larger files than -s 4. Encoding takes longer but ships once.
One image for all viewports: serving 1920px to a 360px mobile screen wastes 75% of bytes.

Tools to use

Image Compressor — drop-in browser-based compression for JPG/PNG/WebP/AVIF.
Image Converter — convert between any format pair. Bulk processing.
Image Resizer — generate complete responsive srcset in one upload.
WebP to JPG — for cases where you need legacy JPG output.
EXIF Viewer — inspect and strip metadata before publishing.

The bottom line

AVIF is the format to lead with in 2026 — universal-enough support (92%), best compression, supports HDR. WebP is your fallback (97% support). JPG is your safety net (100% support).

Use <picture> to serve all three. Generate responsive sizes for each. Set quality at 60/80/80 for AVIF/WebP/JPG respectively as defaults. Add loading="lazy" to everything below the fold.

Done thoughtfully, this cuts your average image weight by 60–80%, which cascades into faster LCP, better Core Web Vitals, lower bandwidth costs, happier users on slow connections, and a quiet boost to SEO from the page-experience signal.

The single biggest performance gain you can ship this week is converting your top 20 most-viewed images to AVIF/WebP with proper responsive srcsets.