Base64 Image Converter (Encoder & Decoder): Data URI Generator

How to tell the image format from the start of the Base64

The first characters of the Base64 are the first bytes of the file, so each format starts the same way. The length of the AVIF, GIF and JPEG start can differ a little from file to file.

Image to Base64 Converter: Image to Data URI and Base64 to Image

Drop a PNG, JPG, GIF, WebP, AVIF, SVG, BMP or ICO image and get its Base64 string and a ready data URI, with the code for an HTML image tag, a CSS background and a Markdown image. The second tab does the opposite: paste Base64, a data URI or a whole <img> tag and see the picture, then download it. Everything happens in your browser, so the image is never uploaded, and the file is not changed: the Base64 holds exactly its bytes.

What is a data URI

A data URI puts a file inside the address itself, so no separate request is needed. It looks like data:image/png;base64,iVBORw0KGgo...: the word data:, the MIME type of the file (image/png), the word base64 and, after the comma, the file as Base64 text. The part image/png must match the file. The right MIME type for JPG is image/jpeg; image/jpg is not a real type, though browsers accept it.

How to use an image as Base64 in HTML, CSS and Markdown

• HTML: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">. The converter adds width and height for you.
• CSS: background-image: url("data:image/png;base64,iVBORw0KGgo...");, also for list-style-image and content.
• Markdown: ![](data:image/png;base64,iVBORw0KGgo...). Not every Markdown renderer allows data URIs.
• Link: the same data URI works in href, for example for a download link.

SVG: Base64 or URL-encoded

SVG is text, so it does not need Base64. A data URI with the SVG written as a URL-encoded text, data:image/svg+xml,%3Csvg ..., is shorter than data:image/svg+xml;base64,PHN2Zy... and easier to read in a style sheet. For an SVG file the converter shows both.

Which format is it: the start of the Base64

The start of a Base64 string shows the file format, because it encodes the first bytes of the file. A PNG starts with iVBORw0KGgo, a JPEG with /9j/ (usually /9j/4AAQSkZJRgABAQAAAQABAAD), a GIF with R0lGODlh (GIF89a) or R0lGODdh (GIF87a), a WebP with UklGR and an SVG with PHN2Zy. The table under the converter has the full list. The Base64 R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 is the well-known transparent GIF of one pixel: use the sample button on the second tab to see it.

Base64 to image

Paste the Base64 on the second tab. It can be a bare string, a full data URI, an HTML tag or a CSS rule with url(...), with or without the line breaks and the = at the end. The tool finds the format from the bytes, not from the text in front of them, shows the picture with its size in pixels and in bytes, and downloads it with the right extension. If the text says one type but the data is another, you are told.

When to use Base64 images and when not

• Good for: small icons, a placeholder, a logo in a single HTML file, a CSS file that must not depend on other files.
• Not good for: photos and big pictures. Base64 makes the data about one third bigger, the browser cannot cache the image apart from the page, and the text slows the page down. Many email clients do not show data URIs at all.
• To make an image smaller before you encode it, use the image optimizer or the WebP converter.

Limitations

• Files up to 50 MB. Very long Base64 is shown only in part in the text boxes; the copy and download buttons give all of it.
• The image is encoded as it is, so an animated GIF or WebP stays animated. The tool does not resize or compress.
• HEIC and TIFF are not supported, and the tool does not turn one format into another.
• For text and other files use the Base64 encoder and decoder.