Embed code · Text from images · Colour grids
Image to HTML Converter
An image in your code.
Or the words inside it.
Turn a picture into a self-contained <img> tag, read its English, Hindi, Gujarati or Marathi text into editable paragraphs, or build a colour grid from HTML cells. Copy the code or download an .html file; your image stays in this browser.
Add an image
Drop, paste or choose one image.
JPG · PNG · WebP · GIF · BMP · AVIF · HEIC · 10 MB
Add an image to begin. Nothing is downloaded until you choose text reading.
Check it, then copy the code
An embedded image keeps the original file, including any camera and GPS data, and is about a third larger than the file. Some editors and security plugins remove embedded images or inline styles, so check the published page.
Pick the output
The picture, its words, or its colours.
Each choice makes a different kind of HTML from the same image.
| Choice | What you get | Good for | What it does not do |
|---|---|---|---|
| Embed the image | One <img> tag whose src holds the whole file as Base64 text. | Email signatures, single-file pages and small logos or icons. | Make the file smaller or remove its camera data. |
| Read the text | The words in the image as paragraphs, with a box to correct them. | Notices, letters, printed pages and screenshots of text. | Copy fonts, colours, tables or the original layout. |
| Colour grid | A table of coloured cells, up to 64 × 64. | Pixel-art style pictures where images are not allowed. | Keep photo detail or animation. |
Getting good results
A clear image in, clean code out.
Shrink before you embed
Embedded code grows with the file, so compress a photo first; a 200 KB image becomes about 270 KB of HTML.
Photograph text straight on
Fill the frame with the page, avoid shadows and glare, and crop away other text before reading it.
Choose the right language
Pick Hindi, Gujarati or Marathi for those scripts; English + Hindi helps with mixed forms and bills.
Write real alt text
Describe what matters, such as “Shree Ganesh Traders logo”, instead of a file name like IMG_2041.
Sizes, worked out
Know how big the code will be before you paste it.
| Image | Choice | Result |
|---|---|---|
| A 30 KB logo | Embed the image | About 40 KB of Base64 text (4 characters for every 3 bytes), plus the tag |
| A 1200 × 600 picture | Colour grid, detail 32, 10 px cells | 32 × 16 = 512 cells, shown 320 × 160 px |
| The same picture | Colour grid, detail 64, 10 px cells | 64 × 32 = 2,048 cells, shown 640 × 320 px |
| A 4 × 2 icon | Colour grid, detail 64 | Still 4 × 2 cells; a bigger cell size enlarges them |
Read the text makes code roughly the size of the words themselves, usually a few kilobytes for a page of text.
How it works
Built in your browser, escaped before it is shown.
From image to code
Where people use it
From a photo on your phone to text on your website.
| Task | Setup | What to check |
|---|---|---|
| A Gujarati or Hindi circular, notice or society letter to put on a website | Read the text · Gujarati or Hindi · Snippet | Matras and conjunct letters are where mistakes happen; read every line against the paper. |
| A logo in an email signature | Embed the image · alt text with the business name | Keep the logo under about 50 KB; some email apps do not show embedded images. |
| A product or menu image in a single-file page | Embed the image · Complete .html page | Shrink large photos first with the Image Compressor. |
| A screenshot of an English article or bill | Paste with Ctrl + V · Read the text · English | Numbers and amounts need a second look before you publish them. |
| Pixel art for a page that blocks images | Colour grid · detail 32 · 8–12 px cells | Large grids make long code; keep detail low for small icons. |
Troubleshooting
When the HTML is not what you expected.
The text has many mistakes
Reading depends on a clear, straight image.
- Check the language setting.
- Crop to the text and retake in good light.
- Correct the rest in the text box.
Text reading will not start
The engine has to be downloaded once.
- Tick Download the text-reading engine.
- Check your internet connection.
- Resize images over 8 MP.
The image is missing on my site
Some editors strip embedded images or styles.
- Paste into a Custom HTML block.
- Ask whether a security plugin blocks data: images.
- For large photos, add them to the Media Library instead.
The code is huge or slow
Embedded photos turn into long text.
- Compress or resize the image first.
- Use Download HTML for big results.
- Lower Detail for a colour grid.
Image to HTML questions
Before you paste the code
How do I convert an image to HTML code?
Add an image, choose Embed the image, Read the text or Colour grid, and press Make HTML. Check the preview, pick a snippet or a complete .html page, then press Copy HTML or Download HTML.
Can it turn a screenshot or design into a website?
No. It does not rebuild layouts, buttons or menus as code. It can embed the screenshot as an image, pull out its words as paragraphs, or turn it into a grid of coloured cells.
What is a Base64 image?
It is the image file written as text inside the src of an <img> tag, so the page needs no separate image file. The text is about a third larger than the file, and it is not compressed or hidden.
Can it read Hindi, Gujarati or Marathi text?
Yes. Choose Read the text, pick Hindi, Gujarati, Marathi, English or English + Hindi, tick Download the text-reading engine and press Make HTML. Printed text gives the fewest mistakes; always check matras, numbers and names.
Does text reading send my image to a server?
No. The engine and language data are downloaded from jsDelivr and Project Naptha the first time, and those servers only see file requests. The reading itself runs in this browser.
Which images can I use?
One JPG, PNG, WebP, GIF, BMP, AVIF or HEIC image up to 10 MB and 20 MP, checked from the file itself rather than its name. Text reading works up to 8 MP. A GIF is read from its first frame for text and colour grids.
Does the embedded image keep camera and GPS data?
Yes. Embed copies the original file unchanged, including any camera or location data and GIF animation. Remove that data first if the code will be public; HEIC photos are embedded as a JPG copy without it.
How do I put the code into WordPress?
Add a Custom HTML block and paste the snippet, then preview the page. Some roles, editors or security plugins remove embedded images or inline styles; for large photos, adding them to the Media Library works better.
Can I correct the text before copying?
Yes. Edit the text box under the preview; the HTML updates as you type, and Download text saves it as a .txt file. Characters such as < and & are escaped, so they stay text.
Are my results saved?
Only when you press Save this result: up to six results, 500 KB each, stay in this browser until you clear them. Otherwise only the Appearance choice is remembered, so copy or download your code before you leave.
Related image tools
Get the image ready or go the other way.
Ready to turn your image into HTML?
Back to your image, or browse the image tools and the full tools directory.