Convert Image to Base64 [Use it inside img tag in HTML]

we will see, How to convert image into base 64 and use it inside img tag.
Some times we cannot store images and use its link as image link due to some limitation, in that case you can encode that image in base64 format which will generate binary data which can be used ase image source.

Sometimes you have to send or output an image within a text document (for example, HTML, CSS, JSON, XML), but you cannot do this because binary characters will damage the syntax of the text document.

Steps:
1. create image tag in html with src
2. go to base64 encoder website (refer below link)
3. upload file and click on encode
4. copy generated base64 data
5. add image src as "data:image/png;base64,binary data"
6. paste base 64 image data where binary data is written
7. thats it.............

HTML Lesson 32: Base64 Images

Link reference:

[aldrinjohnencina]

thank you so much, you save my day. keep making tutorial. you help a lot of beginner programmers

[zigaudrey]

Base64 Encoding is perfect for Userstyle if you won't to rely on outside host. It helps a lot to have a self-contained CSS. I learned something good but was late to implant it.

[prakashchaure]

<img id="Img712" src="data:image/gif;base64, /9j problem solutione