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, Text-Image.com 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)
.png){kind=link}
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. ^^;
Loading ...
Monday, June 25th, 2007 @ 11:48 pm 
Artwork, Japan
RSS 2.0
Trackback
June 26th, 2007 at 2:20 am
Amazing. ;o
June 26th, 2007 at 2:28 am
ppl have wayyyyy too much time to waste. preserve mankind! contribute to society!!!!!!
June 26th, 2007 at 5:48 am
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?
June 26th, 2007 at 10:08 am
its a clever method…but unbearably tedious
June 26th, 2007 at 10:41 am
[...] on how you can be a slacker and not code like crazy to do something like that, you can check it out here, by [...]
June 27th, 2007 at 12:18 am
So,how long did it take to do that picture?
It seems to be quite a tedious process.
June 27th, 2007 at 9:57 am
@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.
June 27th, 2007 at 12:26 pm
Cool video but I rather draw… Winbell where do you get your images from which image board do you go to?
June 27th, 2007 at 1:08 pm
Lol,good thing there’s the program. I wonder how long it would take to code everything manually.
June 28th, 2007 at 2:08 am
wow this is simply amazing stuffs.
June 29th, 2007 at 12:58 pm
Both girls in this post are cute - names please!
June 29th, 2007 at 1:05 pm
@Akiraman: Will get to doing that post in a while ^^;
@double: At least a week I guess.
@Danny Choo: Couldn’t find the names of the girls on their website ^^; Guess they don’t like naming their girls. There’s the megane (spectacles) version of the girl on top.
http://homepage3.nifty.com/lastbullet/cg/2007_005b.jpg
July 30th, 2007 at 9:59 am
[...] You have seen the making of images using HTML codes. [...]