Q: What image formats are supported?

PNG, JPEG, WebP, GIF, and SVG for encoding. For decoding, any valid Base64-encoded image data URI can be decoded back to a downloadable file.

Q: How do I use a Base64 image in CSS?

Set it as the background-image value: background-image: url('data:image/png;base64,iVBORw0...'); The same syntax works in HTML img src attributes and elements.

Question 1

What is a Base64 image data URI?

Accepted Answer

A data URI embeds the image data directly in an HTML or CSS attribute using the format data:image/png;base64,<encoded-data>. The browser decodes it without making an HTTP request — useful for small icons, inline email images, and single-file HTML pages.

Question 2

Should I use Base64 data URIs for all images?

Accepted Answer

No. Base64 encoding increases file size by ~33%, and the browser cannot cache data URIs the way it caches external image URLs. Reserve them for very small images (icons, spacers <4 KB) and inline email images. For larger images, serve them as files.

Question 3

What image formats are supported?

Accepted Answer

PNG, JPEG, WebP, GIF, and SVG for encoding. For decoding, any valid Base64-encoded image data URI can be decoded back to a downloadable file.

Question 4

How do I use a Base64 image in CSS?

Accepted Answer

Set it as the background-image value: background-image: url('data:image/png;base64,iVBORw0...'); The same syntax works in HTML img src attributes and <source> elements.

Question 5

Is my image safe to encode here?

Accepted Answer

Yes. The encoding runs entirely in your browser using the FileReader API. Your image is never uploaded to a server.

Base64 Image

Base64 image encoder / decoder

Base64 Image

Related tools

Base64 image encoder / decoder