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. |
35 Responses to “Convert Image to CSS”
Leave a Reply
[...] it turns out, that’s already been done. However, I was pretty sure it could be done better – despite limiting the maximum output [...]
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”.
Not working under FF3 and IE8, crash both browsers.
Any solutions?
[...] interested in trying this out, but not too interested in the time commitment, check out this website for an Image-to-CSS [...]
I can tell that this is not the first time you mention this topic. Why have you decided to touch it again?
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.
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.
Chrome + RAM is your friend!
Doesn't work for me, crashes FF3 when I click on submit.
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.