1. Why base64 encoding?

Base64 encoded images can be embedded using img tags or CSS, speeding up load times for smaller images by preventing additional HTTP requests. This can be done to build single-file mockups / demo pages for your clients, HTML email signatures that will not trigger the nasty "show images" warning in email clients, etc.


2. Supported image formats

This tool supports the most common image formats. These are .jpeg, .png, .gif, .webp, .svg and .bmp.


3. How to convert images

At the home page page you can convert your images by dragging them into your browser window, or click the upload button.

As soon as a file is uploaded, a green result row will indicate that it's successfully encoded. If there is a red row, something went wrong and you will see an error on the right.

You are allowed to upload up to 20 files at once.


4. Use base64 as image sources

You can use the base64 encoded string as a value of the src parameter, using a data:image/... construct.

You can optain the example code by pressing the copy image button and it will be copied to your clipboard.

If your client does not support copy to clipboard without Flash and you do not have Flash installed you can click the show code button and copy the text manually from the first example that is shown in the dialog window.

Your HTML code should look like this:


<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">


See the base64 image demo at CodePen.


5. Use base64 as CSS background

You can use the base64 encoded string as a CSS background image, too. Simply feed the url() parameter with data:image/...

You can optain the example code by pressing the copy css button and it will be copied to your clipboard.

If your client does not support copy to clipboard without Flash and you do not have Flash installed you can click the show code button and copy the text manually from the second example that is shown in the dialog window.

Your CSS code should look like this:


.my-class {
    background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}


See the base64 CSS demo at CodePen.