インターネット用の画像ファイルを軽くするには？
Windows 2000に続く｢Me｣が発売されて早くも１ケ月、さっそく使っておられるかたも多いことでしょう。ただ、どんどん新しくなってゆくWindowsながら、16ビットから32ビットへ生まれ変わったWindows 95以来、基本構造はさほど変化していません。ハードの進歩に伴い、かつて実用化が難しかった技術の多くは製品化され、そこへソフトが対応し、対応したソフトに今度はハードが対応する･･････そういった意味での変化なら、確かに目を見張るものはあるのですが･･････!?
Windowsと限らず、21世紀の幕開けを控えて過去10年間を振り返ると、いつの間にかコンピュータは我々の生活から切り離せない存在となっている現状に改めて驚かされます。そもそも冷戦の落とし子であったインターネットが主役となり、コンピュータはマルチメディア化され、今や音も映像もデジタルが当たり前の時代となりました。Windows 95以降はインターネットの急速な普及と足並みを揃え、その機能を強化したWindows 98、そしてペンティアムⅢに代表される各社のプロセッサが１GHzの早さへ到達し、本格的なデジタル時代を迎えて登場した｢Me｣はマルチメディアの強化が売り物の１つです。
通常のGIFイメージと透明化GIFイメージの比較
通常のGIFイメージ
透明化GIFイメージ
こうして、留まるところを知らないハードとソフトのコンピュータ技術に支えられながら、インターネットの世界は凄じい勢いで進化を続けています。｢MP3｣フォーマットの登場がネット上ばかりでなく音楽業界の常識まで変えたように、絶えず新しい技術を呑み込みながら、ますます我々の生活と密着してゆく以上、一方でベーシックな部分は変わっていないのかもしれません。というわけで、Windowsのベーシックへ戻った前回同様、今回はインターネットのベーシックへ戻り、画像ファイルを軽くする方法がテーマです。ここ数年来、静止画像のフォーマットはGIFイメージかJPGイメージがインターネットの主流で、前者は｢ギフ｣とか｢ジフ｣と発音する人がいます。また、1987年に開発された最初のフォーマットを｢GIF87｣、1989年に仕様改訂された拡張フォーマットを｢GIF89a｣と区別して呼ぶ場合もあり、透明化、インターレース、アニメーションなどの強力な機能は拡張フォーマットから追加されました。
これらがウェブサイトのデザインで不可欠な機能といってもピンとこないかたは、上図を参照して下さい。右図のように模様のある背景へ表示され、かつ四角くない輪郭の画像があれば、必ず透明化の機能を使っており、その大半はこのフォーマットなのです。同じく、画像を取り込む途中でイメージがじわじわと表示されるインターレース機能やバナーでお馴染みのアニメーション画像も、このフォーマットで初めて実現しました。ただ、使用できる色数の限界は256色という欠点があります。
後者は開発したグループのイニシャルを取って｢JPEG｣とも呼ばれ、その略称が｢JPG｣です。これらは｢ジェイペグ｣と発音し、もともと写真画像を蓄積する目的で設計されたフォーマットなので、GIFより多くの色と優れた圧縮アルゴリズムをサポートしています。透明化、インターレース、アニメーション機能こそ備えていませんが、それらを必要としなければ画像の鮮明度や取り込む早さはGIFの比ではありません。
その後、GIFよりスムーズなインターレース機能を持つ｢プログレッシブJPEG｣も開発され、より効率的な画像表示が可能になっているJPGイメージながら、小さな画像を圧縮するとファイル容量は大きくなる場合があるため、アイコンなど小さくて色数の少ない画像には不向きです。つまり、GIFイメージとJPGイメージそれぞれの短所と長所が、まったく正反対だとおわかりいただけるでしょう。
ほかにも、1994年の終わり頃からGIFの著作権を避ける目的で開発された｢PNG｣などは、アニメーション機能を除く両者の長所をすべて兼ね備え、将来GIFにとって代わる画像フォーマットといわれながら、先の２大勢力へ食い込むまでに至らないというのが現状です。結局、ここまで普及したGIFイメージとJPGイメージで事足りるうちは、誰しも受け入れ態勢が制約される新しいものより確実なほうを選ぶのだと思います。
じっさい、より効率的な画像を使ったからといって、より快適なページになるとは限りません。ちょっとした工夫があれば、GIFイメージとJPGイメージだけでもシェープアップは可能です。同じ効果が得られるなら、フォーマットはなるべく普及したものを使ったほうが、それだけ見る人は増えます。そのつもりで頭を捻ると、けっこうアイデアが浮かぶものです。たとえば、ブルーページの｢ブックマーク｣で毎月ご紹介している表紙の画像は、少しでもファイルが軽くなるよう、表紙そのものと影の部分を別々のファイルに分けて重ねてあります。このフレーム機能のごく単純な応用は、過去数年間｢ハリウッド最前線｣の制作過程で思考錯誤を繰り返す中から思いつきました(｢フレーム機能｣や｢画像フォーマット｣のことが詳しくしりたいかたは、姉妹ページの｢ハイパーテキスト･マニュアル｣を参照して下さい)。
ご覧いただけばおわかりいただけると思いますが、左の作例は材料の縮小画像２枚と、それらの実物を重ねた結果です。黄色い部分が透明化された背景(影)のGIFイメージは、中身を省いているため、たった12色しか必要としません。また、背景抜きの四角い中身だけだと透明化の必要がないため、重ねる画像は圧縮技術の優れた高彩度のJPGイメージを使えます。
JPGイメージ
GIFイメージ表紙と影を重ねた作例
まず、材料の画像２枚を用意する上で重要なのが大きさ、サイズを揃えない限り、２つの画像は重なりませんからご注意ください。作例の場合、表紙のJPGイメージが縦横それぞれ110×150ピクセルで、それを中央へ置くという前提から背景画像のサイズを計算します。右側と下側に12ピクセル幅の影をつけたら、上側と左側にも同じだけの幅を空け、134×174ピクセルというわけです。そして、その空白(と右下の角の一部)をわかりやすい色で透明化すれば、いざ準備は整いました。
なお、｢フォトショップ｣や｢フォトペイント｣などのソフトを使い慣れたかたなら、ここでJPGイメージは徐々に圧縮率を上げながら、画像のクォリティーが許す範囲まで絞りこみ、同じくGIFイメージは徐々に色数を減らしながら、ぎりぎりまでクォリティーとの妥協点を見つけて下さい。材料が良いほど、美味しい料理を作れるのですから･･････そこで、今度は材料の良さを損なわないよう、調理してみましょう。
以下が具体的なハイパーテキストの記述例で、テーブル機能の｢background｣属性を使います。ページの中へテーブルを組み込む時に、そこだけ違う背景画像が指定できるこの属性は、うまくGIFイメージやJPGイメージの特性と組み合わせれば、ただの背景画でなく前景画として２つの画像を重ねたり、背景のあるページの一部だけ、さらに半透明の背景をかぶせられるなど、なかなか便利です。
<table border=0 cellpadding=12 cellspacing=0 align=left>
<td background="../../images/shadow_b.gif"><a href="../windex_p.html">
<img src="../../book/cover/hongkong.jpg" border=0
alt="画像による目次はここをｸﾘｯｸして下さい"></a></td></table>
下線の部分が２箇所あるうち、最初の｢border｣属性は閲覧ソフト(ブラウザ)によってテーブル機能の仕様が異なることもあるため、｢0｣で指定して下さい。指定しておかないと、たとえ初期設定(ディフォルト)は｢0｣の閲覧ソフトでも、少しズレル場合があります。もう１つの｢cellpadding｣属性は縁の幅をピクセル値で指定するもので、先ほど説明した影の部分の数値と合わせ、もし幅が20ピクセルなら、作例の｢12｣から｢20｣に変更しなくてはなりません。また、画像からのリンクを張る必要がない場合は、青字の部分を省いて下さい。
もう１つの応用例として、やはり｢ブックマーク｣で表紙を含むヘッダ(タイトル)の部分が、同じテクニックを使っています。この場合、ページ全体の背景画像へ、ヘッダ部だけは別に縞模様の背景を重ねながら、元の背景画像も浮かび上がらせるのが狙いです。そのため、重ねるほうの(縞模様の)背景画像は、縞の部分以外を透明化したGIFイメージを使いました。
これらの例を参考に、まだまだアイデアが浮かぶはずですから、あとはみなさん独自の方法を編み出して下さい。驚くべき勢いでインターネットの世界が進化し、少々ファイルは重かろうと転送スピードが早くなりさえすれば問題となりません。しかし、技術の進歩へ甘えている限り、快適なウェブサイトを生み出すことは難しいでしょう。
じっさい、技術の進歩が１ファイル数キロバイト程度の差は関係なくして尚、わずか１キロバイトへこだわる努力の積み重ねが、どれほど大きな違いを生み出すものかは経験して初めて納得できます。既成のソフトウェアで作成したハイパーテキストが、プログラムの定石どおり不必要なタグを使うことは避けられず、私が未だにWindowsの初歩的なアクセサリ｢メモ帳｣のみでテキストを記述している理由も、こうした不必要なタグ数文字分を節約するためです。ただ、文字を減らして節約できるバイト数が微々たるものであるのに対し、画像への工夫は顕著な差が期待できますから、試みられて絶対に損はありませんよ!!
|
お断り