ウェブ・サイトで使わないでいいと思うことが出来ない要素の一つが画像です。多くの場合画像は適切に利用されれば、サイトを強化しプラスになりますが、乱用誤用すると創造的で情報豊富なサイトも台無しにし、訪問者も戻って来ないでしょう。
よく聞かれる話題への答えをすることと、短い説明・チュートリアル・内容のいいサイトへのリンクなどを纏めます。加えるべきいいサイトを見つけられたり、リンクが消失していたり変更されているのに気付かれたら、 john@htmlhelp.comにお知らせ下さい。
この質問は、経験を問わずデザイナーからよく聞かれるものです。覚えておくといい現実的で大事なルールをあげてみます：
"多彩な色、JPEG．．．．．．色のべた塗り乃至は色階調がない、GIF"
GIFとJPEG画像フォーマット（形式）について理解しておくべき最初のことは、それが圧縮を前提とした形式であると言うことです。言い替えると、ビット・マップ画像のように圧縮されていない画像を得て、それをより小さなファイル・サイズに圧縮します。通常、この変換により非常に小さな画像ファイルになります。
或る圧縮方法は常にファイル・サイズを小さくするようですが、これが簡単でないケースもあります。 GIF形式は、比較的色数が少なく階調がない画像の圧縮に優れています。事実殆どの小さなウェブ画像はgif形式で保存され、10kを超すべきではありません。今や、画像の世界では．．．．．それでは小さい！！ 対照的にJPEG圧縮は数種の色で階調がない場合GIFの同じものよりも通常大きな画像になり、質があきらかに低下します。
前に述べたように形式はそれぞれ特有な利点があります。階調なく数種の色の画像ではGIF形式が優れていますが、階調があり色のつながす画像はJPEG形式が王様です。連続した色調は、スムーズな移行で一つ色から他の色へ調和しています。このいい見本が写真です。稀に、画像がひと色のものもあります。対象が多くの色の変化・陰・色階調のものもあります。これらの色や周囲を囲む陰などの場合はJPEG形式の出番です。
形式の異なった画像の見本をみたいなら、アドーブに優れた比較作品があります。技術的な詳細に関心があるなら、 JPEG FAQを調べ、 The Graphics Pageを訪れてみて下さい。そして、このことを覚えておいて下さい。パフォーマンスを理想的にしようとするなら、両者の形式で画像を保存し、あなたの場合ベストなのはどれかを比較してみて下さい。
Windows95でのPhotoshop互換ファイルでこのことをする容易な方法は PhotoImpact's Smart Saverから入手でき、最終決定をする前に実際の画像やサイズを見ることができるようになっています。また、この道具は次で言及する透明化画像を作る場合にも有効です。
透明化画像は、画像で縁が見えなくすることにより、ページの背景を画像の背景として表示できるようにします。これはページの背景が画像の背景と異なる色の場合有効です。透明化してないと画像は周りを囲む縁がありますが、透明化して保存すれば画像はページ背景に適してできているように見えます。現在透明化をサポートしている形式はGIFとPNG形式があります。
|
|
透明化画像の問題は、全てのブラウザが適切に描写しないことです。古いブラウザのなかには、GIF87非透明化形式とGIF89a透明化形式の違いを区別できなくて、元の背景色を表示します。この理由からグラフィック・アーチストは、画像の背景色をページの背景色と同じにする試みが、透明化形式で保存した場合でさえ、必要になってきます。
透明化画像のハウツーは以下で入手できます：
織り模様化画像（逐次順々と表示）は、非織り模様化画像に比べて所在を突き止めるのが容易です。視力によるので、注意しないとその違いはわかりません。織り模様化は過程で、一度に全てを描くのではなく一連の線を次々と描きます。最初の線は数行跳んで、跳び越された行を続く線で埋めていきます。上から画像を描いていくのと違って、初めぼやけていてだんだん焦点が定まる画像を作ると言う効果があります。
織り模様化画像ははじめぼやけていますが、これを使う明確な理由が二つあります。まず、空白ではなく何かをクライアントに与えます。これはクライアントが注意する効果を持ちます。二番目は画像がフェード・インするので、クライアントは、待って画像の残りを見るか単にやり過ごすかを決めることができます。
何故全ての画像を織り模様化しないのでしょう。他のものと同様に比較（トレード・オフ）の問題です。織り模様化は下検分ができますが、一般的に画像サイズが大きくなり、画像の終りまでに時間がかかります。画像が小さくて、画像を織り模様化している感じがなくなら通常は受け入れられ、織り模様化は時に大変小さな画像にファイル・サイズを減少します。
で、視力についてはこれで全てですか。コンピュータ画面（モニター）も織り模様化と非織り模様化の違いに関わります。織り模様化モニターは、少し揺らぎの元になる交互連続線を描きます。それが見えないかもしれませんが、目には緊張をもたらします。モニターが織り模様化かどうかを確かめたくそしてVTR一体カメラを持っているなら、モニターをカメラで覗いて、揺らいで見えるなら織り模様化されてたものです。別のモニターを覗いて、これは非織り模様化と言えるか確認して下さい。
アニメーション化gif画像は、多数の画像を含むことの出来るGif形式の能力を利用しています。別々の枠を一緒に継ぎ合わせ、枠の表示の際時間差を付けます。この方法で画像は動かされ、変化している様に見えます。
アニメーション化gif画像は小さいアイコンやロゴに使われる場合 、World Wide Web上で大変効果的です。アニメーション化gif画像が大きなグラフィックを作るのに使われる場合、ファイル・サイズは大概ウェブ上の使用を妨げます。アニメーションはジャバ・アップレットやその他プラッグ・インからなる技術をウェブ・ページに挿入することでも出来ます。アニメーション化gif画像は通常小さくて、プラッグ・イン・アプリケーションがなくてもブラウザ上で作動します。
アニメーション化gif画像の使用で気をつけておくべきことがあります。まず、全てのブラウザがサポートしていないことです。gifのこのタイプをサポートしていないブラウザは多数の枠の一つだけしか表示しません。このことの意味は、画像は非サポート・ブラウザのことも注意して組み立てなければなりません。また、非サポート・ブラウザでも画像全体を読み込むということも心に止めておいて下さい。
二番目に、アニメーション化gif画像は古いブラウザでステータス・バー上にメッセージを流す原因になります。これは多くのウェブ・ユーザーにとって大きな不満の種になります。ステータス・バーのフラッシングは、ハイパーリンクが何処へ導くのかを見ることを妨げます。
最後にこれらの因子を全て考えてもアニメーション化gif画像なら、以下の資料に当って下さい。
Home, Questions, Members, WDG Award, Reference, Design, Links
Copyright c 1996. 
All rights reserved.
日本語翻訳版覚書
この文書の原著は、Web Design Groupの
[Web Design Group- Image Use on the Web]
"http://www.htmlhelp.com/design/imageuse.htm" で、
翻訳許可を受けています。翻訳版は、翻訳からくる間違いがあり得ます。
Yasutaka Kato 加藤泰孝
<email:y.kato@personal.email.ne.jp>
<email:ykato-ind@umin.ac.jp>
