このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

img要素:画像を埋め込む

記事Apr. 8th,2015
July 7th,2020
画像を埋め込む要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

img”要素は画像を埋め込む要素です。

サンプルコード

<img src="sample.png" alt="サンプル画像">

サンプル画像

width”属性height”属性やスタイルシートで大きさを指定していない場合はブラウザのデフォルトの大きさで表示されます。

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
src="" 画像ファイルの指定 URL 埋め込む画像ファイルのURL
任意属性
グローバル属性
alt="" 代替テキスト テキスト 画像の代わりになるテキスト
srcset=""HTML5.1で追加 使用可能な画像ファイルのセット URL 画像の横幅w,URL 画像の横幅w,... ビューポートの幅ごとの表示する画像のURL
URL デバイスピクセル比x,URL デバイスピクセル比x,... デバイスピクセル比ごとの表示する画像のURL
sizes=""HTML5.1で追加 画像を表示するサイズ 長さ srcset”属性を幅記述子(“w”)で指定した時】画像の表示サイズの横幅
メディアクエリ 長さ,メディアクエリ 長さ,...,長さ srcset”属性を幅記述子(“w”)で指定した時】メディア条件ごとの画像の表示サイズの横幅
crossorigin=""HTML5で追加 画像ファイルを読み込む時のCORSリクエストを設定 anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
usemap="" クライアントサイドイメージマップ #マップ名 イメージマップの名前(map”要素name”属性の値)
ismap サーバーサイドイメージマップ ismap サーバーサイドイメージマップ
width="" 画像の横幅 正の整数 画像の大きさの横幅のピクセル数
height="" 画像の高さ 正の整数 画像の大きさの高さのピクセル数
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシーを指定
decoding=""HTML Living Standardで定義 画像のデコード方式を指定 sync 他のコンテンツと同期的にデコードする
async 他のコンテンツと非同期的にデコードする
auto デコード方式を指定しない
loading=""HTML Living Standardで定義 画像の読み込みのタイミングを指定 lazy 画像がビューポートに入るまで読み込まない
eager 画像を直ちに読み込む

alt”属性はHTML4までと異なり必須属性ではありませんが、必要条件が定められており、ほとんどの場合は必要となります。

sizes”属性は幅記述子(“w”)が使用されたsrcset”属性が指定されている場合は必須です。

過去に定義された属性

属性
属性 説明 説明
longdesc=""注意 画像を説明した文書へのリンク URL 画像を説明した文書のURL
name=""注意 画像の名前 文字列 画像の名前

画像の形式

画像のファイル形式(画像形式)には“BMP”、“TIFF”、“JPEG”、“GIF”などさまざまなものがありますが、インターネット上で一般的に使用される画像形式は“JPEG”、“GIF”、“PNG”の3種類です。

JPEG
拡張子は“.jpg”や“.jpeg”。
一般的にデジタルカメラで写真を撮るとこの形式で保存されるので、ウェブ制作に関わりのない人にも比較的馴染みのある画像形式です。色数の多い複雑な画像を表示するのに向いていてグラデーションも綺麗に表示することができます。
ファイルを保存すると“非可逆圧縮”されるため何度も編集と保存を繰り返すと画質が劣化します。ぼやけたり、かすれたりするので活字や線、色の境界がはっきりした図形などを含む画像には向きません。
GIF
拡張子は“.gif”。
グラデーションをあまり使っていないイラストや線画など、色数が少ない画像を表示するのに向いています。透明色を使用したり、1個のファイルに複数の画像データを保存できるため、パラパラマンガのようにしてアニメーションを表示することが可能です。
可逆圧縮”するため画像の質は落ちませんが、最大256色しか扱えないため写真のような色数の多い画像をこの形式で保存すると色数が減らされて画像が劣化します。
PNG
拡張子は“.png”。
“GIF”の代替としてインターネット上で使うことを目的として開発された画像形式で“JPEG”と同じ約1670万色まで使用することが可能なうえ、“可逆圧縮”のため画質は落ちません。
劣化しないので写真などを“JPEG”より綺麗に保存することができますが、ファイルのサイズが大きくなります。アニメーションは表示できませんが、透明に加えて半透明も表現できます。

ウェブページでは通常、イラストやロゴなどには“GIF”か“PNG”、写真には“JPEG”が使用されます。

“BMP”など他の画像形式を使用してはいけないわけではありませんが、ブラウザによっては表示に対応していなかったり、ファイルのサイズが必要以上に大きくなったりする場合があります。

画像の代替テキスト

“代替テキスト”とは?

画像の“代替テキスト”は画像の内容を説明するためのテキストで、主に以下のような場合に使用されます。

  • 音声読み上げソフトなど画像を認識できないソフトウェアやデバイスに画像の内容を読み取らせるため
  • 指定した画像ファイルが存在しない場合や通信環境の影響など何らかの理由により画像が表示できない時に代わりに表示されるテキストとして表示させるため

“代替テキスト”を示すためのalt”属性は必須属性ではありませんが、アクセシビリティの点から非常に重要であり、後述する条件を満たす場合以外は省略できないので実質必須属性であると言えます。

“代替テキスト”の指定はSEOの観点から非常に重要とされます。検索エンジンはユーザーに有益な情報を提供するために、画像の中にユーザーの求めている情報がある場合もその画像のあるウェブページを表示します。しかし、検索エンジンは画像の内容をそのままでは理解することができないので、alt”属性の値を使用して画像の内容を理解し、検索結果に反映させます。

適切な代替テキスト

代替テキストはその画像の代わりとなるテキストです。つまり、その画像と置き換えても文章の意味やコンテンツの内容が変わることのないテキストである必要があります。

以下の画像を例とします。同じ画像でも前後の文脈や画像の意図などによっていくつもの代替テキストを考えることができます。

サンプル用の写真

ある場所を紹介する文章に添えられた画像の場合は代替テキストは以下のように指定します。

<p>大島の北部には旧陸軍の砲台跡があり、そこからは丘の上に赤い風車小屋が立つ風車展望台が見えます。その先には玄界灘が広がり、天気がいい日には水平線上に沖ノ島も望むことができる。</p>
<img src="windmill.jpg" alt="砲台跡から見た風車展望台。">

この画像がある物語の中の場面の場合は代替テキストは以下のように指定します。

<p>モリソンが目を覚ますとそこは見知らぬ場所だった。</p>
<img src="windmill.jpg" alt="青々とした丘の上には小さな赤い風車小屋が立ち、その背後には青い海が見える">
<p>立ち上がったモリソンを心地よい潮風が包み込んだ。</p>

画像が表示されないと文章の内容が変わってしまうので代替テキストで写真に写った風景について説明しています。

ただし、「画像を説明するテキスト」とだけ考えていると不適切な代替テキストになってしまう場合があります。ウェブサイトのロゴの画像の代替テキストを“alt="ウェブサイトのロゴ"”とすると一見画像を説明できているようですが、それでは意味が変わってしまいますので、“alt="havin'a coffee break"”というようにウェブサイトの名前を代替テキストとするのが適切です。

不適切な代替テキスト
<img src="logo.png" alt="ウェブサイトのロゴ">
適切な代替テキスト
<img src="logo.png" alt="havin'a coffee break">

また、ウェブサイトのナビゲーションなどでテキストを画像化している場合はそのテキストを代替テキストとするのが適切です。

<a href="index.html"><img src="home.png" alt="HOME"></a>

a”要素の中にある画像のalt”属性の値は“アンカーテキスト”としても扱われます。

alt”属性を省略できる場合

以下の場合はalt”属性を省略することができます。

  • ユーザーがアップロードした画像など画像の内容が製作者にはわからない場合
  • 画像がfigure”要素の中にあり、figcaption”要素によって画像と同等の情報が記述されている場合

これら以外の場合はalt”属性が必須となります。

figcaption”要素で補足説明されている画像
<figure>
<img src="map.gif">
<figcaption>B12出口から出て右へお進みください。約100m進んだところです。</figcaption>
</figure>

alt”属性に空の値を指定する場合

以下の場合はalt”属性が必須ですが値を空にします。

    画像と同等の意味を持つテキストが前後にあり、代替テキストにより内容が重複してしまう場合

    装飾目的で内容に影響しない画像の場合(ただし、装飾目的の画像はHTMLではなくスタイルシートを使用して設定することが望ましいとされています)

    複数の“img”要素で一つの画像を構成している場合(“img”要素のうち一つには代替テキストを指定するべき)

    スクリプトの読み込み目的などユーザーに見せることが目的ではない画像の場合

装飾目的の画像
<img src="border.png" alt="">

title”属性

alt”属性と似ている属性にtitle”属性があります。title”属性は補足情報を示すための属性で、グローバル属性なのですべての要素に指定することができます。

title”属性の値となるテキストはその画像を補足するためのテキストなので代替テキストのように画像と意味合いが同じようにする必要はありません。title”属性は著作権情報や撮影場所、撮影日時、その他画像について説明するための情報を提供するために使用することができます。

一般的なブラウザではtitle”属性の値はその要素にカーソルをあてた時にツールチップとして表示されます。

ツールチップ
ツールチップ

ツールチップの情報はスマートフォンやタブレットなどの端末では表示できないのでtitle”属性のみに頼って情報を提供するのはよくありません。

title”属性の有無はalt”属性の要否とは関係ありません。

<img src="banner.gif" alt="リンク用のバナー" title="234×60px 4.5KB">
havin'a coffee breakのリンク用バナー

レスポンシブイメージ

多くのウェブサイトで取り入れられるようになっている“レスポンシブウェブデザイン”ですが、レスポンシブウェブデザインでは大きなディスプレイを持つデスクトップデバイスとそれに比べて小さなディスプレイを持つモバイルデバイスの両方に対応する必要があります。

従来のレスポンシブウェブデザインではデスクトップデバイス用に用意した大きな画像をそのままディスプレイの小さいモバイルデバイスでも縮小して表示させたり、CSSやJavascriptを使用して表示する画像を出し分けていましたが、これらの方法では必要以上に大きな画像や不要な画像を読み込んだり、コードが複雑になったりする欠点がありました。

大きい画像と小さい画像
大きい画像と小さい画像

この欠点を解決するのがユーザーの閲覧環境に応じて複数の画像ファイルの中から最適な画像ファイルのみを選択して画像読み込む“レスポンシブイメージ”です。

レスポンシブイメージはHTML5.1から新しく追加されたsrcset”属性sizes”属性picture”要素によって実現することができます。

仕様書

img”要素はHTML1.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<img>
定義あり

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
alt=""
定義あり

定義あり

定義あり

定義あり

定義あり
src=""
定義あり

定義あり

定義あり

定義あり

定義あり
srcset=""
定義なし

定義なし

定義あり

定義あり

定義あり
sizes=""
定義なし

定義なし

定義あり

定義あり

定義あり
crossorigin=""
定義なし

定義あり

定義あり

定義あり

定義あり
usemap=""
定義あり

定義あり

定義あり

定義あり

定義あり
ismap=""
定義あり

定義あり

定義あり

定義あり

定義あり
width=""
定義あり

定義あり

定義あり

定義あり

定義あり
height=""
定義あり

定義あり

定義あり

定義あり

定義あり
referrerpolicy=""
定義なし

定義なし

定義なし

定義あり

定義あり
decoding=""
定義なし

定義なし

定義なし

定義なし

定義あり
loading=""
定義なし

定義なし

定義なし

定義なし

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
longdesc=""
定義あり

削除

削除

定義あり

削除
name=""
定義あり

削除

削除

削除

削除
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク