Web Browser File Format Support: What Plays in Chrome, Firefox & Safari

Why Browser Format Support Matters

You embed a video on your website and it plays beautifully in Chrome -- but Safari shows a blank rectangle. You use a modern image format to cut page load time in half, only to discover that a significant portion of your visitors see broken images. You add background music in OGG format and iPhone users hear nothing.

Browser format support is one of the most frustrating aspects of web development. Each browser has its own set of supported formats, codecs, and containers, shaped by licensing agreements, open-source commitments, and technical priorities. Getting media to play reliably across all browsers requires understanding what works where and how to set up proper fallbacks.

This guide provides definitive compatibility tables for video, audio, and image formats across every major browser, along with practical strategies for ensuring your media works everywhere.

Video Format Support by Browser

Container + Codec Combinations

Browser video support depends on the combination of container format and codec. A browser might support the MP4 container but not every codec that can be placed inside it.

Key takeaway: MP4 with H.264 is the only video format with truly universal browser support. For modern browsers, AV1 in MP4 or WebM is gaining ground rapidly. Convert non-web formats with the MP4 converter.

H.265 (HEVC) -- The Complicated One

H.265 support in browsers is a patchwork. Safari supports it natively on Apple devices. Chrome and Edge support it only when the operating system provides hardware decoding (Windows 10/11 with HEVC Video Extensions, macOS with Apple Silicon). Firefox does not support it at all.

If you have H.265 content for the web, always provide an H.264 fallback. Better yet, convert to H.264 for universal compatibility or AV1 for future-proofing. The H.265 vs H.264 vs AV1 comparison explains the tradeoffs.

The Recommended Video Strategy for 2026

<video controls>
  <!-- Best: AV1 for modern browsers (smallest file) -->
  <source src="video.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"' />
  <!-- Fallback: VP9 for broad support -->
  <source src="video.vp9.webm" type="video/webm" />
  <!-- Universal fallback: H.264 for everything -->
  <source src="video.h264.mp4" type="video/mp4" />
</video>

Browsers try each source in order and play the first one they support. This gives you optimal compression where possible and guaranteed playback everywhere.

Audio Format Support by Browser

Key takeaway: MP3 and AAC have universal browser support. For the web in 2026, Opus offers the best quality-per-bit but requires Safari 17+ for full compatibility. Use the WAV to MP3 converter for converting audio to web-friendly formats.

Recommended Audio Strategy

<audio controls>
  <source src="audio.opus" type="audio/opus" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

Opus first for quality, MP3 as universal fallback.

Image Format Support by Browser

Image format support is critical for web performance. Next-gen formats can cut image file sizes by 30-50% compared to JPEG, but only if the browser supports them.

Key takeaway: WebP now has universal browser support in 2026 and should be your default web image format. AVIF offers even better compression but requires slightly newer browser versions. JPEG and PNG remain the ultimate fallbacks.

The Modern Image Strategy

Use the HTML <picture> element to serve the best format each browser supports:

<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" />
</picture>

For frameworks like Next.js, the built-in Image component handles format negotiation automatically, serving AVIF or WebP to browsers that support them and falling back to JPEG for others.

For converting images to web-ready formats, the image compressor handles format conversion and compression. For detailed optimization guidance, the optimize images for website guide covers the complete workflow.

JPEG XL: The Format That Divided the Industry

JPEG XL deserves special mention because its browser support story is uniquely turbulent. Developed as the true successor to JPEG, JPEG XL offers exceptional compression, lossless recompression of existing JPEGs (saving ~20% with zero quality loss), and HDR support.

However, Google removed JPEG XL support from Chrome in 2023, arguing that AVIF and WebP covered the same needs. This effectively blocked adoption for most of the web, since Chrome and Chromium-based browsers account for roughly 65-70% of global browser usage.

Safari added full JPEG XL support in version 17, and Firefox has experimental support behind a flag. But without Chrome, JPEG XL cannot be relied upon for web delivery. The format may still succeed in professional photography and image archival workflows where browser rendering is not the primary concern.

Checking Browser Support Programmatically

JavaScript Feature Detection

You can detect format support at runtime:

// Check video format support
const video = document.createElement("video");
const canPlayH264 = video.canPlayType('video/mp4; codecs="avc1.42E01E"');
const canPlayVP9 = video.canPlayType('video/webm; codecs="vp9"');
const canPlayAV1 = video.canPlayType('video/mp4; codecs="av01.0.05M.08"');

// Check image format support
async function supportsAvif() {
  const img = new Image();
  return new Promise((resolve) => {
    img.onload = () => resolve(img.width > 0);
    img.onerror = () => resolve(false);
    img.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlm..."; // tiny AVIF
  });
}

Server-Side Detection via Accept Header

Browsers send format hints in the Accept header:

# Chrome requesting an image
Accept: image/avif,image/webp,image/apng,image/*;q=0.8

# Safari requesting a video
Accept: video/*;q=0.9

Your server or CDN can use this to serve the optimal format automatically (content negotiation).

Practical Format Choices for Web Developers

For Video on Websites

1. Primary: MP4 with H.264 (universal support)
2. Enhanced: Add AV1 source for modern browsers (30-50% smaller)
3. Avoid: MKV, AVI, WMV, FLV (no browser support)

Convert to web-ready MP4 with the MP4 converter or WebM converter for VP9/AV1.

For Audio on Websites

1. Primary: MP3 (universal)
2. Enhanced: Opus for better quality at lower bitrate
3. Avoid: WMA, MIDI (poor or no support)

For Images on Websites

1. Primary: WebP (universal in 2026)
2. Fallback: JPEG for photos, PNG for graphics
3. Enhanced: AVIF for maximum compression
4. Vector: SVG for logos, icons, and illustrations
5. Avoid: BMP, TIFF, HEIC, PSD (poor web support)

For WordPress Specifically

WordPress has its own format considerations on top of browser support. The WordPress media upload guide covers WordPress-specific requirements.

Mobile Browser Considerations

Mobile browsers generally follow their desktop counterparts, but with some important differences:

• iOS: All browsers on iOS use WebKit (Safari's engine), meaning format support is identical across Chrome for iOS, Firefox for iOS, and Safari. If Safari does not support a format, no iOS browser does.
• Android: Chrome for Android closely matches desktop Chrome. Samsung Internet and other Chromium-based browsers inherit Chrome's format support.
• Low-end devices: Some budget Android devices lack hardware decoders for H.265 or AV1, making playback impossible or causing severe battery drain.

For mobile-optimized video, always use H.264 in MP4 as the base format. It has hardware decoding support on virtually every mobile device manufactured in the last decade. For more on mobile format considerations, the file format compatibility guide covers cross-device scenarios.

DRM and Encrypted Media

If you are serving premium or protected content, browsers support Encrypted Media Extensions (EME) with different DRM systems:

Streaming platforms typically use DASH (Dynamic Adaptive Streaming over HTTP) with Widevine for Chrome/Firefox/Edge and HLS with FairPlay for Safari.

Related Resources

• Video Codecs Explained: H.264, H.265, VP9, AV1 -- Deep dive into video codecs
• H.265 vs H.264 vs AV1 -- Detailed codec comparison
• VP9 vs AV1 Comparison -- Google's codecs compared
• Optimize Images for Website -- Image optimization best practices
• Best Video Format for Social Media 2026 -- Social platform requirements

Summary

Browser format support in 2026 is more unified than it has ever been, but gaps remain. MP4 with H.264 is still the only truly universal video format. WebP is now universally supported for images. MP3 and AAC cover audio everywhere. For cutting-edge performance, serve AV1 video and AVIF images with proper fallbacks. Always test in Safari, Firefox, and Chrome -- if it works in all three, it works everywhere. When in doubt, convert to the universal format and move on.