{ "schemaVersion": 1, "contentVersion": "ca42e61ede0a24f789d7287a0001244ad22f4abf", "id": "docs/reference/image-audio-support", "collection": "docs", "title": "Image and audio decoder support", "description": "Which browsers natively play each image and audio format, where codec and container limits apply, and how to probe support in code.", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/", "apiUrl": "https://encode.wiki/api/v1/documents/docs/reference/image-audio-support.json", "markdownUrl": "https://encode.wiki/api/v1/markdown/docs/reference/image-audio-support.md", "status": "current", "tags": [ "compatibility", "images", "audio", "browsers" ], "license": "CC BY-SA 4.0", "dates": { "lastVerified": "2026-10-08T00:00:00.000Z" }, "authors": [], "sources": [ { "title": "MDN browser compatibility data for JPEG XL", "url": "https://github.com/mdn/browser-compat-data/blob/1e2a365bccd5036308e49e1c70167d84e6d8f2b3/mediatypes/image/jxl.json", "accessedAt": "2026-10-08T00:00:00.000Z" }, { "title": "Chrome 155 beta JPEG XL decoding announcement", "url": "https://developer.chrome.com/blog/chrome-155-beta", "accessedAt": "2026-10-08T00:00:00.000Z" }, { "title": "Chrome 155 release notes and stable-release schedule", "url": "https://chromestatus.com/release-notes/155", "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" }, { "title": "WebKit Safari 17 JPEG XL and HEIC support", "url": "https://webkit.org/blog/14445/webkit-features-in-safari-17-0/", "accessedAt": "2026-10-08T00:00:00.000Z" }, { "title": "WebKit Safari 18.0 removal of JPEG 2000", "url": "https://webkit.org/blog/15865/webkit-features-in-safari-18-0/", "accessedAt": "2026-10-08T00:00:00.000Z" }, { "title": "WebKit Safari 18.4 Ogg Opus and Vorbis support", "url": "https://webkit.org/blog/16574/webkit-features-in-safari-18-4/", "accessedAt": "2026-10-08T00:00:00.000Z" }, { "title": "MDN media format compatibility guide", "url": "https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types", "accessedAt": "2026-10-04T00:00:00.000Z" }, { "title": "MDN WebCodecs codec selection", "url": "https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API/Codec_selection", "accessedAt": "2026-10-04T00:00:00.000Z" }, { "title": "HTMLMediaElement canPlayType contract", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType", "accessedAt": "2026-10-04T00:00:00.000Z" }, { "title": "Media Capabilities decodingInfo contract", "url": "https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities/decodingInfo", "accessedAt": "2026-10-04T00:00:00.000Z" } ], "headings": [ { "depth": 2, "text": "Image delivery matrix", "anchor": "image-delivery-matrix" }, { "depth": 3, "text": "JPEG XL", "anchor": "jpeg-xl" }, { "depth": 3, "text": "Probe an actual image fixture", "anchor": "probe-an-actual-image-fixture" }, { "depth": 2, "text": "Audio delivery matrix", "anchor": "audio-delivery-matrix" }, { "depth": 3, "text": "Check the MIME type and carriage", "anchor": "check-the-mime-type-and-carriage" }, { "depth": 3, "text": "Check browser coding APIs independently", "anchor": "check-browser-coding-apis-independently" } ], "sections": [ { "id": "_preamble", "title": "Page introduction", "depth": 0, "canonicalUrl": "https://encode.wiki/reference/image-audio-support/", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/_preamble.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/_preamble.md", "checksum": "4bdbdfbfb4c2777d2762de515de089d6403356a51aee6ad2b904adebe17bd7c1", "bytes": 206 }, { "id": "image-delivery-matrix", "title": "Image delivery matrix", "depth": 2, "anchor": "image-delivery-matrix", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/#image-delivery-matrix", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/image-delivery-matrix.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/image-delivery-matrix.md", "checksum": "f89a012018be0cb1d6984900e47833df3dc7ffb9d8f6e1d4fdd5baa32ae875b1", "bytes": 4779 }, { "id": "jpeg-xl", "title": "JPEG XL", "depth": 3, "anchor": "jpeg-xl", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/#jpeg-xl", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/jpeg-xl.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/jpeg-xl.md", "checksum": "f2ad0a30165cb3d189c3dcadeef17ad1521bd8e979d2a53020cbb3bc584b5803", "bytes": 1037 }, { "id": "probe-an-actual-image-fixture", "title": "Probe an actual image fixture", "depth": 3, "anchor": "probe-an-actual-image-fixture", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/#probe-an-actual-image-fixture", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/probe-an-actual-image-fixture.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/probe-an-actual-image-fixture.md", "checksum": "5bc33acaa9fb59a0b9ac41b0203d418354fe713af956422dd57ab1cc3cf48050", "bytes": 683 }, { "id": "audio-delivery-matrix", "title": "Audio delivery matrix", "depth": 2, "anchor": "audio-delivery-matrix", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/#audio-delivery-matrix", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/audio-delivery-matrix.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/audio-delivery-matrix.md", "checksum": "e96e975a70495a6c568bb878bfae743bfbe2bf601c6ba3ab1f150f15f6e0ef70", "bytes": 5519 }, { "id": "check-the-mime-type-and-carriage", "title": "Check the MIME type and carriage", "depth": 3, "anchor": "check-the-mime-type-and-carriage", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/#check-the-mime-type-and-carriage", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/check-the-mime-type-and-carriage.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/check-the-mime-type-and-carriage.md", "checksum": "3939f6859e2619a23f10df1a0c7310a7887681e6aa06c02a55e257a78f975b4c", "bytes": 1391 }, { "id": "check-browser-coding-apis-independently", "title": "Check browser coding APIs independently", "depth": 3, "anchor": "check-browser-coding-apis-independently", "canonicalUrl": "https://encode.wiki/reference/image-audio-support/#check-browser-coding-apis-independently", "apiUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/check-browser-coding-apis-independently.json", "markdownUrl": "https://encode.wiki/api/v1/sections/docs/reference/image-audio-support/check-browser-coding-apis-independently.md", "checksum": "d99c3696ef91d171372cbdeca35d50dd0d2ae032afad6f40fbb73e02c4f4fb99", "bytes": 1170 } ], "outboundReferences": [ "/codecs/audio/aac/", "/codecs/audio/alac/", "/codecs/audio/dolby/", "/codecs/audio/flac/", "/codecs/audio/mp3/", "/codecs/audio/opus/", "/codecs/audio/speex/", "/codecs/audio/vorbis/", "/codecs/audio/wavpack/", "/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/", "https://chromestatus.com/release-notes/155", "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType", "https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities/decodingInfo", "https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API/Codec_selection", "https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types", "https://webkit.org/blog/14445/webkit-features-in-safari-17-0/", "https://webkit.org/blog/15865/webkit-features-in-safari-18-0/", "https://webkit.org/blog/16574/webkit-features-in-safari-18-4/", "https://www.firefox.com/en-US/firefox/158.0beta/releasenotes/" ], "checksum": "71ece7bf53326bbea286b36f095fe35c476be868e7e366697c64d86899ff98c8", "contentFormat": "markdown", "markdown": "Browser support for a format depends on more than the codec: container, profile, bit depth,\noperating system and decoder build all matter. Use the matrices below to plan delivery, then test\nyour own files.\n\n## Image delivery matrix\n\n| Image format | Native web delivery status | Features needing independent tests |\n| ------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |\n| [JPEG](/codecs/images/jpeg/) | Ordinary 8-bit baseline and progressive JPEG is broadly deployed. | Predictive lossless, higher precision, CMYK, color metadata and gain-map rendering. |\n| [PNG / APNG](/codecs/images/png/) | Mature still and alpha support; APNG in current major browsers. | All animation frames, 16-bit handling, color management and third-edition HDR chunks. |\n| [GIF](/codecs/images/gif/) | Mature still and animation support. | Palette appearance, short-delay clamping, disposal and loop behavior. |\n| [WebP](/codecs/images/webp/) | Mature still, lossless, alpha and animation support in current major browsers. | Older embedded clients, hidden RGB samples, ICC/Exif/XMP preservation and animation compositing. |\n| [AVIF](/codecs/images/avif/) | Supported by current major browser families. Still and sequence milestones differ. | AV1 profile, precision and chroma; HDR, gain maps, grids, layered images and progressive painting. |\n| [JPEG XL](/codecs/images/jxl/) | Safari 17+ (stills only), Chrome 155+, Firefox 158+ (stable due 2026-10-13). | Stable rollout, Safari animation limitation, progressive download behavior, high depth and HDR. |\n| [HEIC](/codecs/images/heic/) | Safari 17+ on supported Apple platform paths; narrower general web compatibility. | HEVC profile, auxiliary alpha and depth, collections, sequence timing and color. |\n| [JPEG 2000](/codecs/images/jpeg2000/) | No current browser. Safari, the only browser that ever supported it, removed it in Safari 18.0. | JP2 versus JPX, HTJ2K and MJ2; component precision and signedness; alpha and color. |\n| [QOI](/codecs/images/qoi/) | Plan an application decoder or a web-format derivative. Do not assume native HTML display. | Plugin or Wasm presence, straight-alpha handling and sample preservation. |\n\nSources: [MDN image types](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types),\n[WebKit Safari 17 features](https://webkit.org/blog/14445/webkit-features-in-safari-17-0/) and\n[Safari 18.0 features](https://webkit.org/blog/15865/webkit-features-in-safari-18-0/). Native image\nsupport in an OS does not mean every browser on that OS supports the format.\n\n### JPEG XL\n\nChrome 155 ([stable from 6 October 2026](https://chromestatus.com/release-notes/155)) decodes JPEG XL\nby default using the Rust decoder `jxl-rs`. Firefox adds it in 158 ([beta notes](https://www.firefox.com/en-US/firefox/158.0beta/releasenotes/);\nstable due 13 October 2026), also via `jxl-rs`. Safari has supported still JPEG XL images since\nSafari 17 but not animation. Chromium derivatives and WebViews follow their own release schedules,\nso keep a JPEG or AVIF fallback (``) while older browsers are still in use.\n\nList the formats in order of preference and end with a JPEG:\n\n```html\n\n \n \n \n \"Describe\n\n```\n\nThe browser picks a source by MIME type alone. It does not check HDR, alpha precision or animation for\nthat particular file, so check each selected variant's color and loading behavior.\n\n### Probe an actual image fixture\n\nImages have no `canPlayType()` equivalent, so decode a small, representative fixture:\n\n```js\nasync function canDecodeImage(url) {\n const image = new Image();\n image.src = url;\n try {\n await image.decode();\n return image.naturalWidth > 0 && image.naturalHeight > 0;\n } catch {\n return false;\n }\n}\n\nconst stillJxlWorks = await canDecodeImage('/fixtures/still.jxl');\n```\n\nA successful decode shows that one fixture decodes. It does not show that every animation frame,\nprogressive pass or HDR value is correct. A failure can also come from CORS, a missing file or a network\nerror. Canvas pixel inspection requires an origin-clean image.\n\n## Audio delivery matrix\n\n| Codec and carriage | Practical native browser path | Limits to validate |\n| ------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |\n| [AAC-LC](/codecs/audio/aac/) in MP4/M4A | Broad consumer browser and device delivery. | Chromium distribution and OS codec dependencies, multichannel layouts, priming and profile signaling. |\n| HE-AAC / xHE-AAC / AAC-LD/ELD | Profile-specific platform and decoder paths. | AAC-LC support says nothing about these profiles. Codec configuration and effective sample rate matter. |\n| [MP3](/codecs/audio/mp3/) as `audio/mpeg` | Broad current-browser playback. | Rate generation, free-format restrictions, VBR seeking, delay and padding, and tags. |\n| [Opus](/codecs/audio/opus/) in Ogg/WebM | Broad modern paths. Safari Ogg depends on newer OS support. | Exact carriage, pre-skip and end trimming, mapping family, multichannel and older Safari. |\n| [Vorbis](/codecs/audio/vorbis/) in Ogg/WebM | Broad modern Chromium and Firefox; newer Safari Ogg paths. | OS version, chaining and seeking, and channel mapping. |\n| [FLAC](/codecs/audio/flac/) in native FLAC | Broad modern native decode. | Native versus Ogg/MP4 carriage, bit depth, subset limits, high rates and channel placement. |\n| [ALAC](/codecs/audio/alac/) in MP4/M4A | Apple and Safari native support. | Writer precision, channel order and non-Apple targets. |\n| [Speex](/codecs/audio/speex/) in Ogg/RTP | Legacy endpoint or application-decoder path. | Do not assume browser-native playback. Rate, mode and packetization matter. |\n| [WavPack](/codecs/audio/wavpack/) | Specialist player, or an application or Wasm decoder. | Float, DSD, hybrid correction and wrapper restoration are separate from native HTML support. |\n| [Dolby](/codecs/audio/dolby/) delivery | Codec, profile, OS and device dependent. | AC-3, E-AC-3, TrueHD and AC-4 differ. Atmos metadata, rendering and pass-through are separate. |\n\n[WebKit 18.4 added Ogg Opus and Vorbis](https://webkit.org/blog/16574/webkit-features-in-safari-18-4/)\non macOS Sequoia 15.4, iOS and iPadOS 18.4, and visionOS 2.4. An older supported macOS is therefore a\ndifferent compatibility target. Older codec tables that say \"CAF-only Opus\" or \"no Safari Vorbis\" are\nout of date for these builds.\n\n### Check the MIME type and carriage\n\n```js\nconst audio = document.createElement('audio');\nconst probes = {\n aacLcMp4: 'audio/mp4; codecs=\"mp4a.40.2\"',\n opusOgg: 'audio/ogg; codecs=\"opus\"',\n opusWebm: 'audio/webm; codecs=\"opus\"',\n vorbisOgg: 'audio/ogg; codecs=\"vorbis\"',\n nativeFlac: 'audio/flac',\n mp3: 'audio/mpeg',\n eac3Mp4: 'audio/mp4; codecs=\"ec-3\"',\n};\nfor (const [name, type] of Object.entries(probes)) {\n console.log(name, audio.canPlayType(type));\n}\n```\n\n[`canPlayType()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType) returns\n`\"\"`, `\"maybe\"` or `\"probably\"`. Neither positive result guarantees a particular profile, file, layout,\nDRM path or audible output. Play a representative file, and test seeking and end-of-stream trimming.\nPlayback policy may also require user activation. `` alternatives can cover unsupported types,\nbut a file that fails after selection needs fallback handling in your application.\n\nFor performance-sensitive playback, [`MediaCapabilities.decodingInfo()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities/decodingInfo)\nreturns supported, smooth and power-efficient estimates for a configuration. These estimates do not\nidentify every internal decoder or confirm hardware acceleration. WebRTC negotiation, MSE, encrypted\nmedia and ordinary file playback each have their own constraints.\n\n### Check browser coding APIs independently\n\n```js\nasync function supportsOpusApi(apiName) {\n const api = globalThis[apiName];\n if (!api?.isConfigSupported) return false;\n try {\n const result = await api.isConfigSupported({\n codec: 'opus',\n sampleRate: 48000,\n numberOfChannels: 2,\n });\n return result.supported;\n } catch {\n return false;\n }\n}\n\nconsole.log('WebCodecs decode', await supportsOpusApi('AudioDecoder'));\nconsole.log('WebCodecs encode', await supportsOpusApi('AudioEncoder'));\n```\n\n[WebCodecs codec support](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API/Codec_selection)\nvaries by API and platform. WebCodecs works on encoded chunks. It does not demux an Ogg or MP4 file, and\nit does not mux encoder output. AAC decoding can require the file's codec description. MediaRecorder has\nits own `isTypeSupported()` query. Receiving Opus over WebRTC does not mean an application can use these\nother APIs.\n\nTest on the target OS and browser builds with representative still, animated, HDR, stereo and surround,\nseeking and fallback files. For immersive audio, test the renderer and output route as well as the codec.\n" }