Image to Base64 & Font to Base64 converter

Our free online tool is here to help you change your image or font into Base64 code.

1. Drag an image/font here or Select file!

Supported input file formats: webp, jpeg, jpg, png, ttf, woff, eot, svg

Base64 Text

How to use our online Base64 converter

~ Step 1 ~

Got an image in jpg, png, or bmp format? Upload it using our handy form.

~ Step 2 ~

Now, upload your font file (ttf, otf) into our Base64 converter.

~ Step 3 ~

Let our tool do the magic! It'll create the Base64 code which you can then copy.
image to base64 font to base64 converter

What is Base64?

Base64 is a useful coding language that lets you change any characters into an alphabet made of latin letters, digits, plus signs, and slashes. Other internet users can then take your assortment of characters and turn it back into the original image.

You can turn Chinese characters, emojis, and even pictures into a kind of "readable" string that you can save or send anywhere.


Convert any font to Base64

As a clever trick, you can also use Base64 to convert and transfer font files. This protects all the shapes and symbols in your font from getting lost or damaged, which can sometimes happen when you’re transferring fonts in other file formats.


Where Can You Use Base64?

You'll find Base64 all over the internet! It's really useful because it lets you put image files or other binary bits and pieces into text-based stuff like HTML and CSS files. You can even use Base64 when sending email attachments.

What else do I need to know about Base64 encoding?

When you turn something into Base64, the new string is always bigger than the original (so if you’re looking to make files smaller, Base64 might not be the solution you’re looking for).

Also, Base64 doesn't hide or encrypt any information. This means anyone can decode your Base64 string (if you decide to send it to them), as long as they use the standard set of characters.

Advantages of our Base64 converter

Trusty Tool

Use the Base64 code from our app on websites, or send it to someone else to be decoded.

No Need to Sign Up

We designed our website to be a community resource, which is why you can generate Base64 code without having to register.

Secure Generation

We don’t collect any of your personal data, ever. Once you leave the website, all of your information leaves with you.

No Limits

Feel free to encode as many images and fonts as you want.

How to display Base64 images in HTML

You can put images encoded with Base64 right into your HTML using the <img> tag. This can speed up the page load time for smaller images, because the browser doesn't have to make extra HTTP requests.

Here's a quick example:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Some Tips When Using Fonts

Unlike images, fonts are set on the CSS @font-face rule. You might have spotted in our How to Appropriate Custom Fonts from other Websites tutorial that you can use Base64 in @font-face’s src property.

Here's how it works:
@font-face { font-family: Bazar; src: url(data:font/ttf;base64,AAEAAAATAQAABAAwR1BPU+Df... }

While using embedded fonts does cut down on the number of HTTP requests, there are a few things to keep in mind:

If you include fonts in your main HTML document, especially if it's created on-the-fly, they might not be cached. The Base64 encoded data is treated as part of the resource it's embedded in, like the HTML or CSS file. So, if the main page cannot be cached, then the fonts won't either. That's why it's best to put embedded fonts in an external CSS file.

Secondly, Base64 encoding normally makes image sizes bigger by about a third, although that can vary.

Finally, be aware that Base64 data can take longer to process than standard, binary data; which isn’t always ideal on mobile devices, and other environments where your cpu memory might be limited.

Share our BASE64 converter

We appreciate it very much