Image Base64 Encoder

1. WHY BASE64 Encoder?

Base64 encoded images can be embedded using img tags or CSS, speeding up load times for smaller images by preventing additional HTTP requests.

2. SUPPORTED IMAGE FORMATS

This tool supports the most common image formats. These are .jpg, .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.

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 obtain the example code by pressing the 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 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="toolinone.com">

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 obtain the example code by pressing the 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  button and copy the text manually from the second example that is shown in the dialog window.

Your CSS code should look like this:

 background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');