Convert Image to CSS
Ever wanted to take an image and convert it, pixel by pixel, into CSS, HTML, or xHTML? Well, now you can, thanks to my handy conversion tool! Just give it the URL of the image to convert, select a pixel resampling ratio, a mode, and off you go. You can also save the html. Just right click on the permalink and “save target as” to your favorite location.
Note: If you give a very large image, with a very small pixel ratio, the image could take a long time to load, or eventually overload your browser with multiple megabytes of web information. These “images” are very large!
Convert your image:
Please visit this link: Image To CSS.
Examples:
The Google Logo, rendered in HTML
A random aquarium scene
There are four display modes you may invoke:
Regular Mode
Striped Mode
Alternative Pixelling Mode
Massive Poster Mode
Technical Details:
Using 1:1 pixel to CSS pixel ratios can produce extremely large output files–so large that PHP and Apache throw a 500 error because they run out of memory on my host. Hence, I’ve set a default resolution of a 100 pixel scale. Every image is resampled to 100×100 pixels and sized to fit the original image. Images smaller than 100 pixels are 1:1.
Currently we support png, jpg, gif, and bmp images. If the URL you give has an improperly specified file extension, we will assume that it is a jpg.
Source Code:
This program was written in PHP 4 with the GD graphics library for PHP. You may download the source code (pdf). This work is licensed under a Creative Commons License.
This entry was posted on Monday, April 25th, 2005 at 4:29 am and is tagged with gd graphics library, massive deforestation, google logo, bmp images, born into brothels, creative commons license, cambridge england, pixel ratio, css examples, pixel scale, default resolution, conversion tool, google, link image, target, file extension, megabytes, jpg gif, technical details, php 4. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback.
on April 21st, 2005 at 11:14 am
Very impressive!
You might want to look into using a few optimisations to keep the ‘file size’ down. Maybe you could assign the colours to a 2D array and then have javascript do the “marking up” so you don’t get those really long span html lines.
I suppose you could also look at using floating divs to implement a gif like mechanism of compression?
Congrats on a pretty unique idea that might or might-not be useful; but is cool none the less.
on April 21st, 2005 at 1:33 pm
I went ahead and tried making that 2D array javascript version and when running on the slashdot logo (images.slashdot.org/title.gif); the size of the html document my version produced was 125KB, as opposed to 360KB. With that being said the browser practically freezes while all the Javascript runs, so it’s a pretty ugly solution in practical terms.
I can post code if you’re really interested; but I don’t think you’d have too much trouble reproducing it yourself.
on April 21st, 2005 at 3:33 pm
I thought about using javascript to mark it up, or using a table with colored cells, or using divs with variable width, but those really won’t help much! GZip worked allright, but then my server died on big images because I was buffering 12mb of text into memory, and the memory limits are set quite low.
If you want to leave a link to a post with your code (if you have a blog), that would be cool, too. The more code, the merrier!
on April 21st, 2005 at 5:25 pm
V. nice
on April 21st, 2005 at 5:34 pm
Oh, hey, when you have some time, coulda update the url for my blog? The re-direct will be going down soon. Thanks =]
on April 22nd, 2005 at 1:08 am
Convert Images to CSS
I’m still not quite sure how practical it is, but I came across a really interesting blog article titled Convert Image to CSS. The concept is pretty simple, use a combination of divs and span tags that are set at absolute dimensions with specifici…
on April 25th, 2005 at 4:11 am
image to CSS
While waiting for some router problems to be fixed here at work I noticed Elliott Back’s image to CSS converter. A way cool ‘useless utility’. It converts any image to a HTML page showing the image in various user-defined ways. You can even downlo…
on May 23rd, 2005 at 6:26 pm
I’ve been working on the same kinda concept for a while now. But instead of taking an image and converting it, I’m taking Javascript code to populate my divs with spinning cubes, torusses, etc etc, ala “demo scene” (i’m going to a party in Finland in July, so hopefully this concept will be finished to demo it). I’ll make my code available when it’s finished (which might be an hour before entry!).
Cheers guys,
Juan
on May 25th, 2005 at 5:08 pm
Chris Hester did something similar last year. His version won’t let you choose the image or the resampling ratio, but he does demonstrate some interesting filtering ideas. See his original post, CSS demo, and JavaScript demo.
on August 16th, 2005 at 1:03 pm
[…] T
Unglaublich,… eine völlig beknackte Sache, aber irgendwie cool.. die Idee von Elliott Back: Ever wanted to take an image and convert it, pixel by […]
on September 24th, 2005 at 10:09 pm
As programming goes, this is cool.
But for web accessibilty, this is not A Good Thing™
on October 31st, 2005 at 9:38 am
I’d love to have a exe-file-version to download of this thing.
I don’t need a CSS-Output, but just a plain Ini-File Output
such as
Pixel_1,1=234
Pixel_1,2=221
Pixel_1,3=112
…
Pixel_2,1=214
Pixel_1,2=234
…
Pixel_n,n-1=234
Pixel_n,n=234
or alternative:
Pixel_1_X=40
Pixel_1_Y=12
Pixel_1_Col=240
Pixel_2_X=51
Pixel_2_Y=17
Pixel_2_Col=210
Another Problem which I encounter is
the high sensibility on Colours.
I understand, it is required, but if you take
photos1.blogger.com/blogger/5239/1811/1600/Clipboard01.jpg
for instance, it is not black and white at all.
That makes the parsing harder…
Thanks a lot!
Greetings!
on October 31st, 2005 at 4:18 pm
Huh. very neat but, the larger images seem to cause FireFox to suddenly quit responding during the conversion process. I’m using sixpop to host my images then I’m converting them But, It’s just not real smooth. I’ll stick to using images for now.
on October 31st, 2005 at 4:21 pm
Sorry for the broken link (above)
sixpop.com/images/
on November 24th, 2005 at 8:25 am
Wow!! Amazing.
on December 7th, 2005 at 7:04 am
Verrry kewl. Like Montoya said: it ain’t good practice for serious web development, though it is a neat toy
on March 26th, 2006 at 8:05 am
nothing works now. when are they going to be back?
on June 26th, 2006 at 10:51 pm
Really freaking awesome!
on July 7th, 2006 at 11:53 pm
accessory clothing gown shoes wedding…
accessory clothing gown shoes wedding…
on August 2nd, 2006 at 5:37 pm
Hi….
COuld anyone give me the javascript codes ? Thank you
on September 6th, 2006 at 1:22 am
ILOVE THIS
on January 2nd, 2007 at 1:01 am
[…] I’m still not quite sure how practical it is, but I came across a really interesting blog article titled Convert Image to CSS. The concept is pretty simple, use a combination of divs and span tags that are set at absolute dimensions with specificied background colours that end up rendering an image. Neat! […]
on July 29th, 2007 at 4:58 pm
Will there be a standalone.. download freeware/shareware utility.. for more practical image conversion?
on August 7th, 2007 at 10:03 am
I am trying to design my eFriends software to fit the needs of my community. However, I have no clue about HTMLs. I don’t know how to convert my logo to an HTML or any texts.
Does anyone know how to design eFriends…and can you explain it in layman’s terms?
on November 8th, 2007 at 12:16 am
Well,i would like to have this image as a css code!!!
on March 28th, 2008 at 4:13 pm
Our company is looking at moving to Windows Live Mail. But we have discovered unlike Outlook and Hotmail that it does not support images in the signature. Microsoft’s solution is to convert the image (our logo) to HTML. In doing so it looses all its quality as a logo. Ideas? Thanks.