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

Some Cute Fish
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.

Viewing 21 Comments

andrew 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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.

reply edit reblog flag

andrew 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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.

reply edit reblog flag

Elliott Bäck 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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!

reply edit reblog flag

http://elliottback.com

Zeke 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

V. nice

reply edit reblog flag

http://whitemaleconsumer.com

Zeke 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

http://whitemaleconsumer.com

Opyate 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

http://www.opyate.com

Sumul 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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.

reply edit reblog flag

http://www.sumulshah.com

C Montoya 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

As programming goes, this is cool.

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

reply edit reblog flag

http://montoya.rdpdesign.com

Christoph 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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/16...
for instance, it is not black and white at all.

That makes the parsing harder...

Thanks a lot!

Greetings!

reply edit reblog flag

Brandon 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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.

reply edit reblog flag

http://splitfriction.com/

Brandon 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

http://splitfriction.com/

Caso Patologico 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Wow!! Amazing.

reply edit reblog flag

http://adivina.blogspot.com

Nevel 2 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

http://www.nevelterritory.com

dodo 2 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

http://pure-essence.net

jackie overkut 2 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Really freaking awesome!

reply edit reblog flag

http://www.anns-antiques.com/

Wilson 2 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Hi....

COuld anyone give me the javascript codes ? Thank you

reply edit reblog flag

harisankar 2 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

ILOVE THIS

reply edit reblog flag

Rick 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

http://www.ebookmoments.com

Katirna 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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?

reply edit reblog flag

http://www.MomsRow.com

kkingdomheart 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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

reply edit reblog flag

ed 8 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

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.

reply edit reblog flag

Trackbacks

(Trackback URL)

andrew's sandbox
4/22/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 ...
The Net is Dead
4/25/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 ...
Basic Thinking Blog » Geeky: Bilder in CSS/XHML Pixel f�r Pixel konvertieren?
8/16/2005 at 1:03 pm

[...] T Unglaublich,… eine v�llig beknackte Sache, aber irgendwie cool.. die Idee von Elliott Back: Ever ...
accessory clothing gown shoes wedding
7/7/2006 at 11:53 pm

accessory clothing gown shoes wedding... accessory clothing gown shoes wedding...
arbfranklin.com technical weblog » Convert Images to CSS
1/2/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 ...

Elliott C. Back: Technology FTW!

Convert Image to CSS

Add New Comment

Viewing 21 Comments

Add New Comment

Trackbacks

The Search

Related Posts:

MD5 flaw means no speeding tickets in new zealand

First Image on the Web

Thunderbird Internationalizes

Google Image Labeler