画像を扱うノウハウ

　インターネットのホームページをいろいろ見てまわると、画像データの表示がとても遅いものに出会うことがある。

　テレホーダイタイムなどで、しかも反応が遅いサーバだったりすると特にその傾向は強いが、そうでなくても画像の表示がノロノロしているような時は、そのホームページを作った人が、画像表示の方法を間違えていることが多い。

　悪気があって取り上げるのではないが、たとえばこんなページなどが、その例である。（知り合いなので勘弁してください^^;）

　Internet Explorerでは確認するのがめんどうだが、Netscape Navigatorをお使いの方は、画像の上で右クリックをして「画像を表示」にしてみると、その画像が本来の大きさで表示される。

　上で例にあげたページでは、本当はパソコンのディスプレイいっぱいに表示されるような大きな画像を、見た目だけは小さくして表示しているのである。

　当然のことながら縦横サイズの大きな画像データは、ファイルサイズそのものが大きくなるから、たとえ見た目は小さく表示されようとも、ファイルをダウンロードするために時間がかかるので、表示のための時間がかかってしまう。

　このページでも実験してみよう。

　まずは、下の画像をご覧いただきたい。

　これが本来の画像サイズ（400×250）である。JPGデータで、サイズは３１KBある。

　設定のしかたによっては、同じ画像を次のように表示することも可能である。

　これは、見た目では縦横半分のサイズ（200×125）になっているが、もとになっているファイルは、上のものと共通である。（Netscape Navigatorをお使いの方は右クリックで「画像を表示」にしてみれば確認できるだろう）

　したがって、サーバからファイルをダウンロードして表示させるためには、上の画像と同じだけの時間がかかってしまう。

　時間がかかるだけではなく、見た通り、画質も大幅に落ちてしまうので、とても無駄が多い。

　もっとも、このように「サイズを好きなように指定できる」という機能を使って、小さいサイズの画像を大きく表示するということも可能である。下がその例である。

　これも表示しているのは、最初の画像と同じファイルである。

　ここでは、もともと400×250のサイズを、見た目だけは1.5倍にして、600Ｘ375にしてみた。（これもNetscape Navigatorだと右クリックで確認できる）

　もともと600Ｘ375のサイズの画像を表示するよりも、たしかに表示速度は速くなるのだが、ご覧の通り、画質は劣化する。あまり良い方法とは言えないだろう。

　サイズを自由に指定できるという機能を利用して、もともとの画像の縦横比を変えて表示するという方法も使える。下の画像がその例である。（扱っている画像データは共通である）

　これは、縦のサイズを縮めて、横長に見せた例である。

　こちらは、横幅を縮めて、縦長に見せた例である。

　どちらも使い方によっては効果があるが、画質の面では問題がある。

　やはり、狙った通りのイメージを表示して、表示の速さもスムーズになるようにするためには、画像処理ソフト等を活用して、必要なサイズの画像データを作ってから、ホームページ上で公開するのが理想的である。

　もう一つ、画像を扱う上で興味深い問題がある。

　それは、画像処理を行う際に、ＢＭＰファイルの状態で処理をするか、ＪＰＧファイルにしてから処理をするかという問題である。

　実は、この文章を書くきっかけになったのが、ある知り合いの方から教えてもらった「高画質で圧縮効率の良いＪＰＧファイルを作るためには、ＢＭＰファイルの状態で必要な処理を行い、最後にＪＰＧファイルに変換するのがよい」という話だった。

　その方が言うには、いったんＪＰＧファイルの状態にしてしまうと、フィルタや色相の変化などの処理を行うたびにファイルサイズが大きくなるので、ＢＭＰファイルの状態で処理を行い最後にＪＰＧファイルに変換したデータと比較すると、結果的には画質も劣化し、ファイルサイズが必要以上に大きくなるということだった。

　仮に画質が同程度だとしても、ファイルサイズが大きくなってしまうのでは、インターネット上で扱う場合はダウンロードの時間もかかるので、かなり不利だということになる。

　実際にそうなるのかどうか、自分でも確かめてみようと実験したのが、下の結果である。

　結果を述べる前に、画像データの形式について少々触れておきたい。

　ホームページをばりばり作っている方には常識的なことかもしれないが、ご存じない方もおられるかもしれないので、一応、確認の意味で書いてみる。

　Windowsパソコンで標準的な画像データの形式が「ＢＭＰ（ビットマップ）」と呼ばれるものである。（Macintoshの場合はＰＩＣＴ形式）

　これは、コンピュータのディスプレイの１つ１つの点（ピクセル。ドットともいう）でそれぞれどんな色を表示するかというデータである。そのコンピュータの設定にもよるが、ディスプレイには「640×480」「800×600」「1024×768」などのピクセル表示がある。そのそれぞれの点にＲ（赤）Ｇ（緑）Ｂ（青）の発色を指定するのである。

　各色の発色の具合は１６進数（0,1,2,3～9,A,B,C,D,E,F）で指定するのだが、１つの色に対して１６進数２桁で指定できるので、発色の段階は、16×16で256となる。これが３つ組み合わされるのだから、色の種類は、256×256×256で、 16,777,216色、つまり約1678万色ということになる。

　これをきちんとデータ化すれば、正確な表現が可能になるのだが、そこでできるデータはとても大きなものになる。例えば最初に表示した画像をＢＭＰファイルにすると294KBになってしまう。

　これでは、インターネット上で扱うにはファイルサイズが大きすぎる。またサーバのハードディスク容量をも圧迫してしまう。

　そこで、インターネット上では、ファイルの転送や表示を効率的に行うために、ＢＭＰ形式のファイルを使わずに、ＪＰＧやＧＩＦという圧縮ファイル形式を使うことになっている。

　ＧＩＦ（ジフ）は「Graphics Interchange Format」の略で、「CompuServe」が開発した形式である。交換フォーマット（Interchange Format）と名付けられているように、もともとは異なる機種やＯＳ間で画像イメージを交換することを目的に作られたものである。

　そのため可逆圧縮であり、利点もあるのだが、残念なことに最大256色のデータまでしか扱えない。したがって写真のような色数が多いデータには適せず、ロゴやアイコンのような単純な画像データに向いている。ここでは写真等のデータを話題にしているので、ＧＩＦについてはこれ以上ふれないことにする。

　ＪＰＧ（ジェイペグ）は新しい圧縮方法であるＪＰＥＧ圧縮を開発したグループの名称「Joint Photographic Expert Group」の略称がそのままファイル形式名になり、ファイルの拡張子は「.JPG」が使われる。

　こちらはＧＩＦと異なって元データを完全には復調できない非可逆圧縮であるが、フルカラー（16,777,216色）のデータが扱え、圧縮の比率も高い。写真などのデータを扱う場合は、この方法が一般的である。

　画像ファイルの形式についての説明が長くなったが、いよいよ実験の結果の紹介である。

　まずは、もとになった画像だが、写真雑誌からイメージスキャナを使って取り込んだ「640×400」のフルカラー・ビットマップ画像（ＢＭＰ）である。

　そのままの画像を紹介すればよいところだが、ＢＭＰ形式のファイルは表示できないし、ＪＰＧ形式に変換しても４７KBと大きめのデータになるので、ここではその一部分をＪＰＧにして紹介する。

　これだとサイズが２１KBである。

　もとのＢＭＰファイルを一方はＢＭＰの状態のまま（751KB）にし、もう一方はＪＰＧ形式に変換して（47KB）、縮小・拡大・左右反転・上下反転・明るさやコントラストの調節・フィルター処理などを加えた。

　各処理を行うごとに保存を行い、最終的に「320×200」のサイズにし、ＢＭＰの状態で処理をしてきたものも最後にはＪＰＧにして保存したのが、下の画像である。

ＢＭＰの状態で処理をしてきたもの（320×200ピクセル、２１KB）	ＪＰＧ化してから処理をしてきたもの（320×200ピクセル、２１KB）

　結果はどうだろうか？

　注意深く見ると、光沢や陰影などの点で「ＢＭＰの状態で処理してきたもの」の方が少々画質が良いという感じもするが、ほとんど差がないと言ってもよいだろう。

　どちらの画像に対しても行った処理の種類・回数・手順は全く同じである。

　画像のサイズ（解像度）を変えて、ちょっと明るさやコントラストを変え、少しフィルターをかけて、ＪＰＧファイルにする程度の処理ならば、もっと画質が良いのだが、今回は画像サイズを数回変えているので、画質の面では劣化が大きい。特に表示予定の「320×200」よりもサイズを小さくして（今回は「280×175」にしてみた）、さらにそれを拡大して「320×200」に戻すというような処理が、画像に対してのダメージが１番大きい。（普通はこのような処理はしないし、絶対に避けるべきである）

　それでもこの程度の結果になったのだから、画像処理についてはパソコンとソフトにまかせておけば、そこそこの処理はしてくれるという結果になった。

　ファイルの大きさについては、どちらの方法でやっても、同じファイルサイズ（２１KB）という結果になり、処理の手順によってファイルサイズが異常に大きくなるというような結果は出なかった。

　ただ、ＪＰＧ形式は、保存の際に圧縮率を任意に指定できるという特徴があり、圧縮率を高くするとファイルサイズは小さくなるが画質が落ち、反対に圧縮率を低くすると画質は高くなるがファイルサイズが大きくなるという現象が起きる。

　この圧縮率は必ずしも統一されているわけではなく、画像処理ソフトによって異なるということがある。

　確かに、一度、標準的な圧縮率で保存したファイルを読み込み、それを高画質（低圧縮率）を指定して保存するとファイルサイズが大きくなるという現象が起きる。

　ただし、その後は処理を繰り返しても、一度大きくなったファイルサイズ以上にさらに大きくなるということはないし、それを標準的な圧縮率を指定して保存すればもとのサイズまで小さくなる。

　私の場合、画像処理には「アドビ」の「フォトショップ」を使うことが多いが、その場合はこれまで述べたような結果になった。

　ただ、複数の画像処理ソフトなどを使うとファイルが次第に大きくなるという現象が起きるのかもしれない。あるいはソフトによっては、常に「高画質」で保存するような設定になっていて、ファイルが大きくなるということがあるかもしれない。（あまり考えられないことだが）

　以上のようなことから、画像をＢＭＰの状態で処理をして最後にＪＰＧ化しても、最初にＪＰＧに変換してから処理をしても、結果に大きな差はないことがわかった。

　しかし原理的に考えると、ＢＭＰの状態で処理を済ませて、最後にＪＰＧ化する方が、完璧であるとはいえよう。

　結果的には大きな差はないのだが、「これは絶対にきれいに仕上げたい！」という画像の場合は、ＢＭＰ状態で処理していく方が、気分的には満足できるかもしれない。ただ、「ハードディスクを圧迫したくない」とか「手早く処理を進めたい」という場合には、ＪＰＧにしてしまってから処理する方が楽なようにも思える。

ホームページに戻る

前のページへ