画像

画像の形式

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

一般的な拡張子はそれぞれ jpgpnggif です。

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

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

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

画像のタグ

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

例:

<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:52:52