Display an PNG image as data within the image tag

Question

I have an image which is shown as data below:

<img class="run-connect" style="margin: 0px 2px -2px 0px; max-width: 100%;" src="data:image/gif;base64,R0lGODlh9AHmAPf/AOnxtbS0tc3eVTMzNM3NztvnhtbX1/Hy86ioqezs7Z6entzd3r7UJdHhZcnKzOjo6sXZO319fkJCQurq6xMTFPj65q2treHh4vT42uXl5/Lz9JCQkfP09F6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovN8yOv3ykYiCWNAKDewAyGQAcpgy6GRy8G8zdzczbwcxS+RXw5QKFEgCayMWhjqzEMiRYSyDf4gB5CMzaChzd5cz/YMzODsEsqwAtJQKAkgDaubrsqlzkHiBIWiDDvgCDoQA14lyZpBz/cc0RK9p/nsEhHgD1kAOpEQ0I3a">

I want to replace this image with the following PNG (http://www.verypdf.com/pdfinfoeditor/jpeg-jpeg2k-1.png ), and i want to represent the PNG as data in the <img .....tag.

How can i do it ?

Answer 1

If this is a one off task, just convert the image using an online converter to base 64.

http://webcodertools.com/imagetobase64converter/Create

This will output something like <img alt="" src="data:image/png;base64...

Answer 2

If it's just this one image, you can use a online base64 encoder, like this one: http://www.base64-image.de/

(For this specific image the HTML code is too large to put here.)

Answer 3

Use a service such as http://duri.me/ to get a data URI from your PNG image