Converting a Bitmap Image To Scalable "Vector" HTML
Wednesday, November 14, 2012, Modified: Thursday, November 15, 2012 Refs

I found this really cool project that turns images on the web into a huge blob of single-pixel spans positioned absolutely.

For example, here is this site's logo as a png:

Here is the same logo converted to spans:

Here is the same logo down-sampled (2x2) and converted to spans:

I like it. My logo is Retina ready!

Here is the link to the app which does the conversion on the site of its author, Elliott Back.

Note, I had to increase pixel sizes to 1.05 x 1.05 to get the fine version not to have bands and stripes when scaling down. There is also another downside: the megabyte of spans it takes to draw that little logo. It should be pretty easy to do a better job with this sort of pixel art however. My Android Pong variant converts bitmaps to vectors on load to be drawn as triangles through OpenGL ES, and a similar approach of finding runs of pixels or merging blocks of them would lead to a lot fewer HTML elements.

Edit: It Turns out to Have Been Done Better

An article. Example.

Or there is always the option of doing it the hard way:


Try Buffer, a smarter way to share links and pictures by spreading your tweets and posts out over time. Sign up from this link and we both get extra features.

Buffer
Home :: Items