Skip to content
Published on

Image Formats in 2026 — AVIF / JPEG XL / WebP / HEIC / MozJPEG / QOI / Sharp / Squoosh Deep Dive

🇰🇷KO🇺🇸EN🇯🇵JA
Split View필사 모드
Authors

1. The 2026 Image Format Map — JPEG / WebP / AVIF / JPEG XL / HEIC, the Big Five

As of May 2026, the image formats practically used on web and mobile have narrowed to five. On top of the 30-year-old trio of JPEG (1992), PNG (1996), and GIF (1987), we have WebP (2010), HEIC (2015), AVIF (2019), and JPEG XL (2021), with QOI (2021), lossless variants, and animation variants slotted in between.

The big picture:

  • Classic formats — JPEG (photos), PNG (UI/transparency), GIF (animation, mostly legacy)
  • Modern lossy — WebP, AVIF, HEIC, JPEG XL
  • Modern lossless — Lossless WebP, Lossless AVIF, JPEG XL Lossless, PNG (still), QOI
  • Animation — GIF, APNG, Animated WebP, Animated AVIF
  • Tools / pipelines — Sharp, libvips, Squoosh, ImageMagick, MozJPEG, Cloudinary, imgix, Fastly Image Optimizer, ImgBot

Two events dominate 2026. First, AVIF has finally stabilized across Edge, Chrome, Firefox, and Safari, becoming the de-facto "modern image format." Second, JPEG XL was pulled from Chrome in 2023, formally adopted in Safari 17 in September 2023, and as of 2025 Google has softened its stance — a Chrome return is back under discussion.

This article is a fast tour of every format and tool as of May 2026. Newcomers will find a starting point; senior engineers will find candidates to add to their next pipeline.

2. AVIF — Universal Browser Support, the Modern Standard

AVIF (AV1 Image File Format) reuses an AV1 video keyframe as a still image. It was standardized by the Alliance for Open Media in 2019. Chrome 85 was first to ship in August 2020; by May 2026 every major browser supports it in stable.

  • Chrome 85+ (August 2020)
  • Firefox 93+ (October 2021)
  • Safari 16.4+ (March 2023, iOS 16.4 / macOS 13.3)
  • Edge 121+ (2024)

AVIF's headline strength is compression ratio. At equivalent quality it is roughly 50% smaller than JPEG and about 20% smaller than WebP. It supports HDR (10/12-bit), wide gamut (BT.2020), alpha, animation, and image sequences.

<picture>
  <source type="image/avif" srcset="hero.avif" />
  <source type="image/webp" srcset="hero.webp" />
  <img src="hero.jpg" alt="Hero image" width="1280" height="720" loading="lazy" />
</picture>

The downside is slow encoding. Converting the same image takes roughly 10x longer than MozJPEG and 5x longer than WebP. Pre-encoding at build time, background job queues, and async CDN-side conversion are the usual workarounds.

Sharp (libvips) calls libaom (Google's reference encoder) or SVT-AV1 (Intel/Netflix) for AVIF encoding. SVT-AV1 is faster; libaom compresses better. Since 2024, libaom's multithreaded optimizations have narrowed the gap considerably.

import sharp from 'sharp'

await sharp('photo.jpg')
  .resize(1280, 720, { fit: 'inside' })
  .avif({
    quality: 50, // 0-100, around 50 is the sweet spot
    effort: 4, // 0-9, higher means slower but smaller
    chromaSubsampling: '4:2:0',
  })
  .toFile('photo.avif')

Recommended settings in 2026: quality 50-60 / effort 4 for photos, quality 70 / effort 6 for UI graphics. Pushing effort higher than that barely shrinks files and explodes encoding time.

3. JPEG XL — Removed from Chrome (2023), Restored in Safari 17, Returning to Chrome in 2025?

JPEG XL (.jxl) is the next-generation JPEG successor standardized in 2021 as ISO/IEC 18181. Its core designers are Jon Sneyers at Cloudinary (FUIF) and Jyrki Alakuijala at Google Zurich (PIK), whose work was merged. Technically it beats JPEG / WebP / AVIF on nearly every axis.

Key properties:

  • Photo compression — averages 60% smaller than JPEG, on par with or slightly ahead of AVIF
  • Lossless compression — averages 35% smaller than PNG
  • Lossless JPEG re-encoding — re-encode existing JPEGs about 20% smaller with zero loss
  • Progressive decoding — a partial download already yields a usable preview
  • Variable bit depth — 1-bit to 32-bit float
  • Fast decode — clearly quicker to decode than AVIF

Then, in October 2022, Google abruptly announced that Chrome 110 would drop JPEG XL support. The stated reason was "not enough ecosystem interest." In January 2023 the flag was removed outright in Chrome 110. The decision triggered an unusual backlash — Adobe, Facebook, Intel, Krita, and Cloudinary all filed public objections.

Then the tide turned.

  • September 2023 — Apple shipped formal JPEG XL support in Safari 17 (iOS 17 / macOS Sonoma), both in Image I/O and WebKit
  • 2024 — Adobe Camera Raw, Lightroom, and Photoshop added official support
  • Late 2024 — parts of Google's own Pixel camera pipeline began using JXL internally
  • 2025 — libjxl 0.10 reached production-grade encoding speed and memory footprint
  • Second half of 2025 — the Chromium issue tracker reopened JPEG XL return discussions (Chromium issue 178205)

As of May 2026, Chrome's official return is not yet confirmed, but momentum is clearly tilted toward bringing it back. Edge and Brave maintain patches that include libjxl in their own builds.

# Encode (libjxl 0.10+)
cjxl input.png output.jxl --quality 90 --effort 7

# Lossless JPEG re-encode (decoding back produces a bit-identical JPEG)
cjxl photo.jpg photo.jxl --lossless_jpeg=1

# Decode
djxl output.jxl decoded.png

JPEG XL is the top candidate for a format that "still matters in ten years." It already beats AVIF in lossless, high-bit-depth use cases such as print, photography, and medical imaging.

4. WebP — Google's Older Answer

WebP is a format Google announced in 2010. It derives from a keyframe of the On2 VP8 video codec and was billed as a successor to JPEG. Chrome / Opera supported it from 2014, then Firefox 65 (2019), Edge 18 (2018), and Safari 14 (September 2020) joined, making it universally supported.

WebP's position in 2026 is awkward:

  • Clearly behind AVIF on compression (about 15-20% larger on photos)
  • 5x faster to encode than AVIF
  • Lossless WebP averages 25% smaller than PNG
  • Animated WebP averages 30% smaller than GIF
  • Supports alpha

In short, WebP survives as "the realistic alternative where AVIF's adoption cost is too high." Static sites with tight build budgets and user-upload pipelines with limited encode capacity still favor WebP.

import sharp from 'sharp'

// Lossy WebP for photos
await sharp('photo.jpg')
  .webp({ quality: 80, effort: 4 })
  .toFile('photo.webp')

// Lossless WebP for UI / logos
await sharp('logo.png')
  .webp({ lossless: true, effort: 6 })
  .toFile('logo.webp')

// Lossy with alpha preserved
await sharp('icon.png')
  .webp({ quality: 85, alphaQuality: 90 })
  .toFile('icon.webp')

CDNs usually generate both AVIF and WebP and pick the best match per request using the Accept header. In that setup, WebP plays the fallback for clients that lack AVIF or decode it slowly.

5. HEIC/HEIF — Apple's Default

HEIF (High Efficiency Image File Format) is a container standardized as ISO/IEC 23008-12. When it holds an HEVC (H.265) keyframe, the file becomes HEIC (.heic). Apple flipped iPhone's default photo format to HEIC in iOS 11 (2017); effectively every iOS / iPadOS / macOS device now generates HEIC.

HEIC compresses about 50% better than JPEG on average, similar to AVIF / JPEG XL. The limits:

  • Licensing — HEVC has a complex patent pool and decoder / encoder royalties, which is why it never made it into a web standard
  • Browser support — only Safari 17+ supports it directly (Apple ecosystem only)
  • Android 9.0+ can read the HEIF container, but codec support varies by device
  • Windows / Linux desktop typically needs a separate codec pack

So HEIC arrives constantly as user-uploaded source files, but services almost never serve it back. A typical pipeline:

import sharp from 'sharp'

// HEIC input → AVIF / JPEG conversion
// Requires Sharp built with libheif (sharp 0.32+)
await sharp('IMG_1234.heic')
  .resize(2048, null, { withoutEnlargement: true })
  .avif({ quality: 60 })
  .toFile('IMG_1234.avif')

// Or another option
await sharp('IMG_1234.heic')
  .resize(2048, null, { withoutEnlargement: true })
  .jpeg({ quality: 85, mozjpeg: true })
  .toFile('IMG_1234.jpg')

Nine years after iOS 11, user-upload systems are still riddled with "can't read HEIC" bugs in 2026. Sharp / ImageMagick / Pillow all require libheif to be enabled at build time to support HEIC.

6. MozJPEG / Lossless Variants

MozJPEG is a JPEG encoder optimization project Mozilla started in 2014. It produces a bitstream that is 100% compatible with any standard JPEG decoder, yet averages 5-15% smaller files than libjpeg-turbo. In other words: the receiving end sees a plain JPEG, but the server squeezed harder.

MozJPEG's key techniques:

  • Trellis quantization — fine-tune quantization coefficients to optimize bit rate
  • Progressive scan optimization — pick the best of eight standard scan scripts
  • Separate compression of DC / AC coefficients

In Sharp, flipping mozjpeg: true routes encoding through MozJPEG instead of libjpeg-turbo.

await sharp('input.jpg')
  .jpeg({
    quality: 82,
    mozjpeg: true, // use MozJPEG encoder
    progressive: true,
    trellisQuantisation: true,
    chromaSubsampling: '4:2:0',
  })
  .toFile('output.jpg')

The lossless variants as of 2026:

  • Lossless WebP — averages 25% smaller than PNG, alpha supported
  • Lossless AVIF — averages 15% smaller than PNG, encoding is very slow
  • JPEG XL Lossless — averages 35% smaller than PNG, the best balanced choice
  • QOI — slightly larger than PNG but 10x+ faster to encode/decode
  • PNG (zopfli, oxipng) — still the most universally compatible lossless
  • WebP 2 — effectively dead, never merged into mainline

UI icons, screenshots, and diagrams — anything where pixel-level accuracy matters — remain firmly in lossless territory. JPEG XL Lossless wins on size; oxipng-optimized PNG wins on compatibility.

7. QOI — The Charm of the Quite OK Image Format

QOI was published in December 2021 by Dominic Szablewski (phoboslab). Its appeal is extreme simplicity: the spec is 14 pages, and the reference encoder is roughly 300 lines of C.

QOI properties:

  • Lossless
  • Encodes / decodes 20-50x faster than PNG on average
  • Files average about 10% larger than PNG
  • Zero dependencies — a single header file (qoi.h) is the entire library
  • Uses only four chunk types (INDEX, DIFF, LUMA, RGB/RGBA)

It is not a web standard, but it has quickly settled into game assets, internal tool-chain caches, and WebGL textures — anywhere "decode speed matters." Godot 4.x added a QOI option to its built-in texture importer, and several indie games pack textures as QOI inside their .pak archives.

// QOI encoding is trivial
#define QOI_IMPLEMENTATION
#include "qoi.h"

qoi_desc desc = {
  .width = 1024,
  .height = 1024,
  .channels = 4,
  .colorspace = QOI_SRGB
};
qoi_write("output.qoi", pixels, &desc);

Browsers don't decode QOI, so it can't be served directly on the web. But because a WASM decoder is under 10 KB, some interactive pages now use QOI for background decoding when raw speed is needed. For ordinary website imagery, do not use it.

8. Animation — Is Animated AVIF Replacing GIF?

GIF dates to 1987. Its simple structure — 256-color palette, LZW compression, per-frame delay — made it the de-facto standard for short clips. In 2026, virtually every chat platform — Messenger, Slack, Discord — still accepts .gif uploads.

The problem is size. A 5-second 720p clip is routinely 5-20 MB as GIF, while the same clip encodes to 200 KB-1 MB as MP4. So Twitter, Slack, Discord, and others internally convert uploaded GIFs to MP4 / WebM before serving.

The 2026 GIF alternatives:

  • MP4 / WebM video — smallest, needs autoplay + muted handling
  • Animated WebP — Chrome 32+ (2014), Firefox 65+ (2019), Safari 14+ (2020), simple fallback story
  • Animated AVIF — stable across all browsers, smallest (additional 30% over WebP)
  • APNG — PNG's animation extension, lossless but large

Animated AVIF began real adoption in 2024. It reuses the AV1 codec to store either a single keyframe (still image) or multiple frames (animation) in the same container.

import sharp from 'sharp'

// Bundle multiple frames into Animated AVIF
// sharp 0.33+
await sharp('frames/', { animated: true, pages: -1 })
  .resize(640, 360)
  .avif({ quality: 50, effort: 4 })
  .toFile('animation.avif')

// Or via ffmpeg directly
// ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 output.avif

The catch: Animated AVIF uses more decode memory than GIF / WebP. Loading 50 5-MB Animated AVIFs on a single page in mobile Safari can crash the tab. The most reliable choice in production is still "convert to a real video."

9. Cloudinary / imgix / Fastly Image Optimizer — Managed CDNs

Outsourcing image transformation / optimization to a CDN is the 2026 standard. The three big options:

Cloudinary (founded 2012) is the managed image / video platform with the broadest transformation vocabulary. Its signature is encoding transformations inline in the URL.

# Original
https://res.cloudinary.com/demo/image/upload/sample.jpg

# Width 800, AVIF, auto quality
https://res.cloudinary.com/demo/image/upload/w_800,f_avif,q_auto/sample.jpg

# Face-aware crop + watermark + grayscale
https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_thumb,g_face,e_grayscale,l_logo/sample.jpg

imgix (founded 2011) prefers query-string parameters. Automatic AVIF / WebP picking is just auto=format.

# Original
https://example.imgix.net/photo.jpg

# Width 800, auto format, auto compress
https://example.imgix.net/photo.jpg?w=800&auto=format,compress

Fastly Image Optimizer (previously Fastly IO, launched 2017) integrates with Fastly Compute. Your origin (S3, GCS, etc.) holds the source; Fastly transforms and caches.

# Use a Fastly domain with query-string transformations
https://cdn.example.com/photo.jpg?width=800&auto=avif&quality=80

Pricing typically combines "source storage + transformed image traffic." Approximate 2026 numbers:

  • Cloudinary — free 25 credits/month, then $99 to enterprise
  • imgix — free 1000 images, then starts at $25
  • Fastly Image Optimizer — Fastly CDN pricing plus the Image Optimizer add-on

Vercel, Netlify, and Cloudflare also ship their own image optimization. Next.js next/image uses Vercel Image Optimization on Vercel and falls back to Sharp or external loaders elsewhere.

10. Sharp (Node.js, libvips) — The Server-Side Standard

Sharp is a Node.js image-processing library that Lovell Fuller has maintained since 2013. Internally it calls libvips, a C library that originated in 1989 at the Victoria and Albert Museum in the UK. Compared with ImageMagick, libvips averages 4-8x faster while using roughly a quarter of the memory.

As of May 2026 the stable line is Sharp 0.34. Capabilities:

  • Input formats — JPEG, PNG, WebP, AVIF, HEIC, GIF, SVG, TIFF, PDF
  • Output formats — JPEG (MozJPEG), PNG, WebP, AVIF, GIF, TIFF, JPEG XL (experimental)
  • Transformations — resize, crop, rotate, color-space conversion, metadata preserve / strip
  • Composition — watermark, overlay, alpha compositing
  • ICC profile, EXIF, IPTC, XMP all handled
import sharp from 'sharp'

// Typical photo transformation pipeline
async function processPhoto(inputPath, outputDir) {
  const image = sharp(inputPath)
  const metadata = await image.metadata()

  // Generate multiple sizes in multiple formats
  const sizes = [320, 640, 1024, 1920]
  const formats = ['avif', 'webp', 'jpeg']

  for (const size of sizes) {
    for (const format of formats) {
      const out = `${outputDir}/photo-${size}.${format}`
      let pipeline = sharp(inputPath).resize(size, null, {
        fit: 'inside',
        withoutEnlargement: true,
      })

      if (format === 'avif') {
        pipeline = pipeline.avif({ quality: 55, effort: 4 })
      } else if (format === 'webp') {
        pipeline = pipeline.webp({ quality: 80, effort: 4 })
      } else {
        pipeline = pipeline.jpeg({ quality: 82, mozjpeg: true })
      }

      await pipeline.toFile(out)
    }
  }
}

Every major framework's built-in image pipeline — Next.js, Astro, Nuxt, SvelteKit — defaults to Sharp. Vercel Image Optimization's engine is Sharp.

Performance tips:

  • sharp.cache(false) — avoid memory leaks in serverless environments
  • sharp.concurrency(1) — prevent CPU contention in multi-worker setups
  • sharp.simd(true) — SIMD acceleration, on by default

11. Squoosh (Google) — The Web App

Squoosh is a browser-based image compressor that the Google Chrome team launched in 2018. Every encoder is compiled to WASM and runs inside the browser, so images never leave the user's machine. It is the most convenient tool when a designer or marketer needs to optimize one or two images quickly.

Supported encoders:

  • MozJPEG
  • OxiPNG
  • WebP (Google's libwebp)
  • AVIF (libaom)
  • JPEG XL (libjxl)
  • QOI
  • WebP 2 (experimental)

URL: https://squoosh.app/

# There is a Squoosh CLI too (npm package)
npx @squoosh/cli --webp '{"quality":85}' --avif '{"cqLevel":33}' input.jpg

That said, the Squoosh CLI has effectively gone unmaintained since 2022; for production work, native tools such as Sharp / cwebp / cavif / cjxl are more suitable. The Squoosh web app itself remains actively updated.

Neighbors in the same role:

  • ImageOptim (macOS) — drag-and-drop lossless optimization for PNG/JPEG/GIF/SVG
  • ImageAlpha (macOS) — specialized in 8-bit PNG conversion
  • Pixelmator Pro — macOS-native photo editor; the Export for Web panel writes AVIF / WebP / JPEG XL directly
  • Adobe Save for Web (Photoshop) — the legacy panel still works; Generate / Quick Export are the successors
  • Figma Export — SVG / PNG / JPEG / WebP supported, AVIF added in 2025

12. ImageMagick — The Classic

ImageMagick, started in 1987, is the all-purpose CLI that touches nearly every image format. The May 2026 stable line is 7.1.x. Over 200 input formats and almost any conversion / effect / composition can be expressed in a single command line.

# Resize + format conversion
magick input.jpg -resize 800x600 -quality 85 output.webp

# Batch process many images in one line
magick mogrify -resize 1920x -format avif -quality 60 *.jpg

# Text watermark
magick input.jpg -gravity southeast -fill white -pointsize 24 \
  -annotate +10+10 "Copyright 2026" output.jpg

# GIF to Animated WebP
magick input.gif -define webp:lossless=false output.webp

Its strengths are compatibility and feature richness; its weaknesses are speed and memory. ImageMagick is great for one-off jobs but Sharp / libvips is far faster for bulk work. Historically (ImageTragick, CVE-2016-3714, etc.) ImageMagick has shipped several RCE vulnerabilities, and new CVEs continue to appear. Treat user-uploaded inputs with care.

GraphicsMagick is a 2002 fork of ImageMagick that focused on stability and performance. It has fewer features but is more robust.

ImgBot (https://imgbot.net/) is a bot that scans your GitHub repository, applies lossless optimization to images, and opens a PR. Free for open-source repositories; private repos start at $5/month. Install it once and you keep getting optimization PRs for every new image commit.

13. Korea / Japan — Naver and Pixiv Image Infrastructure

In Korea, the biggest image traffic goes through Naver (Blog, Cafe, Shopping, News) and Kakao (Daum, KakaoTalk, KakaoStory). Naver operates its own distributed storage (NCloud Object Storage) and an internal image transformation gateway, and exposes capabilities to external developers as NAVER Cloud Image Optimizer. Kakao runs its own image CDN inherited from the Daum era.

In Japan, ImageFlux — operated by Pixiv — is the best-known managed image transformation service. It exposes an imgix-style query-string interface and is particularly strong at compression presets for illustrations and manga line art. ImageFlux runs on Sakura Internet's infrastructure.

# ImageFlux URL example
https://example.com/path/to/image.jpg?w=800&h=600&f=webp&q=80

Niconico, Mobage, GREE, and other large Japanese services run their own image transformation pipelines, but ImageFlux is the most prominent externally-exposed SaaS. It is worth knowing for Korean developers entering the Japanese market.

LINE's sticker system uses its own format. APNG, MP4, and WebP are combined into containers; static, motion, and effect stickers each use different encodings.

Rakuten, Yahoo Japan, and ZOZO — the large Japanese shopping platforms — mostly run AVIF / WebP auto-conversion on their own CDNs. ZOZO announced in 2024 that it had switched AVIF on by default.

14. Who Should Pick What — Photos, Illustrations, UI Icons, Video Thumbnails

Photos (people / landscape / product):

  • First pick — AVIF quality 50-60 with a JPEG (MozJPEG) fallback
  • Second pick — WebP quality 80 with a JPEG fallback (when encoding budget is tight)
  • Always preserve the original upload (for re-encoding)

Illustrations / manga / line art:

  • First pick — Lossless WebP or PNG (oxipng-optimized)
  • Second pick — JPEG XL Lossless (if your Safari 17+ share is high)
  • AVIF can show ringing / color bleed on line art, so watch out

UI icons / logos:

  • First pick — SVG (vector)
  • Second pick — PNG (oxipng) — unbeatable compatibility at small sizes
  • Third pick — Lossless WebP — for complex raster icons where SVG is hard

Video thumbnails / hero images:

  • First pick — AVIF quality 45-55 (stays small even at large resolutions)
  • Second pick — WebP quality 75
  • Pair with <link rel="preload" as="image"> for LCP

Screenshots (blogs, docs):

  • First pick — PNG (oxipng) — text legibility first
  • Second pick — Lossless WebP — same quality, smaller
  • Lossy conversion (JPEG / AVIF) hurts text readability

User uploads (HEIC handling):

  • iOS uploads arrive as HEIC — convert to AVIF + JPEG on the server
  • Either archive or immediately discard the original (mind PII and EXIF GPS data)
  • Verify that Sharp is built with the libheif option

Animation:

  • Short clips (under 5 seconds) — Animated WebP or Animated AVIF with a GIF fallback
  • Long clips — MP4 / WebM video (<video autoplay muted loop>)
  • If the user is going to download it, plain GIF still works fine

The new 2026 default:

  • Sharp 0.34 + libvips 8.16 + Next.js 15 / Astro 5 / Nuxt 3
  • Pre-generate AVIF + WebP + JPEG (three variants)
  • CDN-side automatic selection via Accept header
  • Add JPEG XL as the fourth option once Chrome returns in a year or two

The 2026 image-tools landscape compresses better, automates more cheaply, and costs less at managed CDNs than five years ago. AVIF as the default cut traffic costs in half on average, and the maturation of Sharp + libvips made build-time pre-encoding practical. Pick the format and tooling that fit your project, and put a clean image on top of the fast 2026 internet.

References

Discuss on Twitter • View on GitHub