HTMLの画像（imgタグ）の使い方・コンプリートガイド

catnose · 2020/02/24 に最終更新

HTMLの<img>イメージタグは、画像を表示するために使います。このページでは<img>の使い方やHTMLでの画像の取り扱い方について詳しく解説します。

このページの目次

imgタグの基本
HTMLで画像を使いこなす
画像のサイズ
CSSで画像の配置を決める
CSSで画像のスタイルを変更

imgタグの基本

imgタグの基本形

<img src="画像のURL" alt="画像の説明">

👆画像を表示するHTMLの基本形はこのようになります。

srcで画像のURL（どこから画像を読み込むか）を指定し
altに画像の説明文（何の画像か）を書きます。

<img src="https://catnose.me/learning/images/ogp.png" alt="コードキッチンのサムネイル画像">

img {
  display: block;
  width: 180px;
  margin: 0 auto;
}

閉じタグは書かない

<img></img>のような閉じタグは不要です。<img>とだけ書くようにしましょう。

src属性の書き方

<img>タグを使うときはsrcソース属性で画像のURL（画像の置いてある場所）を指定します。URLはおもに次の2通りの書き方をします。

✍️URLの書き方

絶対パス：https://example.com/test.jpgのような完全なURL
ルートパス：/test.jpgのようにスラッシュから始まる、今いるサイトのいちばん上からの位置

たとえば、あなたが今https://abc.comというサイト上のどこかのページを見ているとします。
この場合、https://abc.com/test/test.jpgというURLは/test/test.jpgと省略して書けます。
https://abc.com/a/b/c/dというURLは/a/b/c/dと書けます。

このように同じサイト上のファイルやページへのリンクは、https://abc.comを省略して/から書きはじめることができるのです。

このような書き方をルートパスといいます。

ルートパスのメリット

すっきりとして見やすい
ドメインを変更したときに書き換えの手間が省ける（たとえばexample.comからabc.comへ移行してもsrcを書き換える必要がない）
相対パス（今いるパスからの相対的な位置。詳細は割愛🙏）と比べても、パッと見たときに位置が分かりやすい

<!-- ↓絶対パス -->
<img src="https://catnose.me/learning/images/ogp.png" alt="略">
<!-- ↓ルートパス -->
<img src="/learning/images/ogp.png" alt="略">

img {
  width: 49%;
}

👆絶対パスで指定した<img>と、ルートパスで指定した<img>を並べてみました。どちらも読み込んでいる画像ファイルは同じです。

alt属性の書き方

altオルト属性は、次の2つの点からとても重要です。

アクセシビリティ向上
目の不自由な方が使う読み上げソフトで「画像の内容を表すテキスト」として読み上げてくれる
SEO対策
Googleなどの検索エンジンが画像の内容を理解するためのヒントになる

また、画像の読み込みに失敗したときに、altに指定されているテキストを表示してくれます。

画像の内容を表す具体的な説明を書く

altの書き方の例として使う画像

altには、読むだけで何の画像かざっくりと分かるような、具体的な説明を書きます。
たとえば、この写真であればalt="水をガブ飲みするマッチョの写真"などが最適でしょう。

装飾のための画像ならaltは省略してOK

装飾のため・見栄えのための画像であればalt=""のように何も書かなくてOKです。たとえば、見出し前につけるちょっとした画像や、ページを華やかに見せるためのアイキャッチ的な画像にaltを指定する必要はありません。

😿間違ったaltの書き方

以下のようなaltテキストは避けましょう。

「example.jpg」のようなファイル名
「画像」のような抽象的な説明文

👇こちらでalt属性の書き方の事例をたくさん見ることができます。気になる方はぜひチェックしてみてください。

📙

関連するページを読む

alt属性の良い事例 - 情報バリアフリーポータルサイト

imgタグが対応している画像形式

JPEG・PNG・SVG・GIF・WebP・TIFF・ICO・BMP・APNG

👆こちらは<img>で使用できる画像の形式です。理解しておきたいのは以下の5つでしょう。

形式	特徴
JPEG	写真など、色数の多い画像向け
PNG	イラストや図表など、色数の少ない画像向け。背景を透過できる
GIF	おもにアニメーション画像で使う
SVG	どれだけ拡大してもぼやけない。ロゴ画像やアイコンに最適
WebP	次世代の画像形式。軽量で高画質。未対応ブラウザのためpitcureタグを合わせて使う

GIFアニメーションを使う例

<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582605006/posts/rpqykkoasegwhdpgmwev.gif">

img {
  display: block;
  width: 100px;
  margin: 0 auto;
}

👆GIFアニメーション画像（◯◯.gif）も、他の形式の画像と同じように使用できます（この例ではcliply.coで配布されているGIFを使用させていただきました）。

動画はvideoタグで

.mp4形式などの動画を埋め込むときには<video>タグを使いましょう。

関連するページを読む

HTMLのvideoタグで動画を埋め込む

HTMLで画像を使いこなす

画像リンクをつくる

画像をリンクにしたいときは、アンカータグ（<a>）の中に画像（<img>）を入れます。

<a href="https://catnose.me">
  <img src="/learning/images/ogp.png" alt="リンクの説明">
</a>

img {
  width: 175px;
}

👆画像をクリックするとページが遷移することが分かります。サイトのロゴ画像なんかはリンクにすることが多いですね。リンクの中に<img>を入れるときはalt="◯◯"をきっちりと書くようにしましょう。

関連するページを読む

HTMLのリンク（aタグ）の使い方

記事の中で画像を使うときはpタグで囲む

ブログやニュースの記事などで、文章の流れの中で画像を使うときには段落タグ（<p>）の中に<img>を入れるようにしましょう。

関連するページを読む

HTMLの段落（pタグ）の使い方

<p>このサイトのロゴ画像はこちらです。</p>
<p><img src="/learning/images/ogp.png" alt="コードキッチンの画像"></p>
<p>このロゴの意味は…</p>

img {
  width: 175px;
  display: block;
  margin: 0 auto;
}

👆このように<p><img ...></p>とします。画像が記事を構成する一部の場合、画像も1つの段落とみなされるためです。

loading="lazy"で画像を遅延読み込み

HTML loading="lazy"

<img src="..." alt="..." loading="lazy">

👆<img>にloading="lazy"ローディングレイジーを指定すると画像が遅延読み込みされます。ざっくりというと必要になるまで画像が読み込まれないため、ページの表示速度が上がります。
開いた瞬間に表示したい画像以外はすべてloading="lazy"を指定しても良いでしょう。

✍️loading="lazy"は一部のブラウザでのみ対応しています（ブラウザ対応状況)。
とはいえ未対応ブラウザでは無視されるだけなので、気にせず使用してしまえばOKだと思います。

title属性でツールチップを表示

カーソルを画像にしばらくあてると…

👆<img>タグにtitle="表示テキスト"を指定すると、画像にマウスカーソルをしばらくのせたときにテキストが小さく表示されます。

<img src="/learning/images/ogp.png" alt="..." title="コードキッチンの画像だよ！">

img {
  width: 175px;
}

ただし、title属性のテキストが表示されるのは一部のブラウザだけです。基本的にiOSやAndroidのモバイル端末では役に立ちません。スマホユーザーが多い現在ではあまり頼らない方が良いでしょう。

画像のサイズ

ここからは画像のサイズの変え方について解説します。

widthとheight属性で幅と高さを指定する

<img>タグでは、width（幅）とheight（高さ）を指定できます。

<img src="/learning/images/ogp.png" alt="..." width="200" height="105">

👆このように<img>タグ内で直接サイズを指定します。width="200"、height="105"なので、画像の幅は200px、高さは105pxになります。ポイントは数字だけを記入できるという点です。

🙅これは間違い

width="auto"（使えるのは数値だけ！）
width="200px"（pxはつけない！）
width="100%"（%は使えない！）

画像の幅と高さはCSSでも指定できる

<img>の幅や高さは、CSSのwidth・heightプロパティを使って指定することもできます。CSSなら「px」だけでなく「%」などの相対的な単位も使用できます。

<img src="/learning/ogp.png" alt="..." width="200" height="105">

img {
  width: 100%;
  height: auto;
}

👆width: 100%なので、画像は横いっぱいに広がることになります。height: autoにより高さは自動で決められます。画像の横幅に応じて高さが決まるわけですね。

✍️メモ

<img width="◯◯" height="◯◯">に対して、CSSでも幅や高さを指定した場合、CSSの値が優先されます。
widthとheightのデフォルト値はautoです。とくに何も指定していない場合、幅と高さは自動で決められます。
CSSの方が柔軟にサイズを指定できますが、HTMLのwidth・height属性を使った方が表示パフォーマンス的には優れています。気づかないレベルかもしれませんが…。

画像がはみ出ないようにする

画像がブラウザからはみ出ている

width: 800pxのようにサイズを指定した場合、ブラウザの幅が画像の幅より小さい時などに、はみ出てしまいます。
「パソコンでは問題ないけど、スマホではみ出る」はWebあるあるです。

そこで活躍するのが、要素の最大幅を指定するmax-widthというCSSプロパティです。

<img src="/learning/images/ogp.png" alt="...">

img {
  width: 800px;
  max-width: 100%; /* 🖐大事! */
}

CSSでimg { max-width: 100% }と書いておくと、画像の最大幅が100%となり、横にはみ出ることがなくなります。「大きな画面では800pxで表示され、画像が収まりきらない画面では横ぴったりに表示されるようになる」というイメージですね。

😺100%という指定は、親要素（<img>を囲む要素）に対して100%という意味になります。たとえば親要素の幅が300pxであれば、width: 100%の画像も300pxになります。

画像が歪む（縦横比が崩れる）ときの対処法

<img src="/learning/images/ogp.png" alt="...">

img {
  max-width: 100%;
  width: 600px;
  height: 100px;
}

👆max-width: 100%を指定すると、画像がはみ出ないように幅が調整されます。つまりwidth: 600pxとしていても表示される画面が小さければ、画像の幅も小さくなります。
このときheightは指定されたままの高さになるので、画像の縦横比が崩れてしまいます。

対処法1： height: autoを指定する

<img src="/learning/images/ogp.png" alt="...">

img {
  max-width: 100%;
  width: 600px;
  height: auto; /* 👈 */
}

👆そのような場合、CSSでheight: autoと指定しましょう。max-widthを使っているときにも常に画像の縦横比が保たれます。

対処法2： object-fit: containで縦横比を保つ

別の方法として「object-fit: containを合わせて指定する」というものがあります。

関連するページを読む

CSSのobject-fitで画像をリサイズ/トリミング

<img src="/learning/images/ogp.png" alt="...">

img {
  max-width: 100%;
  width: 600px;
  height: 100px;
  object-fit: contain; /* 🖐 */
}

👆画像要素に対してobject-fit: containを指定すると、指定された幅と高さ（この例では600 x 100px）の中にぴったりと収まるように画像サイズが自動調整されます。

object-fit:coverで画像をトリミングする

<img src="/learning/images/ogp.png" alt="altテキスト" width="180" height="94">

img {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 🖐 */
}

👆CSSで画像要素に対してobject-fit: coverを指定すると、画像を好きなサイズにトリミング（切り抜き）できます。この例ではwidthとheightが150pxの正方形なので、正方形にはまるように画像の中心で切り抜かれます。

詳しくはこちらのページで解説しています。

関連するページを読む

CSSのobject-fitで画像をリサイズ/トリミング

CSSでレスポンシブに画像サイズを変える

メディアクエリという仕組みを使えば、画面の幅に応じてサイズを変更することができます。
スマホから見るときと、パソコンから見るときでサイズを変えられるというわけです。

😺画面幅に応じてスタイルやレイアウトを変えることを「レスポンシブに◯◯する」と言ったりします。

HTML

<img src="..." class="example-img" alt="...">

👆たとえばexample-imgというクラスを持つ画像のサイズを、画面幅に応じてレスポンシブに変えてみたいと思います。CSSでは.example-img { ~ }というように指定します。

CSS

/* デフォルトのサイズ */
.example-img {
  max-width: 100%;
  width: 200px;
}

/* 画面幅が800px以上のとき */
@media only screen and (min-width: 800px) {
  .example-img {
    width: 400px;
  }
}

/* 画面幅が1200px以上のとき */
@media only screen and (min-width: 1200px) {
  .example-img {
    width: 600px;
  }
}

👆この例では「800px以上の画面」と「1200px以上の画面」で画像の幅（width）を変えています。反対に「◯◯px以下の画面では…」にしたければmin-width: ◯◯pxをmax-width: ◯◯pxにすればOKです。

📙

関連するページを読む

メディアクエリーの初心者向けガイド- MDN

表示する画像自体を切り替える

レスポンシブ画像のデモ

<img>ではなく<picture>タグを使えば、画面幅に応じて別の画像を表示できます。
デモページ

HTML

<picture class="sample">
  <source srcset="画像1URL" media="(min-width: ○○px)" /><!-- ○○px以上で表示する画像 -->
  <source srcset="画像2URL" media="(min-width: △△px)" /><!-- △△px以上で表示する画像 -->
  <img src="画像3のURL" alt="サンプル画像"/><!-- それ以外の場合に表示する画像 -->
</picture>

👆このように書くと、画面幅に応じて、別の画像が表示されます。<source>は、条件分岐に必要な数だけ増やしましょう。画像は必要になったときに読み込まれるため、パフォーマンス上の心配は不要です。

詳しくはこちらのページで解説しています。

関連するページを読む

HTMLのpictureタグで画像をレスポンシブに切り替える

CSSで画像の配置を決める

中央寄せなどの画像の配置についても解説しておきます。

<div class="parent" style="height: 110px;background: #e7edf3;">
  <img src="/learning/images/ogp.png" width="150" height="78">
</div>

👆分かりやすくするために親要素（<img>を囲む要素）の背景をグレーにしました。このようにデフォルトでは画像は左寄せで表示されます。

画像を中央寄せ

方法1：親要素にtext-align: center

<div class="parent" style="height: 110px;background: #e7edf3;">
  <img src="/learning/images/ogp.png" width="150" height="78">
</div>

.parent {
  text-align: center; 
}

👆親要素にtext-align: centerを指定すると、中に含まれる画像は中央寄せになります。

方法2：imgだけで中央寄せする

<div class="parent" style="height: 110px;background: #e7edf3;">
  <img src="/learning/images/ogp.png" width="150" height="78">
</div>

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

👆画像に対して「display: block ＋左右のマージンをauto」というやり方もあります。この方法であれば、親要素にCSSを当てることなく中央寄せできます。

✍️メモ

display: blockの要素は、親要素にtext-align: centerをあてても中央寄せになりません。
display: blockの要素を中央寄せする簡単な方法は左右のmarginをautoにすることです。

縦横中央寄せ（ど真ん中に配置）

左右だけでなく上下にも中央寄せしたいときは、CSSのflexを使うのが楽です。

<div class="parent" style="height: 110px;background: #e7edf3;">
  <img src="/learning/images/ogp.png" width="150" height="78">
</div>

.parent {
  display: flex; /* flexに */
  align-items: center; /* 上下中央に */
  justify-content: center; /* 左右中央に */
}

👆画像を囲む親要素にこの3行をあてると、親要素のど真ん中に配置されるようになります。このCSSを使えば、画像以外でも中央寄せできるので覚えておくと良いでしょう。

画像を右寄せ

方法1：親要素にtext-align: right

<div class="parent" style="height: 110px;background: #e7edf3;">
  <img src="/learning/images/ogp.png" width="150" height="78">
</div>

.parent {
  text-align: right; 
}

👆親要素にtext-align: rightを指定すると、中に含まれる画像は右寄せになります。

方法2：imgだけで中央寄せする

<div class="parent" style="height: 110px;background: #e7edf3;">
  <img src="/learning/images/ogp.png" width="150" height="78">
</div>

img {
  display: block;
  margin-left: auto;
}

👆画像に対して「display: block ＋左のマージンだけをauto」というCSSをあてるやり方もあります。

CSSで画像のスタイルを変更

ここからはCSSで画像を装飾したり、フィルターをかけたりする方法を紹介します。

HTML

<img src="..." class="example-img" alt="...">

👆この例ではexample-imgというクラスを持つ画像（<img>）に対してCSSをあてていきます。

線をつける

<img src="/learning/images/ogp.png" class="example-img" alt="altテキスト" width="180" height="94">

.example-img {
  border: solid 2px #ffa81c;
}

👆画像に線をつける場合は、画像要素にborder: 線の種類太さ色コード;のように指定します。

影をつける

<img src="/learning/images/ogp.png" class="example-img" alt="altテキスト" width="180" height="94">

.example-img {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

👆影をつける場合は、画像要素にbox-shadow: x方向の大きさ y方向の大きさ広がり影の色のようにCSSを指定します。

画像を角丸に

<img src="/learning/images/ogp.png" class="example-img" alt="altテキスト" width="180" height="94">

.example-img {
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

👆画像の角を丸くするにはborder-radius: 影の大きさと指定します。

アバター画像のように丸く切り抜く

<img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582616157/posts/catnose.png" class="example-img" alt="altテキスト" width="90" height="90">

.example-img {
  border-radius: 50%;
}

👆border-radius: 50%とすると画像は円形になります。

フィルターをかける

CSSのfilterフィルタープロパティを使うと、画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたりすることができます。

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example-img" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

.example {
  filter: sepia(70%);
}

👆たとえばfilter: sepia(70%)とすると、写真がセピア調になります。70%という値は、フィルターの強さを表しています。filterを使えば、このように画像を簡単に加工できます。

詳しくはこちらのページで解説しています。

関連するページを読む

CSSのfilterで画像にフィルターをかける