This article was published on July 17, 2011

These are not images but pure HTML/CSS. Create your own. (Warning: may crash your browser)


These are not images but pure HTML/CSS. Create your own. (Warning: may crash your browser)

A quick Google search will pull up a number of Image to CSS conversion tools but we’ve come across none as impressive as Img to CSS.

I’ve personally tried the tool out on a number of complex images and each has resulted in near flawless pure HTML versions of each.

Here’s a demo:

Why would you favor that over an actual image? Well in many cases a CSS/HTML file should be smaller in size. However when you’re converting rather complex images, that isn’t generally the case. So the other reason you would use CSS/HTML over an image is for use within emails. Most email clients will block images for security purposes but if images are in fact pure CSS/HTML, that isn’t the case. It’s worth noting that it’s only worth converting small images like icons and logos as large emails are likely to be blocked by email providers -so this is ideal for use within email signatures for example.

Image to CSS converts all major image types to CSS, it retains transparency (although some email clients might not support it) and the CSS/HTML is in-line, so it won’t be stripped out in emails. Upon signing up for Img to CSS, you get 5 free conversions. Once you’re depleted then 2 conversions will set you back $1. The minimum amount you can spend is $5, so that’s 10 conversions. If you plan on converting a number of images, you can also pay a $30 monthly subscription.

Ok, enough chit chat. It’s examples you want, so it’s examples you’ll get.

Get the TNW newsletter

Get the most important tech news in your inbox each week.