Image to Base64

What Base64 encoding of an image is

Base64 is a way of writing binary data, such as an image file, using only ordinary text characters. Encoding a picture as Base64 lets you put it directly inside text: an HTML page, a CSS file, a JSON message, an email or a Markdown document, with no separate image file to load. In HTML it looks like a very long src attribute that begins with data:image/png;base64, followed by the encoded data. That whole string is called a data URI.

The tool encodes any image in your browser and shows the result in five ready-to-use forms: a data URI, the raw Base64 string, an HTML img tag, a CSS background-image line and a Markdown image. It also works in reverse: paste Base64 or a data URI and it shows the picture and lets you download it.

When inlining an image makes sense

Base64 images are useful in a few specific situations.

• Very small images such as icons, loaders and one-pixel placeholders, where the cost of an extra web request is bigger than the image.
• HTML emails, where linked images are often blocked but embedded ones may display (support varies between clients, so test).
• Single-file HTML pages, reports and demos that must work without extra files.
• API requests and JSON where a picture has to travel as text, for example to upload an avatar to a service that accepts Base64.
• CSS with tiny background patterns.

When not to use it

Base64 makes data about a third bigger: three bytes become four characters. A 30 KB image becomes about 40 KB of text, and that text cannot be cached separately from the page that contains it, cannot be lazy-loaded and slows the page's first render. For photographs and anything over about 10 to 20 KB, a normal image file that the browser can cache and load in parallel is better. The tool warns you when a file is over 100 KB.

Compress and resize first if you must embed: the Image Compressor and Image Resizer can shrink a picture before it is encoded, and SVG to PNG helps if your logo is a vector. For vectors, embedding the SVG code directly is often smaller than any Base64 version.

Using the output

Choose the format that matches where the text will go. The data URI is what you paste into an img src or a CSS url(). The raw Base64 is what many APIs ask for, without the data: prefix. The HTML option gives a complete img tag with alt text taken from the file name, which you should replace with a real description for accessibility. The CSS option gives a background-image declaration. The Markdown option gives an image link for documents that support data URIs.

Click the text box to select all of it, or use the copy button. Very long strings are normal: a small icon can still be several thousand characters.

Decoding Base64 to an image

The second tab reverses the process. Paste a Base64 string, with or without the data:image prefix, and the tool checks it, detects the type from the first bytes if the prefix is missing, shows a preview and lets you download the file with the right extension. If the text is not valid Base64 image data, you get a clear message instead of a broken picture. Line breaks and spaces inside the pasted text are ignored, which helps with strings copied from emails or logs.

Privacy and limits

Encoding and decoding happen in your browser; the image and the text are never sent to a server. Files are limited to 10 MB because larger images produce text that is too big to copy. Base64 is not encryption: anyone can decode it, so do not treat it as a way to hide a picture. For more on image formats and file sizes, read JPG vs PNG vs WebP.