HTML辞典 img要素、picture要素の解説

画像を配置する<img>タグ、表示領域の幅によって画像を切り替える<picture>タグの使用方法を掲載

HTML5

対応ブラウザ

カテゴリー・コンテンツモデル

要素	カテゴリー	コンテンツモデル
img要素	インタラクティブコンテンツエンベッディッドコンテンツパルパブルコンテンツフレージングコンテンツフローコンテンツ	空
picture要素	エンベッディッドコンテンツフレージングコンテンツフローコンテンツ	0個、または複数のsource要素に続いて、１つのimg要素。オプションでスクリプト支援要素（script要素及びtemplate要素）

グローバル属性

HTML共通で指定できるグローバル属性について

img要素

インラインレベル要素

書式・概要

<img 属性="属性値">
<img src="URL" width="幅" height="高さ" alt="代替テキスト">

HTML文書内に画像を配置するには、img要素を使用します。画像の形式については、JPEG形式、PNG形式、GIF形式などが使用できます。幅と高さについては、、画像の実サイズにかかわらず、ここで指定した幅と高さで表示されます。

alt属性には、画像が利用できない環境で画像の代わりに表示するテキストを指定します。

なお、alt属性は基本的には省略できません。特に意味がない画像の場合は、alt=””としてブランクを指定しましょう。

CSSピクセルとは
CSSでは長さをあらわす際に様々な単位が使用できますが、その中の1つにpx（ピクセル）があります。もともと画面上のひとつのピクセル（ドット）を1とする単位でした。
しかしiPhoneのRetinaディスプレイの以降高密度ディスプレイが次々登場し、96dpi（1インチ96ドット）程度だったのに対して、326dpi（1インチ326ドット）となり、数倍も違う状況となってしまいました。
そこで、CSSで長さを指定するときの単位「px」は、画面上の実際のピクセルの大きさと関係なく、Retinaディスプレイ以前のディスプレイ（約96dpi）に合わせて「1/96インチを1とする単位」に変更されました。
CSSで使用する1/96インチを1としてあらわした長さをCSSピクセルと言います。
それ以前の昔からある画面においてはドットとほぼ一致する大きがCSSピクセルです。

使用できる属性

alt（オルタナティブ）

画像が表示できなかった場合に利用される代替テキストを指定します。代替えは単に画像のタイトルを入れるのではなくその画像が表す内容を文章として説明するように厳密に定義されています。

<img alt="青く透き通った海がどこまでも続く、カスピ海">

src

【必須】

埋め込む画像のURLを指定します。

srcset

複数のイメージソースを指定して、ディスプレイサイズやデバイスピクセル比に応じて代替え画像を出力します。候補となる画像のURLに合わせて、表示する条件を半角スペースで区切って指定します。各条件は数値に画像の幅「w」、高さ「h」、デバイスピクセル比「x」の単位を付けて任意に指定します。また、画像の候補はカンマ（,）で区切って複数個を指定できます。

単位	説明
w	「768w」のようにディスプレイ幅を条件に指定する
h	「800h」のようにディスプレイ高さで条件を指定する
x	「2x」のようにディスプレイ比の倍率で条件を指定する

crossorigin

CORS（Cross-Origin Resource Sharing クロスドメイン通信）を設定できる属性です。サードパーティーから読み込んだ画像を、canvas要素で利用できるようになります。

anonymous	CookieやクライアントサイドのSSL証明書、HTTP認証などのユーザー認証情報は不要です。
use-credentials	ユーザー認証情報を求めます。

usemap

画像をクライアントサイドクリッカブルマップとして扱う場合、その対象となるmap要素に指定されたname属性値を指定します。

ismap

【論理属性】

画像をサーバーサイドクリッカブルマップとして扱う場合に指定します。a要素のhref属性に、クリックされた座標を基に処理するプログラムへのURLなどを指定した上で、ismap属性を指定したimg要素を配置することで、サーバーサイドクリッカブルマップを実行します。

width

画像の幅を指定します。正の整数を指定します。

<img width="100">

height

画像の高さを指定します。正の整数を指定します。

<img height="100">

sizes

ユーザーの使用しているディスプレイサイズに合わせて画像ファイルを指定します。srcset属性と併せて使用します。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <img src="pic1.jpg" width="300" height="300" alt="休日の京都古都の散策">
  </body>
</html>

chromeブラウザ実行結果

Firefox ブラウザ実行結果

edgeブラウザ実行結果

operaブラウザ実行結果

ピクセル密度に合わせた画像を表示させる

<img src="URL" srcset="URLとピクセル密度" width="幅" height="高さ" alt="代替テキスト">

img要素のsrcset属性を使用すると、ピクセル密度の異なるディスプレイ向けの画像を別途指定しておくことができます。srcset属性の値には、画像のURLに続けて半角スペースで区切って「ピクセル密度が何倍向けの画像なのか」を数字に小文字のxを付けて記述します。

※2x 3x 2.5xなど

URLとピクセル密度のペアは、カンマで区切って必要なだけ指定します。

src属性には、通常の画面向けの画像をURLを指定しておきます。こうすることで、srcset属性に未対応のブラウザでも、src属性で指定した画像は表示させることができます。

サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>img要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <img src="629959_s.jpg" srcset="629959_s.jpg 1x,629959_m.jpg 2x" alt="サンマ">
  </body>
</html>

ピクセル密度とは
1インチにどれくらいのドットが含まれているかということになります。
100dpi（dots per inch）は1インチに100個のドットが含まれている
ということになります。dpiが大きいほど密度が高いということになります。

状況に応じたサイズの画像を表示させる

<img sizes="幅" src="URL" srcset="URLとピクセル密度" alt="代替テキスト">

たとえば画像を表示領域の幅いっぱいに表示させるように指定した場合、閲覧する環境によって必要となる画像サイズは変わってきます。表示領域の幅も機器によって環境によって必要となる画像サイズは変わってきます。表示領域の幅も機器によってまちまち上に、ピクセル密度も異なる場合があるからです、

そこで、あらかじめサイズの異なる画像をいくつか用意しておき、状況に応じてその中から最適な画像をブラウザが選択して表示できるようにするのが、sizes属性になります。

sizes属性にはCSSの単位をつけた画像の表示幅が指定できます。単位「vw」ビューポート（表示領域）の幅の1%を1とする単位で、100vwは表示領域の幅いっぱいに表示させる指定です。

HTML5以前では、width属性に%を指定できましたが、HTML5では指定できなくなりました。srcset属性の値には、画像のURLに続けて半角スペースで区切って「ピクセル密度が何倍向けの画像なのか」を数字に小文字のxを付けて記述します。
このURLと横幅のペアは、カンマで区切って必要なだけ指定できます。こうすることで、使用している機器の幅やピクセル密度、拡大縮小の状況に合わせて、ブラウザがもっとも適切な画像だけを読み込んで表示させます。未対応のブラウザはsrc属性を参照するため、未対応のブラウザ用の画像ファイルを指定しておく必要がある。

このURLと横幅のペアは、カンマで区切って必要なだけ指定できます。こうすることで、使用している機器の幅やピクセル密度、拡大縮小の状況に合わせて、ブラウザがもっとも適切な画像だけを読み込んで表示させます。未対応のブラウザはsrc属性を参照するため、未対応のブラウザ用の画像ファイルを指定しておく必要がある。

メディアクエリ

<picture>
<source media="使用条件" srcset="URLとピクセル密度">
<img src="URL" srcset="URLとピクセル密度" alt="代替テキスト">
</picture>

CSSのメディアクエリ機能を使うと、出力先の表示領域の大きさに合わせて画像の表示幅を変更することができます。

img要素にpicture要素とsource要素を組み合わせ使用すると、このCSSでの表示幅の変更に合わせて、使用する画像を切り替えることが可能になります。

source要素はimg要素と同様に表示させる画像を指定する要素ですが、media属性をしてすることでその画像を使用する条件（メディアクエリと同じもの）を指定することができます。

たとえば（max-width: 500px）と指定すると、表示領域の最大幅が500ピクセルまでつまり、表示領域の幅が500ピクセル以下のときにその画像が使用されることになります。

なお、source要素ではsrcset属性はimg要素と同様に使用できますが、src属性は使用できない点に注意が必要です。

source要素は必ずpicture要素でとりまとめて、その内部で使用することになっています。その際、まず最初にsource要素を必要なだけ入れ、最後にimg要素を1つだけ入れます。

こうすることで、source要素に対応していないブラウザでも、最低限img要素だけは表示できるようになります。picture要素内の画像は最初に条件に合致した画像だけ使用されます。

また、どの条件にも合致しない場合はimg要素が使用されます。

picture要素

書式・概要

picture要素は、レスポンスシブ・イメージを実現するための要素です。内包されたimg要素とsource要素を組み合わせて、複数のイメージソースを出し分けることが可能になります。

<picture>～</picture>

サンプル

表示領域の幅が500px以下の時には、pic500.jpg。pic1000.jpgのいずれかがピクセル密度に合わせて使用されます。（pic500.jpgは密度が指定されていないため、1xとなります）条件に合致しなければ密度に合わせてpic800.jpg、pic1600.jpgのいずれかが使用されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <picture>
        <source media="(max-width: 500px)" srcset="pic500.jpg, pic1000.jpg 2x">
        <img src="pic800.jpg" srcset="pic1600.jpg 2x">
      </picture>
  </body>
</html>

カテゴリー:HTML辞典WEB埋め込み

タグ:area map picture source インタラクティブコンテンツエンベッディッドコンテンツパルパブルコンテンツフレージングコンテンツフローコンテンツ