Click here to Skip to main content
15,798,592 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
See more: (untagged)
how to convert png image to html code

What I have tried:

trying to see the html and css code for an png image
Updated 13-Jun-23 7:09am
adriancs 13-Jun-23 11:25am    
Yupe, this is quite simple to do that in this year. Here's a simple version of: Use ChatGPT API to build your custom ChatGPT tool which can take images as input and prompt ChatGPT to build a HTML page based on the image. Sounds cool. and now, the next question you'll be asking. How to code that? using ChatGPT API? and yupe, that's a good direction.
Dave Kreskowiak 13-Jun-23 12:03pm    
Use ChatGPT
jekin77 13-Jun-23 11:55am    
you can convert it to base64 string and embed into your HTML Code
see for more
adriancs 13-Jun-23 12:05pm    
Or just wait for a few (months?) years, when ChatGPT 5 or 6 is out. Then almost everyone can build website just by asking.

PNG images aren't HTML: HTML / CSS code isn't an image.

HTML is a set of instructions to a browser to render text and objects in a particular way to display a page to a user. It's generated on the server and sent in a text format to the client browser.

PNG is an compressed image format that can be used to render a bitmap.

HTML can display images (even PNG images) via the <img> tag: HTML img tag[^] shows how to do it.

But you can't "convert png image to html code" any more than you can "convert apples to pig's ears"!
Share this answer
adriancs 13-Jun-23 12:10pm    
by rearranging the structure in molecules level, adjusting atoms here and there through 4th dimension, perhaps anything can be converted into anything :D
OriginalGriff 13-Jun-23 12:50pm    
Only if you work for Starfleet! :D
Your question only makes sense if you want to embed the images "in-line" with the HTML of your page. Though possible, this can make your HTML markup quite bloated and practically unreadable.

Like jenkin77 said, you would have to convert the image to a base64 string and paste that string into your IMG tag:
<img src="data:image/png;base64,base64String" />
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900