What image formats are reliably supported in data URLs?

What are all the standard image/x Data URLs supported in HTML? Out of the things I’ve tried I’ve gotten success with:

• image/png
• image/jpeg

Are there any more? I am specifically looking for ones supported by the HTMLCanvasElement‘s toDataURL method in most browsers (ones supported by most of the following browsers would be ideal: Chrome, Edge, Firefox, Safari).

Answer

The only image format that toDataURL must support according to the HTML Living standard is image/png. If an unsupported file format is requested a data:image/png URL can be returned by default.

MDN’s HTMLCanvasElement.toDataURL() documentation includes

• image/jpeg and
• image/webp

in the syntax description for the encoderOptions parameter. It also includes the information that webp is supported in Chrome without mention of other browsers.

As I understand it you can rely on image/png support and generally assume that image/jpeg support exists in current browsers. While it is certainly possible to create a data URL from a string containing SVG source code, serializing canvas bitmaps to image/svg+xml data URLs would require canvas objects to remember how how the image data it holds was drawn (which they do not).

In answer to the question, data/png support is required, data/jpeg support is ubiquitous and data/webp support is probably best regarded as patchy.