画像
画像の形式
Webで使える画像の形式には次のものがあります。
- JPEG（ジェイペグ）
- PNG（ピング）
- GIF（ジフ）
- SVG（エスブイジー）
一般的な拡張子はそれぞれ jpg，png，gif，svg です。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="https://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;
}
画像に文字を重ねることもできます：
<figure style="position:relative">
<img src="kirin.jpg" alt="きりん">
<p style="position:absolute; top:0px; left:65px;
font-size:80%; font-family:sans-serif;">かわいいきりんさん</p>
</figure>
かわいいきりんさん
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およびデバイス用に保存」で「カラープロファイルの埋め込み」をオフにして保存します。
次の二つの図は，左がAdobe RGBでICCプロファイルを含むもの，右がsRGBでICCプロファイルを含まないものです。お持ちのブラウザで見て比較してください。
背景画像
背景画像を入れる簡単な方法は <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>
