画像をD&DするだけでCSSとして出力してくれるツール「img2css」

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

様々な画像をCSSだけで描画してくれるimg2cssというツールの発想が面白かったで紹介です。

スポンサーリンク
レクタングル(大)広告

img2cssとは

img2css

img2cssは、画像をページ上のドロップエリアにD&Dするだけで、div要素内にstyle属性として、スタイルシートで画像を描画してくれるツールです。

例えば、以下のような幅300pxの画像があったとします。

これを、img2cssでCSSに変換すると、以下のように表示されます。

img2cssでCSSに変換した画像

上の写真は画像で表示させています。以前は、div要素にスタイルシートで描画させていたのですが、ブラウザによっては余りにも表示が重たいので、画像に変更しました。表示としては、画像とほとんど変わらないです。ただしFirefoxの場合は、以下のように色が薄く表示されます。

Firefoxだと色が薄く表示される

HTMLとスタイルのソースは、以下のように出力されます。

なんだかすごいです。ただ、正直使いどころは思いつきません。

img2cssの問題点

このimg2cssなんですが、結構問題点もあります。

例えば先程例に出した、以下の画像ですが、幅が300pxの画像でサイズは76.6KBです。

それが、img2cssでCSS化すると、サイズが1.09MBと10倍以上に肥大化してしまいます。

ただ、サイズが大きくなるだけならいいんですけど、画像の情報をbox-shadowプロパティーを用いて、無理やり表示させているために、ブラウザでレンダリングさせて表示させるのに、かなりの時間を要してしまいます。

マシンスペックが低いパソコンを利用しているときは、もしかしたら、このページを表示するのにかなりの時間を要するかもしれません。

試しに、以下の幅680pxの画像でimg2css変換させてみました。

すると、188KBの画像が、5.75MBというサイズになってしまい、まあまあのスペックの僕のパソコンでも、ブラウザ表示にかなりの時間を要しました。

img2cssを使うとサイズがかなり肥大化してしまう

要するに、あんまり実用的ではないです。

まとめ

正直、画像をCSSにしてしまう発想は凄いです。

というか、こんなことができるんだと初めて知りました。

ただ、先程も書きましたが、このimg2cssの使いどころが、全く思いつかないです。

画像サイズが、30x30px程度の画像であれば、何とか利用できるかもしれませんが、そこまでimgタグを使わずに、divタグに描画する必要性が、残念ながら今のところ全く思いつかないです。