Business, Trading, yourgames: ◉webページで、ビットマップ画像をテキストデータのみで表示させるため、Img to CSSというwebサービスとDataスキームを試してみた。

Sunday, May 22, 2011

◉webページで、ビットマップ画像をテキストデータのみで表示させるため、Img to CSSというwebサービスとDataスキームを試してみた。

事情があって、あるwebページで、ビットマップ画像をテキストデータのみで表示させる必要が出てきた。webを探したところ、Img to CSSというジェネレータのページを発見。タイトルからして、画像ファイルをcssデータに変換してくれるらしいと判断、早速試してみた。

画像は、私のwebサイトでfaviconに使用している画像の元データ。縦横160px、約20KBのjpeg（右画像）。

ローカルにあるので、[ファイルを選択]ボタンから画像を選んでアップ。[Convert to CSS]ボタンを押して待つことしばし。でき上がったコードが表示された。かなり重い！

サンプルのhtmlに貼ってみたところ、なんと500KB余りサイズが増えた。元の20KBが500KB超ではちょっと重すぎて、読み込みに時間がかかりすぎる。これはユーザビリティ的に問題。

→ サンプルページ・Img to CSSによる変換（約530KB）

さらにコードを良く見てみたら、画像のピクセル単位をtableのtdに置き換えたものになっている。画像から取り出した各色をバックグラウンドに指定した縦1pxのtdで、横サイズは1pxからcolspanでのばしたものまで様々。cssを使っているところはtable全体の縦横サイズ指定のみ。「Img to CSS」というより「Img to html」と名付けたほうがよさそう。

とはいえ、無料のwebサービスなので、文句を言っても始まらない。htmlに変換でも何かに利用できるかもしれないので、とりあえずURLを載せておくことに。

Img to CSS：http://www.imgtocss.com/

次に、画像をdataスキーム(DataURI) を利用する方法。バイナリデータを Base64 エンコードして、ページ内のスクリプトでデコードして表示するもの。以前も何度か利用したことがあるが、IEのバージョンによって非対応の問題をかかえている。そのあたりが改善されていれば、使えるはず。実際作成してみると、わずかに30KB程度ですむ。

以下の3ページはいずれもdataスキームを利用したもの。見た目はほとんど同じだが、内部処理が違う。

→ サンプルページ2・Data URI schemeデータをhtmlに直接記述（約30KB）

→ サンプルページ3・Data URI schemeデータをcssで記述（約30KB）

→ サンプルページ4・Data URI schemeデータをjavascriptで記述（約30KB）

今回、Base64変換に利用させていただいたページ

[JavaScript] dataスキームURI生成（画像データのBase64変換）：

http://www.kawa.net/works/js/data-scheme/base64.html

画像をBase64に変換するツール (data URI scheme) - シングスブログ：

http://blog.thingslabo.com/archives/000058.html

ついでに、Internet Explorerのdataスキームへの対応は最近どうなっているか調べてみた。

Windows XP Home SP3 IE7：サンプルページ２、３、４ともに表示できず。

Windows XP Home SP3 IE6（IETester）：サンプルページ２、３、４ともに表示できず。