画像

画像の形式

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

一般的な拡張子はそれぞれ jpgpnggifsvg です。SVGはテキストですので,HTML5の中に直接書くこともできます。

PNGやGIFはセル画のような絵,JPEGは写真などのフルカラー画像に向いています。SVGはベクトル形式ですので,拡大してもギザギザにならないのが特長ですが,古いブラウザでは表示できません。なお,WindowsのBMP形式の画像は使わないようにしましょう。

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

Webで使うためには,ファイル名は半角英数字と -_ に限るのが安全です。全角ファイル名はやめましょう。

画像のタグ

画像は <img src="ファイル名" alt="文字情報"> のようなタグで埋め込みます。画像は一つの大きい文字として扱われます。HTML5では body 直下に(p などに入れずに)書くことが許されました。

例:

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

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

きりん

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

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

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

図の位置指定

図をさきほどのように

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

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

きりん

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

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

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

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

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

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

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

他の要素を確実にこのような図の下に置きたい場合は,その要素に 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ピクセルということです。

HTML5のfigureとfigcaption

HTML5では次のように図とそのキャプション(説明)とをマークアップします。

<figure>
<img src="kirin.jpg" alt="きりん">
<figcaption>かわいいきりんさん</figcaption>
</figure>
きりん
かわいいきりんさん

キャプションを中央揃えにしたい場合は,次のようなスタイルシートを用意しておきます。

figcaption {
  text-align: center;
}

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やIEも新しいものは対応したようです。

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

Adobe RGB with ICC profile sRGB without ICC profile
Adobe RGB(ICCプロファイルつき)とsRGB(ICCプロファイルなし)

追記:Webブラウザのカラーマネジメント対応まとめというすばらしいまとめを教えていただきました。

背景画像

背景画像を入れる簡単な方法は <body><body style="background:url(ファイル名)"> にすることです。デフォルトでは画像を反復して敷き詰めます。反復しないようにするには <body style="background:url(ファイル名) no-repeat"> とします。

このページの右上に固定した画像は <body style="background:url(ファイル名) no-repeat right top fixed"> のようにして入れました。

(おまけ)画像素材の入手法

Webページで使う画像素材を無料で入手するには,Flickr(フリッカー)のような写真投稿サイトでCreative Commons(クリエイティブ・コモンズ)ライセンスの画像を見つけるのが一つの方法です。

Flickrの検索でライセンスを指定して検索してみましょう。適当な大きさにリサイズして使います。Creative Commonsライセンスであれば,原作者へのクレジットを付ければ,利用の際に許諾を得る必要はありません。条件(営利目的の利用が可能かどうか,など)は確認しましょう。

原作者へのクレジットは,例えば次のように付けるとよいでしょう。

<figure>
  <img src="8757157186_b30da0c613_z.jpg" alt="福島県浜通り">
  <figcaption><a href="https://www.flickr.com/photos/h_okumura/8757157186">photo by h_okumura</a></figcaption>
</figure>
福島県浜通り
photo by h_okumura

Last modified: