様々な画像をCSSだけで描画してくれるimg2cssというツールの発想が面白かったので紹介です。
目次
img2cssとは
img2cssは、画像をページ上のドロップエリアにD&Dするだけで、div要素内にstyle属性として、スタイルシートで画像を描画してくれるツールです。
例えば、以下のような幅300pxの画像があったとします。
これを、img2cssでCSSに変換すると、以下のように表示されます。
上の写真は画像で表示させています。以前は、div要素にスタイルシートで描画させていたのですが、ブラウザによっては余りにも表示が重たいので、画像に変更しました。表示としては、画像とほとんど変わらないです。ただしFirefoxの場合は、以下のように色が薄く表示されます。
HTMLとスタイルのソースは、以下のように出力されます。
<div style="height: 1px; width: 1px; box-shadow: #0e0d15 0 0,#15141c 1px 0,#121119 2px 0,#18151e 3px 0,#160c15 4px 0,#120610 5px 0,#241a25 6px 0,#554f59 7px 0,#565461 8px 0,#080c17 9px 0,#00030f 10px 0,#00060f 11px 0,#00020c 12px 0,#434d57 13px （中略）,#020202 299px 199px"></div>
なんだかすごいです。ただ、正直使いどころは思いつきません。
img2cssの問題点
このimg2cssなんですが、結構問題点もあります。
例えば先程例に出した、以下の画像ですが、幅が300pxの画像でサイズは76.6KBです。
それが、img2cssでCSS化すると、サイズが1.09MBと10倍以上に肥大化してしまいます。
ただ、サイズが大きくなるだけならいいんですけど、画像の情報をbox-shadowプロパティーを用いて、無理やり表示させているために、ブラウザでレンダリングさせて表示させるのに、かなりの時間を要してしまいます。
マシンスペックが低いパソコンを利用しているときは、もしかしたら、このページを表示するのにかなりの時間を要するかもしれません。
試しに、以下の幅680pxの画像でimg2css変換させてみました。
すると、188KBの画像が、5.75MBというサイズになってしまい、まあまあのスペックの僕のパソコンでも、ブラウザ表示にかなりの時間を要しました。
要するに、あんまり実用的ではないです。
まとめ
正直、画像をCSSにしてしまう発想は凄いです。
というか、こんなことができるんだと初めて知りました。
ただ、先程も書きましたが、このimg2cssの使いどころが、全く思いつかないです。
画像サイズが、30x30px程度の画像であれば、何とか利用できるかもしれませんが、そこまでimgタグを使わずに、divタグに描画する必要性が、残念ながら今のところ全く思いつかないです。
