画像のお話

画像のお話

ホームページを見た目に楽しく、アピールするつくりにするには画像データの使用はもうお約束の世界ですね。
HTMLとは、ブラウザーに理解させるできるように表示や実行内容を指定するプログラムだと書きました。
INTERNETで情報を発信するには、画像も「ブラウザに理解可能な形」でなければなりません。
画像のデータ(保存)形式には、Windowsで標準のBMP(ビットマップ)をはじめとして、色々な形式がありますが、
通常ブラウザが扱うことのできる画像はgif， jpeg， pngの三つの形式です。

この3つの形式はどんな風に違うのでしょうか。たとえば、音楽を例にとると、カセットテープ、CD、MD、レコードと色々な録音形式がありますが、その媒体に適したプレーヤーで再生すれば音は同じように聞こえますね。
画像データの3つの形式も同様。ブラウザに表示できると言う点で同じなのです。

【gif】
特にイラストデータの保存に向いた画像ファイルの形式です。gif形式の画像ファイルには「.gif」という拡張子が付いています。扱える色数は256色ですが、圧縮度が高く軽いデータが作れるのが特徴です。
また透過gifとかアニメーションgifのようなアピール度の高いイメージデータをサポートしているのもホームページでの使用に欠かせないアイテムになっている理由に挙げられます。多分、(調べてないけど）世の中のホームページにあるイメージのほとんどはgifなのではないでしょうか。
もともとはInternetの前に普及していたパソコン通信の世界でのデータ共有のために、当時のCompuserve社が指定した標準形式だと聞くと歴史を感じるのではないでしょうか。
難点は、gifを扱うことのできるフリーソフトの数が少ないということです。これはgifの圧縮技術にはUnisys社が取得している特許を侵害することがあるのが理由です。

【jpeg】
この形式は写真の保存に向いています。圧縮率を指定することができるので、高画質(=ファイルサイズ大)、や低画質(=ファイルサイズ小)などのデータを作ることができます。
gifと違って色数を多くサポートしているので、写真やCGを扱うのに適しているのです。

【png】gifの項で触れたUnisysの特許問題を回避するため、GIFに代わるフォーマットして定められたのがPNG（ピング）です。HTMLの標準化団体である W3Cの規定で、最近のブラウザではサポートされていますが(ＩＥ・NSともV4以降)。まだあまり浸透しているとは言えそうもありません。

さて、画像を扱うためのソフトには以下のようなものが広く使われています。
■Photoshop
フォトレタッチ系は最強だけどペイント系ツールに弱い→プロのデザイナーはたいていこれですかね??
■Paint Shop Pro
ペイント系もフォトレタッチ系もドロー系もまあまあ→Jun*Mamaは仕事でもこれを使っています。

いずれもさまざまな画像形式をサポートしていて、変換もできますので
たとえば、Windowsのペイントブラシでドットで作った絵を変換してINTERNETで公開なんてことができます。
ただで変換したい場合には、IEのおまけでついてくるFrontPageの変換機能を使うことができます。

透過gifやアニメーションgifのお話はまた今度。

最後に。
ホームページ作成上の原則の一つとして小さく作るということがいえます。
ページの読み込み速度はアクセスする人の回線状況に依存するからです。
INTERNETの世界のバリアフリーのため、というとわかりやすいかもしれません。
見る人に優しい画像にするために以下に気をつけましょう。
■　ファイルサイズを小さくするには、解像度を下げる、色数を減らす→見栄えとの妥協点を探しましょう
■　HTML上で表示サイズを小さくしても読み込み速度は変わりません。画像そのものファイルサイズを小さくしましょう。
■　画像を表示するタグの中にあるHight， Widthは必ず指定しましょう。これは画像を表示する範囲をブラウザが理
解することで、テキストデータ部分の先読みを可能にするので結果としてページの表示速度が速いのです。
■　HTMLの項で書いたALTの指定も忘れずに。テキストモードで見ている人への配慮です。