日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年4月12日土曜日

HTMLのテーブルで画像を表現するメリット・デメリットを考えてみた

画像をHTMLのテーブル(1ピクセルが一つのテーブルのセルに対応する)に変換するプログラムがあったら面白いんじゃないかと思って、インターネットで探してみると既に実現している人がいました。


Neil Fraser: Software: Image to HTML ConverterNeil Fraser: Software: Image to HTML Converter
 画像をHTMLテーブルに変換するスクリプト - うなの日記 画像をHTMLテーブルに変換するスクリプト - うなの日記
画像をテーブルに変換する。 - 永字八法画像をテーブルに変換する。 - 永字八法


そこで、試しに次のような画像(白地にAと黒く書かれたもの。32ピクセル×32ピクセル。PNG)を画像からHTMLのテーブルに変換してみました。

元画像

img_a
903 バイト

変換後のテーブル (*1)

13.3 KB (13,689 バイト)

テーブルのソース


HTMLのテーブルで画像を表現するメリット・デメリット

メリット

(1) 画像としてクローラーに認識されないので、画像検索などで表示されないのではないか

一般的な画像検索では、テーブルでイメージを構成したものを画像として認識しないと思われるので、画像検索で検索してほしくないような画像をテーブルで表現しておけば、画像検索で検索されることを防げるのではないでしょうか。

ただ、クローラー拒否のタグやrobots.txt、.htaccessを使えばクローラを拒否することはできるので、メリットとして挙げてよいものかどうかは疑問ですが。

検索エンジンロボットの巡回を拒否するメタタグ一覧 <br />(Yahoo!/Google)検索エンジンロボットの巡回を拒否するメタタグ一覧 (Yahoo!/Google)

robots.txtや.htaccessで検索エンジンクローラーの巡回を拒否する方法 | TechMemorobots.txtや.htaccessで検索エンジンクローラーの巡回を拒否する方法 | TechMemo

(2) 簡単な操作でコピーできないので、画像として保存するハードルは上がる。

画像をドラッグ&ドロップしての保存や、右クリックしての保存は行えないので、画像として保存するハードルは上がりそうです。

ただし、スクリーンキャプチャすれば保存できてしまうので、ほとんどハードルとしては大差はなさそうですね。

(3) JavaScript などを使用してテーブルの色などを書き換えることにより、面白い動きを作れる


JavaScriptなどを使用して、テーブル化した画像の要素の色などを書き換えることによって、動的な面白い動きが作れそうですね。

ただし、今はHTMLとして Canvas が使用できるので、あえてテーブルで画像を表現しなくても良さそうです。

Canvasとは - Canvas - HTML5.JPCanvasとは - Canvas - HTML5.JP

デメリット

(1) ファイルサイズが大きい

上記の例で分かるように画像サイズはテーブル化画像のHTMLのサイズ13,689バイト / 元のpng 画像サイズ 903 バイト = 約15倍となっており、ファイルサイズは非常に大きくなっています。

テーブル化画像のHTMLは一画素に対応する要素(<TD BGCOLOR=#ffffff width=1 height=1></TD>)は42文字であり、単純に文字数から考えると 1 文字 1 バイトとすると、42 バイト消費します。 元の画像は png なので、1 画素が({透過用のαチャネル・赤・青・緑}の各1バイトからなる)4バイトとした場合、この時点で約11倍ほどの差があります。さらに、PNGは可逆圧縮されているので、更に画像サイズは小さくなります。


ちなみに、先ほどのテーブル化画像のHTMLを ZIP 圧縮すると、ファイルサイズは 815 バイトとなり、元の png 画像のファイルサイズ 903 バイトよりも 88 バイトほど小さくなりました。

サーバ上では圧縮したテーブル化画像のHTMLとして保持しておき、クライアントのブラウザで JavaScript などで展開してページにHTMLとして書き出すということをすれば、JavaScript などで記載した展開用コードのプログラムサイズと圧縮したテーブル化画像のHTMLの合計が、png の画像サイズよりも小さい場合にはメリットがあると言えるかもしれません。

(2) 処理が重い

画像の画素数分テーブルを構成しているので、その分処理は重くなります。

(png 画像を展開して表示するコストと、画素数分のテーブルを表示するコスト、どちらが大きいのかはブラウザの実装によるところなので環境を用意して実験してみないとわかりませんが、画素数分のテーブルを表示するという処理は一般的に想定されていないことから後者の方が重そうな予感がします。)

(3) 環境によっては表示が崩れる可能性がある

テーブル化画像のHTMLによっては、環境によっては表示が崩れて、画像が意図したとおりに表示されない可能性があります。

まとめ

HTMLのテーブルで画像を表現するメリット・デメリットを考えてみた結果、メリットはほとんどなくデメリットが目立つので、何か特殊な用途を想定しない限り、普通は使い道はなさそうです。(Canvasが使えない環境で、Canvasの動きをエミュレートするなど)

ただ、画像をHTMLのテーブルとして表現するという発想は素晴らしく良いものであり、もしかしたら今後もこの発展した形を誰かが発明してくれるのかもしれません。それによって、Webの世界に新しい扉が現れることもあるかもしれません。


*1
「Image to HTML Converter」のページで出力したテーブルの HTML では、このブログでうまく表示できなかったため、一部HTMLソースを修正しています。

原文は以下のとおりです。このブログで使用したHTMLソースは以下のソース中の「><img」を空白で置換することで、<img>要素を無くし、<td>に直接 width と height を設定しています。


参考文献

好きな画像をテーブルタグでつくったHTMLに変換してくれる『img2html』 | POP*POP好きな画像をテーブルタグでつくったHTMLに変換してくれる『img2html』 | POP*POP




関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...