How to use Base64 on the web
Base64 encoding allows you to write an image or another file directly to a web page. This is useful for automatically generated images and files. Or, if you need to transfer the entire HTML document as a single file, such as the body of an e-mail formatted as HTML.
Generally speaking, at any point in HTML you can write the following instead of any URL address:
data:image/png;base64,xxxxxxx
You may want to enter the image directly in the <img> tag or use the CSS styles and write it there. You can do this as follows:
<img src="data:image/jpeg;base64,xxxxxxx" alt="" />
div {background: url(data:image/png;base64,xxxxxxx);}
You can encode not only pictures, but any other file, and offer it to download. Just be careful to set the MIME correctly. You can use as MIME for example image/png, image/jpeg, application/pdf, application/zip, text/plain and many others. For example:
<a download href="data:text/plain;base64,xxxxxxx">Click</a>
You can also enter a file name to the download attribute.