自分で作るホームページにお気に入りの画像を表示したいな、でもどうしたらいいんだろう？自分の好きなことを形にする自作のホームページ、とっておきの写真を掲載したいですよね。
特別な技術がなくても、ホームページで画像を表示することはできます。HTMLで画像を挿入するために使うのが<img>タグです。
今回はHTMLで画像を表示・挿入する<img>タグの使い方について解説します。画像について一緒に覚えていきましょう。
WEBでよく使う画像の種類
まずは、画像の種類について。WEBでは主に4つの形式の画像がよく使われています。
これらの画像は大きく分けると、ビットマップ（ラスター）画像とベクター画像の2つに分類されます。
ビットマップ（ラスター）画像とベクター画像の特徴を簡単にまとめて比較した表が下記です。
| ビットマップ（ラスター）画像 | ベクター画像 |
|---|---|
| PNG、JPEG、GIF | SVG |
| 点の集合で構成 | 点や線や塗りの情報をコンピューターが計算して構成 |
| 拡大すると点が大きくなるので劣化する | 拡大しても劣化しない |
| 豊富な色数で表現できる | 情報を数値化しやすい単純な図形の表現に向いている |
では、WEBでよく使われる4種類の画像について、それぞれ詳しく見ていきましょう。
PNGとは？
PNG（ピング）とは、Portable Network Graphicsの略語です。
拡張子は「.png」。PNG-8、PNG-24、PNG-32の3形式があり、「PNG」とだけ言う場合は、通常フルカラーで透過可能な「PNG-32」を意味します。
- ビットマップ（ラスター）画像
- 色数：1677万7216色（フルカラー）
- 透過：対応可能
- 圧縮方法：可逆圧縮（保存を繰り返しても劣化しない）
PNGは、透過のある高精度なアイコンや画像、ロゴなどによく使われています。
JPEG（JPG）とは？
JPEG（ジェイペグ）とは、Joint Photographic Expert Group imageの略語です。
拡張子は「.jpg」もしくは「.jpeg」。画像の圧縮率を細かく設定できるため、ファイル容量を軽くすることができる特徴があります。ただし、圧縮率を高くするほど画像が劣化するので、圧縮率と画質のバランスに注意が必要です。
JPEG（JPG）の主な特徴は
- ビットマップ（ラスター）画像
- 色数：1677万7216色（フルカラー）
- 透過：対応していない
- 圧縮方法：不可逆圧縮（保存するたびに画像が劣化する）
JPEG（JPG）は、写真やグラデーションの表現によく使われています。
GIFとは？
GIF（ジフ）とは、Graphics Interchange Formatの略語です。
拡張子は「.gif」。アニメーションが可能なことが特徴です。
GIFの主な特徴は
- ビットマップ（ラスター）画像
- 色数：256色
- 透過：1色の透過には対応、半透明には対応していない
- 圧縮方法：可逆圧縮
GIFは、アニメーションが必要な場合に使われています。
SVGとは？
SVG（エスブイジー）とは、Scalable Vector Graphicsの略語です。
拡張子は「.svg」。SVGは、点と線でコンピューターが計算して表現する画像なので、拡大・縮小しても画像が劣化しない特徴があります。
SVGの主な特徴は
SVGは、ロゴやアイコンによく使われています。
HTMLで画像を挿入する方法
ホームページにHTMLで画像を表示するためには、<img>タグを使って挿入します。
上記のようにHTMLを書いて挿入するのですが、大事なことがたくさんありますので、ひとつずつ解説していきます。
<img>タグとは？
HTMLで画像を表示するためには<img>タグを使います。imgは「image」の略です。
しかし、コード内に<img>と書くだけでは画像を表示できません。
<img>タグには属性を追加しなければならないなど、大切な原則があります。
- src属性で場所を設定する
- alt属性で画像の内容を記述する
- 終了タグはつけない
src属性とは？
src属性とは、画像データの置いてある場所を指定するものです。srcは「source」の略です。
<img>タグのsrc属性で指定している属性値のことを「パス」といいます。<img>タグを使うときには、ファイルを参照するパスについて知る必要があります。ファイルパスについては、のちほど詳しく解説します。
alt属性とは？
alt属性とは、WEBブラウザで画像がうまく読み込めなかったときに、画像に代わって画像がどんな内容なのかを説明するテキストを指定するものです。
altは代替テキストを意味する「alternative text」の略です。
scr属性とalt属性以外の属性について
scr属性とalt属性のほかに、画像の横幅をピクセルで指定するwidth属性と、画像の縦の高さをピクセルで指定するheight属性があります。
しかし近年では、ホームページを見ている人のデバイスの幅に合わせて画像のサイズをCSSで指定して変えることがほとんどなので、htmlでのサイズ指定は省略されることが多くなっています。
HTMLのwidth属性・height属性を省略して、CSSでサイズを何も指定しなかった場合、画像は元のサイズのままで表示されます。
ファイルパス・相対パスと絶対パスって何ですか？
パスとは「Path（経路）」のこと、ファイルパスは「ファイルへアクセスするための経路」のことです。
<img>タグを使ってsrc属性で指定する属性値の「パス」には、相対パスと絶対パスの2種類で記述することが可能です。
相対パスとは？
相対パス（relative path）は、現在の自分の場所（たとえば「index.html」）から見たファイルの場所を参照する書き方のことです。
上記の画像のように「index.html」と同じ階層にある「images」フォルダの中に、ホームページに表示したい画像「sora.png」がある場合、「"images/sora.png"」と属性値を記述することで、imdex.htmlと同じ階層にあるimagesのフォルダの中からsora.pngを呼んできてね、という指示を出します。
呼び出したい画像の保存場所を後から変えてしまうと、リンク切れを起こしてしまうので注意が必要です。
絶対パスとは？
絶対パス（absolute path）は、絶対に変わらないURLをすべて記述します。
外のサイトから画像を持ってきたい場合（負担軽減のために画像のみを別サイトに置いて管理しているなど）や、WordPressのようなCMSでのパス指定などに使われます。
絶対パスの書き方は、たとえば以下のようになります。
<img>タグを使ってHTMLで画像を挿入しよう！
それでは実際にhtmlで画像を表示します。
まず、デスクトップに「images」という名前のフォルダを新規作成し、imagesフォルダの中に画像を1枚保存してください。画像の名前は半角英数字でつけます。
下記のhtmlを、Visual Studio Codeで書きましょう。名前はtest.htmlにしてください。
今回は、画像の保存場所の属性値は相対パスで記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale1.0">
<title>画像を表示する</title>
</head>
<body>
<h1>画像を表示する練習</h1>
<img src="images/(半角英数字の画像の名前.拡張子)" alt="(画像の説明テキスト)">
</body>
</html>
画像の表示はうまくできたでしょうか？
画像が表示されないときは、altが「art」になっているなどをよくやりがちです。たった1文字の記述ミスでエラーが出て失敗してしまいます。落ち着いてゆっくりとHTMLを書きましょう。
まとめ
今回はHTMLで画像を表示・挿入する<img>タグの使い方について解説しました。
相対パスや絶対パスの部分などは、文字で読んだだけではわかりづらかったかもしれませんが、実際にHTMLを書いていくうちにきっと慣れていきますよ。
今回は説明しませんでしたが、画像のサイズの変更や表示する位置については、CSSで記述します。画像をおしゃれに切り抜いて挿入することや、薄くぼかして表示するのもCSSでできます。
CSSについても、これから一緒に少しずつ覚えていきましょう。
