Browser Image Format Support Detection

Detecting Image Format Support in Browsers

Not every browser supports every image format. Detecting support lets you serve the optimal format to each user and provide appropriate fallbacks.

Canvas-Based Detection (JavaScript)

The most reliable method uses the Canvas API's toDataURL() method:

function supportsFormat(mimeType) {
  const canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  const dataUrl = canvas.toDataURL(mimeType);
  return dataUrl.startsWith(`data:${mimeType}`);
}

// Check all formats
const support = {
  jpeg: supportsFormat('image/jpeg'),   // Always true
  png: supportsFormat('image/png'),     // Always true
  webp: supportsFormat('image/webp'),   // Chrome, Firefox, Safari 14+
  avif: supportsFormat('image/avif'),   // Chrome 85+, Firefox 93+
  bmp: supportsFormat('image/bmp'),     // Most browsers
};

This technique is exactly what the Image Format Converter uses to show the support badges at the top of the tool.

HTML-Based Detection

The <picture> element provides built-in format negotiation without JavaScript:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

The browser automatically skips <source> elements with unsupported types.

Image Decode Detection

For checking if a browser can decode (display) a format:

async function canDecode(mimeType) {
  const blob = new Blob([new Uint8Array(1)], { type: mimeType });
  try {
    await createImageBitmap(blob);
    return true;
  } catch {
    return false;
  }
}

Note: Decode support and encode support are different. A browser might display AVIF images but not be able to convert to AVIF via Canvas.

Current Browser Support Matrix (2025)

Format	Chrome	Firefox	Safari	Edge
JPEG	All	All	All	All
PNG	All	All	All	All
WebP decode	17+	65+	14+	18+
WebP encode	17+	65+	14.1+	18+
AVIF decode	85+	93+	16.4+	121+
AVIF encode	85+	113+	Limited	121+

Best Practice

Always provide fallbacks. The format negotiation pyramid should be:

1. AVIF (best compression)
2. WebP (wide support, good compression)
3. JPEG/PNG (universal fallback)