事情があって、あるwebページで、ビットマップ画像をテキストデータのみで表示させる必要が出てきた。webを探したところ、Img to CSSというジェネレータのページを発見。タイトルからして、画像ファイルをcssデータに変換してくれるらしいと判断、早速試してみた。
画像は、私のwebサイトでfaviconに使用している画像の元データ。縦横160px、約20KBのjpeg（右画像）。ローカルにあるので、[ファイルを選択]ボタンから画像を選んでアップ。[Convert to CSS]ボタンを押して待つことしばし。でき上がったコードが表示された。かなり重い！
サンプルのhtmlに貼ってみたところ、なんと500KB余りサイズが増えた。元の20KBが500KB超ではちょっと重すぎて、読み込みに時間がかかりすぎる。これはユーザビリティ的に問題。
さらにコードを良く見てみたら、画像のピクセル単位を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スキームを利用したもの。見た目はほとんど同じだが、内部処理が違う。
今回、Base64変換に利用させていただいたページ
[JavaScript] dataスキームURI生成（画像データのBase64変換）：
画像をBase64に変換するツール (data URI scheme) - シングスブログ：
ついでに、Internet Explorerのdataスキームへの対応は最近どうなっているか調べてみた。
Windows XP Home SP3 IE7：サンプルページ２、３、４ともに表示できず。
Windows XP Home SP3 IE6（IETester）：サンプルページ２、３、４ともに表示できず。
Windows XP Home SP3 IE8（IETester）：サンプルページ２、３、４ともに正常に表示できる。
Windows Vista Home SP2 IE8：サンプルページ２、３、４ともに正常に表示できる。
Windows Vista Home SP2 IE6（IETester）：サンプルページ２、３、４ともに表示できず。
Windows Vista Home SP2 IE7（IETester）：サンプルページ２、３、４ともに表示できず。
Windows 7 Pro IE9：サンプルページ２、３、４ともに正常に表示できる。
Windows 7 Pro XPモード IE6：サンプルページ２、３、４ともに表示できず。
やはり今でもdataスキームの対応は、IE8以上のバージョンに限られるらしい。
0 件のコメント:
コメントを投稿