Elliott C. Back: Internet & Technology

Convert Image to CSS

Posted in Code, Graphics, Plugins by Elliott Back on April 25th, 2005.

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
The Google Logo, rendered in HTML

Some Cute Fish
A random aquarium scene

There are four display modes you may invoke:

Regular Mode
Regular Mode
Striped Mode
Striped Mode


Alternative Pixelling Mode
Alternative Pixelling Mode
Massive Sparse Poster
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 . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback.

36 Responses to “Convert Image to CSS”

  1. frfrf says:

    how stupid is to place the code in PDF????

  2. [...] it turns out, that’s already been done. However, I was pretty sure it could be done better – despite limiting the maximum output [...]

  3. DP says:

    This is great. One of the applications can be using this in emailers so the image (css) always shows and user doesn’t have to click on “display/view images” in the email.

    Also I’m sure it can be optimized further to reduce size of file. :)
    One way could be to use table instead of span. This would reduce the html code itself. Also use single letter classes e.g. instead of “box” use “b”.

  4. Guillem says:

    Not working under FF3 and IE8, crash both browsers.
    Any solutions?

  5. [...] interested in trying this out, but not too interested in the time commitment, check out this website for an Image-to-CSS [...]

  6. I can tell that this is not the first time you mention this topic. Why have you decided to touch it again?

  7. Hans Lee says:

    This is a project I’m currently working using HTML tag + CSS. For 16×16 pixel GIF Google logo <>, I reduced the size to less 3 kb.

  8. Ashishi says:

    I'm not going to use a browser like Chrome that doesn't ask me in what folder I want to install it, plus it has privacy issues. And 2GB RAM should be enough to convert a 16×16 pixel GIF image to CSS.

  9. elliottback says:

    Chrome + RAM is your friend!

  10. Ashishi says:

    Doesn't work for me, crashes FF3 when I click on submit.

  11. ed says:

    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.

  12. Well,i would like to have this image as a css code!!!

  13. Katirna says:

    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?

  14. Rick says:

    Will there be a standalone.. download freeware/shareware utility.. for more practical image conversion?

  15. [...] I&#8217;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! [...]

  16. harisankar says:

    ILOVE THIS

  17. Wilson says:

    Hi….

    COuld anyone give me the javascript codes ? Thank you

  18. accessory clothing gown shoes wedding…

    accessory clothing gown shoes wedding…

  19. Really freaking awesome!

  20. dodo says:

    nothing works now. when are they going to be back?

  21. Nevel says:

    Verrry kewl. Like Montoya said: it ain’t good practice for serious web development, though it is a neat toy :)

  22. Brandon says:

    Sorry for the broken link (above)
    http://sixpop.com/images/

  23. Brandon says:

    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.

  24. Christoph says:

    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
    http://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!

  25. C Montoya says:

    As programming goes, this is cool.

    But for web accessibilty, this is not A Good Thing™

  26. [...] 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 [...]

  27. Sumul says:

    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.

  28. Opyate says:

    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

  29. 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…

  30. 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…

  31. Zeke says:

    Oh, hey, when you have some time, coulda update the url for my blog? The re-direct will be going down soon. Thanks =]

  32. 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!

  33. andrew says:

    I went ahead and tried making that 2D array javascript version and when running on the slashdot logo (http://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.

  34. andrew says:

    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.

Leave a Reply

Powered by WP Hashcash