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.
This tool supports the most common image formats. These are .jpeg, .png, .gif, .webp, .svg and .bmp.
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.
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
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.
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
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.