Image To Base64 Converter
Data URI, HTML, CSS And Markdown

What An Image To Base64 Converter Does For You

A web page normally loads each picture as its own file. However, sometimes you want the picture inside the page itself. Then you need the picture as text.

An image to base64 converter does that. First, choose a picture. Then pick the format you want. The text appears at once, and you copy it with one click.

Also, it works in reverse. Paste a data URI or a plain Base64 string, and the picture appears. So you can see what a long string really holds, and download the image.

Everything runs in your browser. So your picture never leaves your device. That matters when it is a logo, a screenshot or a private photo.

What Is A Data URI

A data URI holds a file inside a web address. It starts with the word data, then the file type, then the word base64, then the encoded bytes. For example, a PNG starts with data:image/png;base64, and a long run of letters.

So the browser needs no second request. Then it reads the picture straight from the text.

For more detail, see: RFC 2397, the data URL scheme.

How Base64 Works

Base64 turns every three bytes into four letters and digits. So the text grows by about one third. For example, a 30 KB picture becomes about 40 KB of text.

Also, the tool shows the extra size, so you can judge the cost before you paste the text anywhere.

Convert An Image To Base64

First, drop a picture on the box, or click it to choose a file. Then pick a format. A data URI gives the full string. Plain Base64 gives only the encoded part.

The preview shows your picture. Then the numbers show its type, its size in pixels, its file size and its Base64 size.

Use A Data URI In HTML

Choose An HTML img tag. The tool writes the tag with the data URI, an alt text from the file name, and the width and height. Then you paste it into your page.

Use A Data URI In CSS

Choose CSS background image. The tool writes a background-image rule. So a small icon can sit inside your stylesheet. Then it loads with the CSS and needs no extra request.

Use A Data URI In Markdown

Choose A Markdown image. The tool writes the picture in Markdown form. Then some editors and note apps show the picture without any separate file.

Convert Base64 To An Image

Switch the direction to Base64 to image. Paste a data URI or a plain Base64 string. The tool checks it, reads the first bytes to find the type, and shows the picture.

Then press Download image to save it as a file. Because the tool reads the bytes, it names the file with the right ending, such as png or jpg.

Supported Image Types

The tool reads PNG, JPG, GIF, WebP, AVIF, BMP, ICO and SVG. Also, it finds the type from the file itself, not from the name. So a wrong ending does not fool it.

When To Use Base64 Images

Use them for tiny icons, email signatures and single file pages. First, they save one request for each picture. However, they also grow the text and skip the browser cache for the picture.

So keep them for small images.

When To Avoid Base64 Images

A big picture as Base64 makes a page heavy. Then the browser cannot cache it apart from the page. Also, it is harder to update later. So keep photos as normal files, and keep data URIs below about 100 KB.

Break Base64 Into Lines

Some systems, such as email, want lines of 76 characters. Then tick the line break box, and the tool wraps plain Base64 for you.

Check Private Images Safely

The picture never leaves your device. So you can convert private images, such as ids or screenshots, without a worry.

Safe By Design

First, the tool works in your browser. It sends nothing, and it stores nothing. So your picture stays yours.