## とほほの画像入門

トップ > とほほの画像入門

#### ■ 目次

- 画像ファイルのいろいろ
- 画像ファイルを用意しよう!!
- お絵描きソフトのいろいろ
- BMPをGIFに変換しよう!!
- 透過GIFを作ろう!!
- インタレースGIFを作ろう!!
- GIFアニメーションを作ろう!!
- プログレッシブJPEGを作ろう!!
- 減色しよう!!
- 画像ファイルに関する注意
- クリッカブルマップに挑戦しよう!!

#### ■ 画像ファイルのいろいろ

##### ◆ GIFファイル

現在、ウェブページで最もよく利用されているのが GIFファイルではないでしょうか。拡張子は .gif です。256色しか扱うことができませんが、透過GIFやアニメーションGIFなど、ホームページに魅力的な機能がサポートされています。CompuServ（現在は AOL に吸収）という米国のパソコン通信会社が定めたフォーマットです。Unisys社による特許問題によって、GIF を扱えるフリーソフトが一時姿を消していましたが、2004年に特許の有効期間が過ぎ、フリーソフトも復活しています。

- GIFフォーマットの詳細
- GIFの特許問題について

##### ◆ JPEGファイル

ウェブページに貼り付けられている写真画像などは、ほとんどがJPEG形式です。アイコンのような色数の少ない画像は GIFファイル、写真やCGのように色数の多い画像は JPEGファイルが適しています。

##### ◆ BMPファイル

Windows 標準の画像フォーマットです。「ペイント」などで作成した画像も通常は BMPファイルとして保存されます。しかし、ファイルサイズが無駄に大きく、BMPファイルに対応していないブラウザも多くあることから、ウェブページではあまり使用されません。GIFファイルに変換（後述）してから貼り付けるのが一般的です。

##### ◆ PNGファイル

GIF画像でUnisysの特許問題があることから、GIFに代わるフォーマットして定められたのがPNG（ピング）です。HTML などの標準化を行っている W3C という団体が規定しました。Internet Explorer 4.0、Netscape Communicator 4.04 以降で対応していますが、古いブラウザもまだ無視できない程度には利用されていることから、PNG の普及にはまだもう少し時間がかかりそうです。

#### ■ 画像ファイルを用意しよう

画像ファイルを用意する方法をいくつか紹介します。

##### ◆ ペイントで作る

「ペイント」は Windows に標準でインストールされているお手軽なペイントソフトです。Windows XP 以降のバージョンや、Microsoft Office のオプションをインストールしていると、ペイントでも GIF や JPEG の読み書きができるそうです。

- とほほママのペイントブラシテクニック

##### ◆ お絵描きソフトで作る

下記にいくつかのソフトを紹介していますので、参照してください。

- とほほの厳選ツール集(イメージ編)

##### ◆ デジタルカメラやスキャナを用いる

デジタルカメラもいろいろ出てきました。30万画素だとやはりちょっと悲しいですが、ホームページ作成には150万画素もあれば十分のようです。自分で紙に描いたイラストなどを読みこませたりするにはスキャナを用います。

##### ◆ 素材集を用いる

フリーや有料の画像集が数多くあります。ホームページで無料で配布されていたり、書店で素材集として売られていたり。リンクが必要とか商用利用は禁止など使用条件があるものもあるので注意して使いましょう。

##### ◆ プロに作ってもらう

商用に使うならプロに作ってもらうことも考えられます。1個1,000円とか1万円とか値段もいろいろのようですが。

##### ◆ プログラムで生成する

ちょっと特殊ですが、GD というライブラリを用いると、プログラムから画像ファイルを生成することができます。Unisys 特許のために、現在は PNG しかサポートしていないのが残念ですが・・・

- http://www.boutell.com/gd/

#### ■ お絵描きソフトのいろいろ

お絵描きソフトには大別して以下のような種類があります。ソフトによって得意な機能と不得意な機能があるので、自分の目的に合ったソフトを利用しましょう。

##### ◆ ペイント系

Windows の「ペイント」に代表されるように、ドット編集を行うお絵描きソフトです。ペンやブラシを駆使して線画や水彩画のような絵を仕上げていきます。ラスタ編集とも呼ばれます。ペイント、Hyper Paint、Pixia、D-Pixed などがこれに分類されます。

##### ◆ フォトレタッチ系

ドットの編集を行うという点ではペイント系と同様ですが、主な目的は写真の加工です。ぼかし、シャープ化などのフィルタ効果をサポートしているのが特徴です。Photoshop、Pixef などがこれに相当します。

##### ◆ ドロー系

四角や円や文字を描いたときに、四角は四角として、円は円として、文字は文字として再編集することができます。高さ、横幅、直径といった値を操作することからベクトル編集とも呼ばれます。Paint Shop Pro などがこの機能をサポートしています。

#### ■ BMPをGIFに変換しよう!!

BMPファイルをGIFファイルに変換する方法について説明します。（BMPファイルのファイル名だけを .bmp から .gif に変更してもファイル形式は変わりません。IE では表示することもできるみたいですが、Netscape など他のブラウザでは表示できません。）

##### ◆ ペイントで変換する

Windows 98 以降で Microsoft Office の拡張機能（カスタムセットアップから適切なグラフィックフィルタ）をインストールしている場合は、ペイントに GIF や JPEG の読み書き機能が追加されます。「名前をつけて保存」の時にファイルの種類で GIF を選びます。Windows XP からは標準で GIF / JPEG をサポートしています。

##### ◆ フリーソフトで変換する

Unisys 社の特許も有効期限を過ぎたため、GIF 画像を扱えるフリーソフトも増えてきました。「とほほの厳選ツール集(イメージ編)」を参照してください。

##### ◆ 有料のお絵描きソフトで変換する

Photoshop、PaintShop Pro などのお絵描きソフトを持っている場合は、これらのソフトで変換することができます。方法は簡単。BMPファイルを読みこんで、「名前をつけて保存」などのメニューから GIFファイル形式を指定して保存するだけ。

#### ■ 透過GIFを作ろう!!

透過GIFはGIFの画像の任意の一色を透明にするものです。透明にすることにより、白以外の背景に置いても白い余白を見えなくすることができます。（下の例では、白を透過色に指定すると目の部分も透過されてしまうので、透過色にしたい部分を赤色に塗って、赤色を透過色に指定しています。）

通常のGIF | 透過GIF
--- | ---

##### ◆ Photoshop 5.0 (Win/Mac)

[イメージ]→[モード]→[インデックスカラー] で画像をインデックスカラーモードにし、[ファイル]→[出力用プラグ]→[GIF89a書き出し...]で、＋印のついたスポイトで透過したい色をクリックして [OK] します。

##### ◆ Paint Shop Pro 4 (Win)

・Ver4では、[ファイル]→[名前を付けて保存] で [サブタイプ] に「Versiotn 89a」を選択、[オプション] から [背景色を透過色に設定する] をチェックしておきます。
・Ver5では、[カラー]→[透過色の設定] で [次のパレットインデックスを透過に設定する] を選択し、透過にしたい色の上でクリック。[カラー]→[透過表示] で格子模様になっている個所が透過となります。あとは [ファイル]→[名前を付けて保存] でGIFファイル保存。
・Ver6では、[ファイル]→[エクスポート]→[透過GIF]→[透過色]で設定します。

##### ◆ ペイント (Win)

Windows 98 + Office の環境であれば、[表示]→[キャンパスの色とサイズ]→[背景色に透明を使用] で可能。Windows XP のペイントも GIF を扱うことはできるが、透過GIF は作成できないみたい。

#### ■ インタレースGIFを作ろう!!

画像を表示する際にまず荒い画像を表示して、だんだんと鮮明な画像に変わっていく仕組みです。インタレースGIFを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。ここでは、各ツールの使用方法について説明します。

##### ◆ Photoshop 5 (Win/Mac)

[ファイル]→[出力用プラグ]→[GIF89a書き出し] で [インターレース] のチェックをオンにします。

##### ◆ Paint Shop Pro (Win)

[ファイル]→[名前を付けて保存] で [ファイルの種類]に[GIF - CompuServ] を、[サブタイプ]に[Version 89a - インタレース] を選びます。

#### ■ GIFアニメーションを作ろう!!

「GIFアニメーション」「GIFアニメ」「アニメGIF」「アニメーテッドGIF」などいろいろ呼ばれます。複数のGIFファイルを連結して簡易的な動画を実現するものです。基本的には２コマの動画を作成するには２倍の、３コマは３倍のファイルサイズとなります。

##### ◆ Giam (Win)

左側の [コマ表示窓] に画像ファイルをいくつかドラッグ＆ドロップし、[ファイル]→[名前を付けて保存]。CtrlやShiftキーを押しながらファイルを複数選択すれば、ウェイト時間なども一括で変更できるし、画像サイズを可能な限り小さくする（書き換えなくてもよい部分の画像を自動カットしてくれる）機能も備えているので、一番オススメ。Unisys社の特許問題のために一時期有料ソフトでしたが、2004年にフリーソフトとして復活しました。

#### ■ プログレッシブJPEGを作ろう!!

プログレッシブJPEGは、インタレースGIFのJPEG版みたいなもので、最初ぼんやりした画像が、次第に鮮明な画像が表示されるものです。ツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。

##### ◆ Photoshop 5 (Win/Mac)

[ファイル]→[複製を保存] で、[別名で保存] 欄を [JPG(*.JPG,*.JPE)] にして [OK]。[JPEGオプション] ダイアログで [プログレッシブ] をクリックして保存します。

##### ◆ Paint Shop Pro 7 (Win)

[ファイル]→[名前をつけて保存] で [JPEG - JFIF準拠(*.jpg, *.jif, *.jpeg)] を選んで [オプション] の [エンコーディング] で [プログレッシブエンコーディング] を選択します。

#### ■ 減色しよう!!

画像ファイルは減色することにより、ファイルサイズを小さくすることができます。写真やグラデーションのかかった画像は、いろいろトライしてみて、減色と見栄えのバランスを試してみましょう。

#### ■ 画像ファイルに関する注意

##### ◆ 画像ファイルは小さく

あたりまえのことかも知れませんが、画像ファイルはできるだけ小さくしましょう。無駄な画像や動画はカットしたり、減色したりしてみてください。

##### ◆ 表示サイズを小さくしても表示速度は変わらない

imgタグのwidthやheight属性で見かけ上の表示サイズを小さくしても、ファイルサイズは変わらないので表示速度は変わりません。画像を縮小表示する際は、お絵描きソフトなどで、ファイル自体の大きさを小さくしてから貼り付けましょう。

##### ◆ 256色でのチェックを忘れずに

Windowsの場合、16bit High Color モードでは奇麗に見えていた画像も、256色モードで見て見ると全然違った配色になってしまいがっかりすることがあります。特に背景はわずかの色の変化が文字の読みやすさに多大な影響をあたえるので、一度256色モードでのチェックをお勧めします。基本16色パレットと216色パレットに存在する色のみを使用して作成すると、フルカラーモードでも256色モードでも変化の無い画像を作成することができます。

##### ◆ height、widthをつけましょう

<img>タグを使用する時はできるだけheight、width属性をつけるようにしましょう。これをつけるだけで、体感的な読み込み速度が違ってきます。

##### ◆ ALTをつけましょう

<img> タグには alt属性で名前をつけるようにしましょう。テキストのみの表示でブラウザを使用している人や、画像ファイルの読み込み途中でも、画面全体のレイアウトや構成が把握できるようになります。

##### ◆ 同じ中身のファイルを別の場所に置かない

中身が同じ画像ファイルは複数の場所には置かないようにしましょう。同じ中身でも場所が異なるとブラウザは再度読みにいきますが、同じ場所の画像であればキャッシュされたデータを表示するはずです。

##### ◆ 背景画像に関するMac版Netscapeのバグ

Macintosh の一部機種で Netscape Navigator 3.02 以下のバージョンを使用している場合、かつ、32000色以上のモードで、64×64ピクセル未満の画像を貼り付けた場合、画像が真っ黒に見えることがあるそうです。

#### ■ クリッカブルマップに挑戦しよう!!

クリッカブルマップとは、ひとつの画像の中のクリックした場所によってジャンプ先を変更する機能です。クリッカブルマップを実現するには次のような方法があります。

##### ◆ サーバーサイドクリッカブルマップ

サーバーの種類によって若干方法が異なります。また、画面上のどこをクリックすればどこにジャンプするのかブラウザ側に明示できません。この方法は、私はあまり好きではないので、説明はしません。

##### ◆ クライアントサイドクリッカブルマップ

Netscape Navigator 2.0、Internet Explorer 3.0 以降では HTML文書の中にクリッカブルマップの指定を行うことができます。詳しくは <map> タグの説明を参照してください。

##### ◆ 単に絵を並べる方法

<img> タグで均等の高さの矩形画像を隙間無く並べます。サーバーやブラウザの種類を問わない、alt属性によってテキストモード表示でも意味が分かるなどの利点もあり、オススメです。タグとタグの間（> と < の間）にスペースや改行を入れると隙間が空くことがあるので、img と border の間で改行しています。

    <table cellspacing=0>
    <tr>
    <td><a href="aa.htm"><img
           border=0 src="aa.gif" alt="aa" width=40 height=40></a></td>
    <td><a href="bb.htm"><img
           border=0 src="bb.gif" alt="bb" width=40 height=40></a></td>
    </tr>
    <tr>
    <td><a href="cc.htm"><img
           border=0 src="cc.gif" alt="cc" width=40 height=40></a></td>
    <td><a href="cc.htm"><img
           border=0 src="cc.gif" alt="dd" width=40 height=40></a></td>
    </tr>
    </table>

Copyright (C) 1996-2001 杜甫々
http://www.tohoho-web.com/wwwimage.htm