Image codecs overview
current
Pick a format by what the image is and where it has to be displayed. This page gives the short answer; each format page covers encoders, settings and pitfalls.
Which format should I use?
Section titled “Which format should I use?”| You have… | Use | Why |
|---|---|---|
| Photos for the web | AVIF or WebP, with a JPEG fallback | AVIF compresses best and has wide browser support; WebP encodes faster and is supported everywhere current; JPEG opens on anything |
| Photos where quality matters most, or HDR and wide gamut | JPEG XL | Excellent at high quality, supports HDR, lossless and progressive decoding. Supported in Safari 17+ and Chrome 155+; Firefox 158 (due 13 October 2026) enables it |
| Existing JPEGs you want smaller | JPEG XL lossless transcode, or jpegtran / MozJPEG | JPEG XL keeps the original JPEG recoverable bit for bit |
| Screenshots, UI, logos, line art | PNG (optimised with oxipng), or lossless WebP | Lossless and sharp; pngquant makes a lossy palette version much smaller |
| Transparency | PNG, WebP, AVIF or JPEG XL | JPEG and GIF can’t do soft alpha |
| Lossless masters and archives | PNG or TIFF; JPEG XL lossless for smaller files; JPEG 2000 in institutions that already use it | Keep a lossless master and export delivery files from it |
| Animation | A looping muted video, animated WebP or AVIF; GIF only where nothing else works | GIF is the largest and has 256 colours; see the GIF page |
| Phone and Apple-camera files | HEIC | Common camera output, but convert before sharing: licensing and support are patchy |
| Fast lossless in a game or tool | QOI | Trivial to implement and very fast, but larger files and no browser support |
At a glance
Section titled “At a glance”| Format | Compression | Bit depth | Alpha | Animation | Browser support (October 2026) |
|---|---|---|---|---|---|
| JPEG | Lossy | 8 | No | No | Everywhere |
| PNG | Lossless | Up to 16 | Yes | APNG | Everywhere |
| GIF | Lossless, 256 colours | 8 (palette) | 1-bit | Yes | Everywhere |
| WebP | Lossy or lossless | 8 | Yes | Yes | All current browsers |
| AVIF | Lossy or lossless | 8, 10, 12 | Yes | Yes | All current browsers |
| JPEG XL | Lossy or lossless | Up to 32 | Yes | Yes | Safari 17+ (stills only), Chrome 155+, Firefox 158+ |
| HEIC | Lossy or lossless (HEVC) | 8, 10 and up | Yes (auxiliary) | Image sequences | Safari 17+ only |
| JPEG 2000 | Lossy or lossless | 1–38 in the standard (tools mostly handle ≤16) | Yes (JP2 channels) | MJ2 only | None (Safari dropped it in 18.0) |
| QOI | Lossless | 8 | Yes | No | None |
Browser support changes quickly; the image and audio support guide is kept up to date, and the guide to the option tables lists every command-line option for the tools on these pages.
Tips that apply to all of them
Section titled “Tips that apply to all of them”- Always encode from a lossless master. Re-encoding a lossy file stacks errors.
- Compare by eye. For automatic comparison across formats use SSIMULACRA2 or Butteraugli; PSNR and SSIM reward blur and mislead on perceptually tuned encoders.
- Check metadata and colour. Orientation, ICC profiles and HDR signalling are the first things converters drop. Test one image from your pipeline in each target viewer.
- Quality numbers are per encoder.
-q 80incjpeg,cwebp,avifencandcjxlgives four different quality levels; compare outputs, not settings.