画像

画像の形式

Webで使える画像の形式には次のものがあります。

JPEG（ジェイペグ）
PNG（ピング）
GIF（ジフ）

一般的な拡張子はそれぞれ jpg，png，gif です。

PNGやGIFはセル画のような絵，JPEGは写真などのフルカラー画像に向いています。WindowsのBMP形式の画像は使わないようにしましょう。

いったんBMP形式で保存した画像 kirin.bmp のファイル名を kirin.jpg に直したところで，BMPからJPEGに変換されるわけではありません。画像を扱うソフト（Windowsの「ペイント」や，GIMP，Photoshopなど）で読み込んで保存しなおす必要があります。

Webで使うためには，ファイル名は英数字と - や _ に限りましょう。

画像のタグ

画像は <img src="ファイル名" alt="文字情報" /> のようなタグで埋め込みます。ただし，画像はインライン要素なので，必ずブロックレベル要素（p や div など）の中に書きます。

例：

<p><img src="kirin.jpg" alt="きりん" /></p>

次のように図が入ります。

きりん

文字情報は，画像検索のキーワードとして，および画像を表示しないブラウザ（音声ブラウザも含めて）が画像の代替として使います。すべての人が画像を表示している（見える）わけではありませんので，必ず文字情報を付けましょう。文字情報を持たない単なる飾りの絵なら，alt="" のように空文字列にしておきます。

次のように画像の大きさをピクセル単位で指定すると，図を読み込む前に図の表示位置が決まるので，表示の途中でレイアウトが変わることを防げます。

<img src="kirin.jpg" alt="きりん" width="253" height="338" />

図の位置指定

図をさきほどのように

<p><img src="kirin.jpg" alt="きりん" /></p>

のようにして入れると，左寄せになって，その右側に空白ができてしまいます。

きりん

これを右揃えにして，その回りに本文を回り込ませてみましょう。それにはいくつかの方法がありますが，少数の画像なら，次のようなスタイルを臨時に指定することで対処できます。

<p><img src="kirin.jpg" alt="きりん"
        width="253" height="338"
        style="float: right; margin: 0 0 1em 1em;" /></p>

図が右に寄り，その左側を文章が回り込みます。ここで margin: 上右下左 は図のマージン（余白）を指定するものです。1em というのは全角1文字分の長さです。0 の場合は単位は不要です。

右揃えしたい画像が複数ある場合は，スタイルシートで例えば migi という名前のクラスを定義しておくと便利です。

.migi {
  float: right;
  margin: 0 0 1em 1em;
}

こうしてから，次のようにしてこのクラスを使います。

<p><img class="migi" src="kirin.jpg" alt="きりん" /></p>

他の要素を確実にこのような図の下に置きたい場合は，その要素に clear: both というスタイルを指定します。たとえば <h1> などが右置きの図と重ならないようにするには，

h1,h2,h3,h4,h5,h6 {
  clear: both;
}

としておきます。

ついでに，白い背景の画像は border:1px solid というスタイル指定で枠を作っておくとよいかもしれません。

画像によるリンク

をクリックすると三重大学ホームページに飛びます。

<p><a href="http://www.mie-u.ac.jp/"><img src="mieu.gif" alt="三重大学" /></a>
をクリックすると三重大学ホームページに飛びます。</p>

上の例のように画像を <a ...>...</a> の中に入れて画像をクリックするとリンクに飛ぶようにできます。

この際に不要な外枠が現れるのを防ぐには，スタイルシートで次のように指定しておきます：

img { border-style: none }

ちなみに，上の画像は自然の位置から15ピクセルほど下に表示しています。このために，

<img src="..." alt="..." style="position:relative; top:15px" />

のようにスタイルを指定しています。position:relative は相対位置の意味で，top:15px は上からの位置が15ピクセルということです。

Web用画像の作り方

画像を編集するソフトとしては，Windows に付いている「ペイント」のほか，オープンソースの GIMP（ギンプ），プロ仕様のものとしては Adobe Photoshop が有名です。

色の管理には注意が必要です。よく使われる色空間としては，現在広く使われているsRGBと，より広い色域を持つAdobe RGBがあります。色空間が違えば，同じRGB値でも，見える色は違います。値と色との対応表を「ICCプロファイル」という形式で画像に埋め込むことがあります。しかし，IEなどの古いブラウザはICCプロファイルを無視して，すべてsRGBの色空間で表現してしまいます。このため，Web用の画像はICCプロファイルを埋め込まず，標準的なsRGBの色空間で，ガンマ値2.2，色温度6500KというWindowsの標準的な設定で保存するのが一般的です（Macの伝統的なガンマ値は1.8で，グラフィックデザイナーたちは色温度を5000Kに設定していましたが，最近ではWindowsと同じ値に設定するのが一般的です）。Photoshopでは「ファイル＞Webおよびデバイス用に保存」で「カラープロファイルの埋め込み」をオフにして保存します。

ICCプロファイルによるカラーマネージメントにデフォルトで対応したブラウザとしては，SafariやFirefox 3.5以上があります。Firefoxについては，アドレスバーに about:config と打ち込んで表示される gfx.color_management.* で設定が変えられます。特に gfx.color_management.mode についてお調べください。Google Chromeはこれを書いている時点ではMac版だけ対応しているようです。

次の二つの図は，左がAdobe RGBでICCプロファイルを含むもの，右がsRGBでICCプロファイルを含まないものです。お持ちのブラウザで見て比較してください。

画像について参考になるサイト

奥村晴彦

Last modified: 2011-08-10 14:45:35