{
  "schemaVersion": 1,
  "contentVersion": "ca42e61ede0a24f789d7287a0001244ad22f4abf",
  "id": "docs/codecs/images",
  "collection": "docs",
  "title": "Image codecs overview",
  "description": "A quick guide to choosing an image format for photos, graphics, archives and animation, with links to the page for each format.",
  "canonicalUrl": "https://encode.wiki/codecs/images/",
  "apiUrl": "https://encode.wiki/api/v1/documents/docs/codecs/images.json",
  "markdownUrl": "https://encode.wiki/api/v1/markdown/docs/codecs/images.md",
  "status": "current",
  "tags": [
    "image",
    "overview"
  ],
  "license": "CC BY-SA 4.0",
  "dates": {
    "lastVerified": "2026-10-08T00:00:00.000Z"
  },
  "authors": [],
  "sources": [
    {
      "title": "JPEG XL",
      "url": "https://jpeg.org/jpegxl/",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "AV1 Image File Format specification",
      "url": "https://aomediacodec.github.io/av1-avif/",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "WebP Container Specification",
      "url": "https://developers.google.com/speed/webp/docs/riff_container",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "PNG specification, third edition",
      "url": "https://www.w3.org/TR/png-3/",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "JPEG 2000 family",
      "url": "https://jpeg.org/jpeg2000/",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "QOI specification",
      "url": "https://qoiformat.org/qoi-specification.pdf",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "Chrome 155 release notes",
      "url": "https://chromestatus.com/release-notes/155",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "WebKit features in Safari 18.0 (JPEG 2000 removed)",
      "url": "https://webkit.org/blog/15865/webkit-features-in-safari-18-0/",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    },
    {
      "title": "Firefox 158 beta release notes",
      "url": "https://www.firefox.com/en-US/firefox/158.0beta/releasenotes/",
      "accessedAt": "2026-10-08T00:00:00.000Z"
    }
  ],
  "headings": [
    {
      "depth": 2,
      "text": "Which format should I use?",
      "anchor": "which-format-should-i-use"
    },
    {
      "depth": 2,
      "text": "At a glance",
      "anchor": "at-a-glance"
    },
    {
      "depth": 2,
      "text": "Tips that apply to all of them",
      "anchor": "tips-that-apply-to-all-of-them"
    }
  ],
  "sections": [
    {
      "id": "_preamble",
      "title": "Page introduction",
      "depth": 0,
      "canonicalUrl": "https://encode.wiki/codecs/images/",
      "apiUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/_preamble.json",
      "markdownUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/_preamble.md",
      "checksum": "8e8ca77363451bd87b20112b13fd40842812e457035d44e2c033250263cd3b53",
      "bytes": 160
    },
    {
      "id": "which-format-should-i-use",
      "title": "Which format should I use?",
      "depth": 2,
      "anchor": "which-format-should-i-use",
      "canonicalUrl": "https://encode.wiki/codecs/images/#which-format-should-i-use",
      "apiUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/which-format-should-i-use.json",
      "markdownUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/which-format-should-i-use.md",
      "checksum": "6eb0168d8ffb1fb6daa02725c696d63ed352ece2742d206256a441b0c06a9d74",
      "bytes": 1856
    },
    {
      "id": "at-a-glance",
      "title": "At a glance",
      "depth": 2,
      "anchor": "at-a-glance",
      "canonicalUrl": "https://encode.wiki/codecs/images/#at-a-glance",
      "apiUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/at-a-glance.json",
      "markdownUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/at-a-glance.md",
      "checksum": "10576024140870836d884d4e8bf95bf887f1108522b515ac5181992c4e892215",
      "bytes": 1340
    },
    {
      "id": "tips-that-apply-to-all-of-them",
      "title": "Tips that apply to all of them",
      "depth": 2,
      "anchor": "tips-that-apply-to-all-of-them",
      "canonicalUrl": "https://encode.wiki/codecs/images/#tips-that-apply-to-all-of-them",
      "apiUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/tips-that-apply-to-all-of-them.json",
      "markdownUrl": "https://encode.wiki/api/v1/sections/docs/codecs/images/tips-that-apply-to-all-of-them.md",
      "checksum": "915e22a5f85bdb41071e5c2ea7abdc368b41c29a5e4e251d285698a7982ecd5c",
      "bytes": 683
    }
  ],
  "outboundReferences": [
    "/codecs/images/avif/",
    "/codecs/images/gif/",
    "/codecs/images/heic/",
    "/codecs/images/jpeg/",
    "/codecs/images/jpeg2000/",
    "/codecs/images/jxl/",
    "/codecs/images/png/",
    "/codecs/images/qoi/",
    "/codecs/images/webp/",
    "/reference/encoder-parameters/",
    "/reference/image-audio-support/",
    "/reference/metrics/butteraugli/",
    "/reference/metrics/ssimulacra2/"
  ],
  "checksum": "7edbfb58214bf78149cd3885ff801d0b43fe1469399143ea77140353ccb5ed18",
  "contentFormat": "markdown",
  "markdown": "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.\n\n## Which format should I use?\n\n| You have... | Use | Why |\n| --- | --- | --- |\n| **Photos for the web** | [AVIF](/codecs/images/avif/) or [WebP](/codecs/images/webp/), with a [JPEG](/codecs/images/jpeg/) fallback | AVIF compresses best and has wide browser support; WebP encodes faster and is supported everywhere current; JPEG opens on anything |\n| **Photos where quality matters most**, or HDR and wide gamut | [JPEG XL](/codecs/images/jxl/) | 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 |\n| **Existing JPEGs you want smaller** | [JPEG XL](/codecs/images/jxl/) lossless transcode, or `jpegtran` / MozJPEG | JPEG XL keeps the original JPEG recoverable bit for bit |\n| **Screenshots, UI, logos, line art** | [PNG](/codecs/images/png/) (optimised with oxipng), or lossless [WebP](/codecs/images/webp/) | Lossless and sharp; `pngquant` makes a lossy palette version much smaller |\n| **Transparency** | PNG, WebP, AVIF or JPEG XL | JPEG and GIF can't do soft alpha |\n| **Lossless masters and archives** | PNG or TIFF; [JPEG XL](/codecs/images/jxl/) lossless for smaller files; [JPEG 2000](/codecs/images/jpeg2000/) in institutions that already use it | Keep a lossless master and export delivery files from it |\n| **Animation** | A looping muted video, animated [WebP](/codecs/images/webp/) or AVIF; [GIF](/codecs/images/gif/) only where nothing else works | GIF is the largest and has 256 colours; see the [GIF page](/codecs/images/gif/) |\n| **Phone and Apple-camera files** | [HEIC](/codecs/images/heic/) | Common camera output, but convert before sharing: licensing and support are patchy |\n| **Fast lossless in a game or tool** | [QOI](/codecs/images/qoi/) | Trivial to implement and very fast, but larger files and no browser support |\n\n## At a glance\n\n| Format | Compression | Bit depth | Alpha | Animation | Browser support (October 2026) |\n| --- | --- | --- | --- | --- | --- |\n| [JPEG](/codecs/images/jpeg/) | Lossy | 8 | No | No | Everywhere |\n| [PNG](/codecs/images/png/) | Lossless | Up to 16 | Yes | APNG | Everywhere |\n| [GIF](/codecs/images/gif/) | Lossless, 256 colours | 8 (palette) | 1-bit | Yes | Everywhere |\n| [WebP](/codecs/images/webp/) | Lossy or lossless | 8 | Yes | Yes | All current browsers |\n| [AVIF](/codecs/images/avif/) | Lossy or lossless | 8, 10, 12 | Yes | Yes | All current browsers |\n| [JPEG XL](/codecs/images/jxl/) | Lossy or lossless | Up to 32 | Yes | Yes | Safari 17+ (stills only), Chrome 155+, Firefox 158+ |\n| [HEIC](/codecs/images/heic/) | Lossy or lossless (HEVC) | 8, 10 and up | Yes (auxiliary) | Image sequences | Safari 17+ only |\n| [JPEG 2000](/codecs/images/jpeg2000/) | Lossy or lossless | 1–38 in the standard (tools mostly handle ≤16) | Yes (JP2 channels) | MJ2 only | None (Safari dropped it in 18.0) |\n| [QOI](/codecs/images/qoi/) | Lossless | 8 | Yes | No | None |\n\nBrowser support changes quickly; the [image and audio support guide](/reference/image-audio-support/) is kept up to date, and the [guide to the option tables](/reference/encoder-parameters/) lists every command-line option for the tools on these pages.\n\n## Tips that apply to all of them\n\n- **Always encode from a lossless master.** Re-encoding a lossy file stacks errors.\n- **Compare by eye.** For automatic comparison across formats use [SSIMULACRA2](/reference/metrics/ssimulacra2/) or [Butteraugli](/reference/metrics/butteraugli/); PSNR and SSIM reward blur and mislead on perceptually tuned encoders.\n- **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.\n- **Quality numbers are per encoder.** `-q 80` in `cjpeg`, `cwebp`, `avifenc` and `cjxl` gives four different quality levels; compare outputs, not settings.\n"
}