HTMLに画像を挿入する方法

Webページでは、テキストだけでなく画像も表示できます。

本ページでは、HTMLに画像を挿入する方法について説明します。また、利用できるファイル形式や、横幅と高さを指定する方法についても説明します。

画像を表示する

ブラウザでは、以下のように画像を表示することができます。

画像を表示するためには、img要素を使います。以下は、例です

【HTMLでのimg利用例】

<img src="ファイル名" alt="画像の説明">

赤字部分は、保存したファイル名を拡張子含めて記述します。例えば、test.png(拡張子png)などです。imagesフォルダに保存している場合は、images/test.pngとなります。

青字部分は、画像の説明です。必須ではありませんが、画像が表示できない時の代わりに表示されたり、読み上げソフトで読まれたりします。検索にも関係するため、必ず記述した方が良いと言えます。画像が飾りだったりして意味を持たない場合は、alt=""とすることもあります。

img要素は、終了タグを持ちません。このような要素を、空要素と言います。

ブラウザで表示できる画像の(img要素で使える)ファイル形式には、GIF、JPEG、PNGなどがあります。以下は、表示例です。

最初は、GIF(Graphics Interchange Format)形式です。

JPEG(Joint Photographic Expert Group)形式です。

PNG(Portable Network Graphics)形式です。

GIF形式は、他の形式と比較して使える色の数が少ないため、荒い画像になります。各形式の特徴は以下の通りです。

GIF形式: 使える色は256色に制限されますが、ファイルサイズは比較的小さくできます。拡張子は、gifです。透過処理ができるため、一部を透明にして背景を表示することもできます。また、アニメーションを作れるため、簡単に動くバナーを作ることも可能です。
JPEG形式: 使える色は16,777,216色で、拡張子はjpg、jpegなどです。圧縮率が高いため写真を保存するのに適していて、デジカメなどでも採用されている形式です。非可逆性のため、編集などを繰り返すと画質が劣化します。
PNG形式: 使える色は16,777,216色で、拡張子はpngです。写真など高画質のものを保存するとJPEG形式よりファイルサイズが大きくなります。可逆性のため編集を繰り返しても、画質の劣化がありません。また、GIF同様に透過処理が出来ます。

上記の特徴から、写真はJPEG形式、編集するものはPNG形式を使うのが良いと思われます。最近、GIF形式はほとんど使われません。

Windowsに標準でインストールされているペイントでは、保存する時にJPEG、PNG、GIFなどを選択して保存できます。

以下は、画像の横幅と高さを指定した例です。

【imgでwidthとheigthを指定する例】

<img src="ファイル名" alt="画像の説明" width="140" height="70">

上記で、画像が横幅140px、高さ70pxで表示されます。

なお、横幅と高さを指定しなくても、画像はそのサイズどおりに表示されます。本来の画像からサイズを変えると、画像がぼやけたり歪んだりするので留意が必要です。

画像サイズが大きいと、表示されるまでに時間がかかることがあります。その際、画像が少しずつ表示されて、ページ全体のレイアウトも少しずつ変わることがあります。heigthとwidthを指定しておくと、画像がすべて表示される前に領域を確保するため、レイアウトが変わることがありません。