Making Images with HTML Code


While looking through Youtube the other day, I stumbled upon is crazy video of making images with HTML code.

Making images with HT-WHAT?!

(Song used is video is Overdrive from the Touhou Tsuki Tourou album. Search for 02 – Iosys – 患部で止まってすぐ溶ける ~ 狂気の優曇華院.mp3)

Yes, making images with HTML code. I was pretty shocked and amazed at how the image was created. It was basically a lot of of copy and pasting of repeated codes. This is however, easier said than done.

I decided to try a hand at making an image using HTML code. Of course, it was using the easier method.Running the image through a program which automatically scripts and creates the image for you ^^;

I used an online Image to HTML table converter <Link>. There is another site, which Image to HTML table/ ASCII / Matrix code like Converter <Link>. Didn’t use that one as the output wasn’t as desirable as the former.

Here’s the original picture (Input picture).


Output picture


 1013 X 2085 (1.86MB)
<Large Picture> 3375 X 6951 (11.6MB) Original </Large Picture>
(Right-click and save as)

I believe you will notice that the output picture is slightly different from the original. This being the table cells aren’t perfect squares, which make the image slightly larger in length. It is recommended to work with a smaller image though, preferably 200 x 200 as recommended by the site. I have uploaded the original output image so you guys can have a look at it.

There is also an offline program which you can use as well to do your conversions. It is known as ‘Img2Html’ (Generic name lol) but the site <Link> and the program is in German so you have to fiddle around with the settings till you figure it out.

To download the program, click on ‘Produkte’ on the sidebar and look for ‘Img2Html’.

If you want to capture your output file, you can use a program known as ‘HyperSnap‘ (For Windows). It can capture the whole long screenshot of the website page and has many other uses as well. For OS X users, try ‘Paparazzi‘. Got to know of these 2 programs through Dannychoo’s Mac OS X Paparazzi post ^^;  

So what are you waiting for? Go forth and convert those images!

Picture Information:

Top Picture – 
Artist – The Last Bullet <Link>
Series – None 

Middle Picture –
Artist: Sentarou Dasoku <Link>
Series: None

The pictures are used without the permission from the various artists. ^^;


13 thoughts on “Making Images with HTML Code”

  1. Makes sense when you think about it. It’s just a really convoluted way of creating a bitmap. You’re regenerating the image essentially one pixel at a time. And then resizing it.

    I’m sure there could be a program to trim that extra height “per cell” so it comes to equal dimensions again.

    But then again, this is likely just something fun to do. ^^; Not an efficient way of copying a picture. But a clever way to use HTML to avoid IMG where IMG is banned?

  2. @jay: How is this not contributing to the community? XD

    @Crisu: Definitely not a efficient way of copying picture but something fun to do.

    @double: I just feed the image to the program and let it do its thing. Took just a few seconds.

Leave a Reply