Image to Base64 Converter, Data URL and CSS Snippets

About the Image to Base64 converter

The Image to Base64 converter turns a picture into text that you can paste into HTML, CSS, JSON or an email template. Choose an image, and the page gives you four things at once: the Base64 string, a ready-to-use data URL, an HTML <img> tag and a CSS url(), each with its own Copy button. It also shows the file size, the size of the text and how much bigger the text is. Everything happens in your browser. Your image never leaves your device, nothing is uploaded, and there is no account.

The same page works the other way round. Switch the direction to Base64 to image, paste a Base64 string, a data URL, an <img> tag or a url(data:...) rule, and you get the picture back with its real type, its size in pixels and a download button. The page at Base64 to Image opens on that direction.

How to use it

What the four outputs are

• Base64 string: only the encoded bytes, with no prefix. Use it for an API field or a config value that expects plain Base64.
• Data URL: the string with the prefix data:image/png;base64, so that a browser reads it as a picture. It works in an <img src>, a CSS url(), a link or the address bar.
• HTML <img> tag: <img src="data:..." alt="">. Add a meaningful alt text before you publish it.
• CSS url(): url("data:..."), ready for background-image, list-style-image or content.

The type in the prefix is read from the first bytes of the file, not from its name. A JPEG saved as photo.png therefore gets data:image/jpeg;base64,, which is what a browser expects.

The maths of the size

Base64 writes every group of three bytes, which is 24 bits, as four characters of six bits each. For an image of $n$ bytes the text is

$L = 4 \left\lceil \frac{n}{3} \right\rceil$

characters long, padding with = when $n$ is not a multiple of 3. The overhead is the extra size compared with the file:

$\text{overhead} = \frac{L}{n} - 1$

For a size that divides by 3 this is exactly $\tfrac{4}{3} - 1 = 33.3\ \%$. Other sizes cost a little more because of the padding.

Worked example

Take an icon of 300 bytes. It divides by 3 into 100 groups, so the text is $4 \times 100 = 400$ characters, and the overhead is $400 / 300 - 1 = 33.3\ \%$. Now take an image of 1,000 bytes. It needs $\lceil 1000 / 3 \rceil = 334$ groups, so the text is $4 \times 334 = 1336$ characters and the overhead is $1336 / 1000 - 1 = 33.6\ \%$. The page shows these numbers for your own file, so you can decide whether embedding is worth it.

When embedding makes sense

A data URL saves a request and keeps the picture inside the page, which helps for small icons, a tiny logo in an email, a placeholder while the real image loads or a single-file HTML document. For larger pictures a normal file is usually better: the browser can cache a file on its own, but it cannot cache a data URL apart from the page or stylesheet that holds it, and the text is a third bigger than the file. If a picture is too big, shrink it first with the Image Resizer or save it in a lighter format with the Image Converter.

Limits worth knowing

Each image can be up to 10 MB, and the page says so clearly when a file is larger, instead of encoding half of it. SVG is not supported in this version, because an SVG is text and is usually better embedded as it is. A very long output is cut on screen after the first 20,000 characters so the page stays fast, and the page tells you how many there are in total. Copy always copies the complete value.

Privacy

The file is read and encoded by your browser, on your device. The Base64 text is built there too and is never sent anywhere, so it is safe to use with private pictures, screenshots and internal logos. Nothing is stored once you close the tab.

Related tools

To encode text or any other file, use the Base64 encoder and decoder. To change the format of a picture first, use the Image Converter. To shrink it, use the Image Resizer.

Frequently asked questions