とほほの画像入門

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

■ 目次

画像ファイルのいろいろ

GIFファイル

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

◆ PNGファイル

GIF画像でUnisysの特許問題があることから、GIFに代わるフォーマットして定められたのがPNG(ピング)です。拡張子は .png です。HTML などの標準化を行っている W3C という団体が規定しました。Internet Explorer 4.0 以降で対応しています。

◆ JPEGファイル

写真などでよく使用される形式です。拡張子は .jpeg や .jpg などです。

◆ BMPファイル

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

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

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

◆ ペイントで作る

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

◆ お絵描きソフトで作る

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

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

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

◆ 素材集を用いる

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

◆ プロに作ってもらう

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

◆ プログラムで生成する

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

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

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

ペイント系

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)
ペイント (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ファイルを連結して簡易的な動画を実現するものです。基本的には2コマの動画を作成するには2倍の、3コマは3倍のファイルサイズとなります。

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-2006 杜甫々
http://www.tohoho-web.com/wwwimage.htm