HTML の <img>
要素は、文書に画像を埋め込みます。
上記の例では、 <img>
要素のとてもシンプルな使い方を示しています。
src
属性は必須で、埋め込みたい画像へのパスを入れます。alt
属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。 — 読み上げソフトがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、代替テキストは、例えばネットワークエラーやコンテンツがブロックされた、リンク切れ等、何らかの理由で画像が読み込めなかった場合に、ページに表示されます。
以下の例のように、様々な目的を達成するために、指定することができるその他の属性がたくさんあります。
- セキュリティおよびプライバシーのための Referrer/CORS 制御。
crossorigin
およびreferrerpolicy
を参照してください。 width
,height
,intrinsicsize
を使用して固有の寸法を設定すること。これは画像を読み込む前にページレイアウトを安定させるために、画像が占める領域を設定したいときに有用です。sizes
およびsrcset
を使用したレスポンシブ画像のヒント (<picture>
要素、およびレスポンシブ画像のチュートリアルもご覧ください)。
対応している画像形式
HTML 標準では、対応しなければならない画像形式の一覧を提供していないので、ユーザーエージェントによって対応する画像形式のセットは異なります。ウェブブラウザーで対応している画像形式のガイドが利用できます。
Abbreviation | File format | MIME type | File extension(s) | Browser compatibility |
---|---|---|---|---|
APNG | Animated Portable Network Graphics | image/apng |
.apng |
Chrome, Edge, Firefox, Opera, Safari |
BMP | Bitmap file | image/bmp |
.bmp |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
GIF | Graphics Interchange Format | image/gif |
.gif |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
ICO | Microsoft Icon | image/x-icon |
.ico , .cur |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg , .jpeg , .jfif , .pjpeg , .pjp |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
PNG | Portable Network Graphics | image/png |
.png |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
SVG | Scalable Vector Graphics | image/svg+xml |
.svg |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
TIFF | Tagged Image File Format | image/tiff |
.tif , .tiff |
None built-in; add-ons required |
WebP | Web Picture format | image/webp |
.webp |
Chrome, Edge, Firefox, Opera |
The abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
画像読み込みエラー
画像の読み込みまたは表示の間にエラーが発生した場合、かつ onerror
イベントハンドラーが error
イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これはいくつもの状況がありえます。
src
属性が空 (""
) またはnull
である。- 指定された
src
の URL が現在ユーザーがいるページの URL と同じである。 - 指定された画像が何らかの理由で読み込みが妨害され、中止された。
- 指定された画像のメタデータが、寸法を受け取ることができないなどの理由で読み込みが中止され、かつ
<img>
要素の属性に寸法が指定されていなかった場合。 - 指定された画像が、ユーザーエージェントが対応している形式ではない場合。
属性
この要素にはグローバル属性があります。
alt
- この属性は、画像を説明する代替文字列を定義します。
メモ: ブラウザーは、要素から参照された画像を常に表示するとは限りません。
- 視覚ブラウザー以外のブラウザー (視覚障碍者向けの物を含む) で閲覧された場合
- ユーザーが画像を非表示に設定している場合 (帯域の節約、プライバシー上の理由)
- 画像が無効であったり未対応の画像形式であったりした場合
このような場合、ブラウザーは、画像をこの要素の
alt
属性で定義された文字列に置き換えます。このような理由から、alt
には可能な限り役に立つ値を指定するべきです。alt
属性を省略すると、画像がコンテンツの鍵となる部分であり、同等のテキスト表現を行うことができないことを表します。この属性に空文字列を設定すると (alt=""
)、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合はレンダリングを省略することがあります。視覚ブラウザーでは、alt
が空欄で画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。この属性は画像をテキストにコピー&ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。
crossorigin
- これは列挙型の属性で、関連する画像の取得の際に CORS を使用しなければならないかどうかを示します。 CORS が有効な画像は、「汚染」されることなく
<canvas>
要素で再利用できます。次の値が使用できます。 -
anonymous
- オリジン間リクエスト (
Origin
HTTP ヘッダーを持つリクエスト) を実行しますが、資格情報 (Cookie、 X.509 証明書、 HTTP ベーシック認証など) は送信しません。サーバーがそのオリジンのサイトに資格情報を付与しない (HTTP のAccess-Control-Allow-Origin
ヘッダーの設定がない) 場合は、画像が汚染され、その使用も制限されます。 use-credentials
- 信用情報を伴ってオリジン間リクエスト (HTTP の
Origin
ヘッダーを持つリクエスト) を送信します (Cookie、証明書、 HTTP ベーシック認証を使用します)。サーバーが元のサイトに信用情報を付与しない場合は (HTTP のAccess-Control-Allow-Credentials
ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
Origin:
ヘッダーを送信せずに取得)、<canvas>
要素での汚染されない使用が妨げられます。この属性が無効である場合は、列挙型のキーワードにanonymous
が指定されたものとして扱います。詳しくは CORS 設定属性を参照してください。 decoding
-
ブラウザーに画像のデコードのヒントを提供します。次のような値が使用できます。
-
sync
- 他のコンテンツと不可分の表示として、画像を同期的にデコードします。
async
- 他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
auto
- 既定のモードで、デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。
height
- 画像固有の高さをピクセル値で指定します。
importance
- リソースの相対的な重要性を示します。優先度のヒントは以下の値を使用して委任されます。
-
auto
: 設定なしを表します。ブラウザーはリソースの優先度を決めるために、独自の経験則を使用するかもしれません。high
: リソースが高い優先度のものであることをブラウザーに示します。low
: リソースが低い優先度のものであることをブラウザーに示します。 intrinsicsize
- この属性はブラウザーに、画像の固有の寸法を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の
naturalWidth
/naturalHeight
はこの属性で指定された値が返されます。説明と例 ismap
- この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。
referrerpolicy
- リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。
no-referrer
:Referer
ヘッダーを送信しないことを表します。no-referrer-when-downgrade
: TLS (HTTPS) を使用せずにあるオリジンへ移動する場合は、Referer
ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。origin
:Referer
ヘッダーにそのページのオリジンのスキーム、ホスト名、ポート番号を含めます。origin-when-cross-origin
: 異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。unsafe-url
:Referer
ヘッダーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
sizes
- ソースのサイズのセットを示す、コンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。
- メディア条件。最後のアイテムでは省略しなければなりません。
- ソースサイズ値。
ソースサイズ値は、画像の表示サイズを指定するものです。ユーザーエージェントは
srcset
属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('w
') を使用して説明します。選択したソースサイズは画像の固有の寸法 (CSS スタイルが適用されていない場合の、画像の表示サイズ) に影響します。srcset
属性がない場合、あるいは幅記述子 (w
) を持つ値がない場合は、sizes
属性の効果はありません。 src
- 画像の URL です。この属性は、
<img>
要素に必須です。srcset
に対応するブラウザーではsrc
を、画素密度記述子1x
の候補画像であるように扱います。ただし、この画素密度記述子がsrcset
で定義済みである、またはsrcset
に 'w
' 記述子が含まれている場合を除きます。 srcset
- ユーザーエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです:
- 画像の URL
- 任意で、ホワイトスペースの後に以下のいずれかを記述:
- 幅記述子。これは直後に '
w
' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes
属性で与えられたソースサイズで割られます。 - 画素密度記述子。これは直後に '
x
' を付加した正の浮動小数点数です。
- 幅記述子。これは直後に '
記述子を指定しない場合は、ソースを既定の記述子
1x
に割り当てます。幅記述子と画素密度記述子を同一の
srcset
属性に混在させると無効になります。重複した記述子 (例えばひとつのsrcset
に2つのソースがあり、どちらも '2x
' とする) も無効になります。ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。
width
- 画像固有の幅をピクセル値で指定します。
usemap
- 要素に関連づけられた イメージマップの部分的な URL ('
#
' で始まる) です。
非推奨の属性
align
- 周囲の文脈に対する画像の配置を指定します。もう使用するべきではありません。 — 代わりに CSS の
float
プロパティやvertical-align
プロパティを使用してください。要素ボックス内の画像の位置を示すために、object-position
プロパティを使用することもできます。 -
top
vertical-align: top;
またはvertical-align: text-top;
と等価です。middle
vertical-align: -moz-middle-with-baseline;
と等価です。bottom
- 値の既定値はなく
vertical-align: unset;
またはvertical-align: initial;
と等価です。 left
float: left;
と等価です。right
float: right;
と等価です。
border
- 画像の周りの境界線の幅を指定します。代わりに CSS の
border
プロパティを使用してください。 hspace
- 画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の
margin
プロパティを使用してください。 longdesc
- 画像の詳細な説明へのリンクです。有効な値は、 URL または要素の
id
です。この属性は、最新の W3C のバージョンである HTML 5.2 でも言及されていますが、一方、 WHATWG の HTML Living Standard では完全に削除されています。将来が不確実なので、代わりに、
aria-describedby
またはaria-details
のような WAI-ARIA の代替手段を検討してください。 name
- 要素の名前です。代わりに
id
属性を使用してください。 vspace
- 画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の
margin
プロパティを使用してください。
CSS でのスタイル付け
<img>
は置換要素です。 display
の値が既定で inline
ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には border
/border-radius
, padding
/margin
, width
, height
, などのプロパティを設定することができます。
<img>
にはベースラインがありません。つまり vertical-align
: baseline
を伴うインライン整形文脈内で使用したときに、画像の下端はコンテナーのベースラインに揃えられます。
object-position
プロパティを使用して、要素ボックス内の画像の位置を指定したり、 object-fit
プロパティを使用して、ボックス内の画像の寸法を調整したり(例えば、クリッピングが必要な時に画像をボックスに合わせるか埋めるか)することができます。
画像の種類に応じて、固有の寸法を持つことができます。ただし、固有の寸法が必須ではない画像形式があります。例えば SVG 画像は、固有の寸法を持ちません。つまり、 SVG 画像には <svg>
要素に width
または height
が設定されていない限り、固有の寸法はありません。
例
代替テキスト
以下の簡単な例では、ページに画像を埋め込み、アクセシビリティを向上させるために代替テキストを含めています。
<img src="https://developer.mozilla.org/static/img/favicon144.png" alt="MDN ロゴ — MDN のテキストが入った恐竜のロゴ">
画像リンク
この例は前回のを土台に、画像をリンクにする方法を示しています。これを行うのはとても単純です。 — <img>
タグを <a>
の中に組み込むだけです。一つの考慮事項として、リンクが指すリソースを説明する代替テキストを作成するようにしてください。
<a href="https://developer.mozilla.org"> <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="MDN サイトにおいでください"> </a>
srcset 属性の使用
この例では、 srcset
属性によって高解像度版のロゴの参照を指定しています。これで、高解像度の端末では src
画像の代わりにこちらが読み込まれます。 src
で参照される画像は、 srcset
に対応しているユーザーエージェントでは、 1x
の候補としてカウントされます。
<img src="https://developer.mozilla.org/static/img/favicon72.png" alt="MDN" srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">
srcset および sizes 属性の使用
src
属性は、 srcset
に対応しているユーザーエージェントで 'w
' 記述子を使用している場合は無視されます。 (max-width: 600px)
のメディア条件に一致すると、 200px の幅の画像 (200px にもっと近いもの) が読み込まれ、そうでなければ他の画像が読み込まれます。
<img src="/files/16796/clock-demo-200px.png" alt="時計" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 600px) 200px, 50vw">
その場で大きさを変更してみるには、この例を別なページで表示させる必要があり、そうすればコンテンツエリアの大きさを実際に使用することができます。
セキュリティとプライバシーの考慮事項
<img>
要素の多くは無害な使用ですが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。詳細情報と緩和策については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。
アクセシビリティの考慮事項
意味のある代替説明を書く
alt
属性の値は明確で簡潔に画像の内容を説明するものにしてください。画像そのもの存在を説明するものであったり、画像のファイル名であったりするべきではありません。画像が言葉で説明できるものではなく、 alt
属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮してください。
悪い例
<img alt="image" src="penguin.jpg">
良い例
<img alt="海岸に立っているイワトビペンギン" src="penguin.jpg">
alt
属性が画像にない場合、読み上げソフトによっては代わりに画像のファイル名を読み上げることがあります。ファイル名が画像の内容を表していない場合、これが操作を混乱させる可能性があります。
- An alt Decision Tree • Images • WAI Web Accessibility Tutorials
- Alt-texts: The Ultimate Guide — Axess Lab
- How to Design Great Alt Text: An Introduction | Deque
- MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
- Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
title 属性
The title
属性を alt
属性の代わりに利用することはできません。加えて、 alt
属性の値を同じ画像の title
属性に複製して宣言することは避けてください。このようにすると、読み上げソフトが説明を二回読み上げ、操作を混乱させる可能性があります。
title
属性は、画像の alt
の説明と組み合わせた補助的な説明として使用するべきでもありません。画像にキャプションが必要であれば、 figure
および figcaption
要素と組み合わせて使用してください。
title
属性の値は、よくツールチップとして、画像の上でカーソルを停止させた後で間もなく表示されます。これはユーザーに追加の情報を提供することができますが、ユーザーが必ず見ると仮定してはいけません。ユーザーが見ることが特に重要または有益である情報があるのであれば、上記の title
を使用するのではなく、何らかの方法で行内に表示するべきです。
技術的概要
コンテンツカテゴリ | フローコンテンツ、記述コンテンツ、埋め込みコンテンツ、知覚可能コンテンツ。要素が usemap 属性を持つ場合は、対話型コンテンツのカテゴリの一角にもなります。 |
---|---|
許可されている内容 | なし。これは空要素です。 |
タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLImageElement |
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Referrer Policy referrer attribute の定義 |
勧告候補 | referrerpolicy 属性を追加。 |
HTML Living Standard <img> の定義 |
現行の標準 | |
HTML5 <img> の定義 |
勧告 | |
HTML 4.01 Specification <img> の定義 |
勧告 |
ブラウザーの互換性
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
img | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
align | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
alt | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
border | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
crossorigin | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
decoding | Chrome 完全対応 あり | Edge ? | Firefox 完全対応 63 | IE 未対応 なし | Opera 完全対応 あり | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 63 | Opera Android 完全対応 あり | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
height | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
hspace | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
intrinsicsize | Chrome
完全対応
71
| Edge ? | Firefox ? | IE 未対応 なし | Opera 完全対応 58 | Safari 未対応 なし | WebView Android
完全対応
71
| Chrome Android
完全対応
71
| Firefox Android ? | Opera Android 完全対応 50 | Safari iOS 未対応 なし | Samsung Internet Android
完全対応
10.0
|
ismap | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
longdesc | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
name | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
onerror | Chrome 完全対応 あり | Edge ? | Firefox 完全対応 51 | IE ? | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 51 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
referrerpolicy | Chrome 完全対応 51 | Edge 未対応 なし | Firefox 完全対応 50 | IE 未対応 なし | Opera 完全対応 38 | Safari 完全対応 11.1 | WebView Android 完全対応 51 | Chrome Android 完全対応 51 | Firefox Android 完全対応 50 | Opera Android 完全対応 41 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 7.2 |
sizes | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
src | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
srcset | Chrome 完全対応 34 | Edge 完全対応 あり | Firefox
完全対応
38
| IE 未対応 なし | Opera 完全対応 21 | Safari 完全対応 8 | WebView Android 完全対応 37 | Chrome Android 完全対応 34 | Firefox Android
完全対応
38
| Opera Android 完全対応 21 | Safari iOS 完全対応 8 | Samsung Internet Android 完全対応 2.0 |
usemap | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
vspace | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
width | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
関連情報
- HTML の画像
- 画像のファイル形式のガイド
- レスポンシブ画像
<picture>
,<object>
,<embed>
要素- その他の画像に関する CSS プロパティ:
object-fit
,object-position
,image-orientation
,image-rendering
, andimage-resolution
.