Best Base64 online file encoder Convert any file (images, favicons, webfonts, sounds…) into a Base64 encoded string so you can then embed it into your code and avoid an extra request.

Here’s simple yet powerful free online tool to convert images and any type of file into a Base64 encoded string. The tool works by either providing a URL to a file or by uploading your file directly.

I created this online tool because the ones found online only allow you to upload a file or they are tedious to use. This tool is fast, in two clicks you can get your base64 string. Also, while you might want to look into Gulp.js or optimize your code for a production environment, this is a great workaround for MVCs and prototypes.

Why should you base64 encode?

Base64 encoding converts any kind of file into a one-line string, which you can then embed into your HTML, CSS or JavaScript files which means you save on server requests. Keeping your website with as fewer requests as possible is one of the best ways of loading websites faster.

When not to base64 encode?

If your file is bigger than 20KB or appears in several pages of your site then it is best to load it as a separate file and let the user’s browser cache it.

Although there’s an exception… I have a website with a 96% bounce rate (that’s fine, it’s just a reference website so I don’t expect to keep users in the website). Since users only visit this page once, I decided to put all CSS and JavaScript inline and base64 the sprite images and the Favicon into the HTML. This way, while the HTML page gets 70KB heavier, it doesn’t need any further server requests hence loading faster. It takes 0.2 seconds just to get the first-byte response yet 0.05 seconds to download an extra 70KB (which by the way is Gzipped so it gets down to half).

Extra features

Apart from providing you the code to embed into your project, I’ve also made available copy-paste codes already with the base64 string in it so if you want to embed your code as a favicon, an image, JavaScript file, CSS sprite map or CSS image you are just a few keystrokes away. Here’s how the tool looks when you submit a file or URL:

Base64 encoder website

Ok, enough talking, here’s the link to the tool:

Online Base64 encoder

I’ve also got a REST API for it in case you use the tool a lot, let me know and I can give you access to it.