recursal/MDN huggingface dataset:
HTMLImageElement: vspace プロパティ
==============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`vspace`** は `HTMLImageElement` インターフェイスの廃止されたプロパティで、ページをレイアウトする際に `<img>` 要素の上下に空ける空間のピクセル数を指定します。

値
-

画像の上下に適用される垂直方向のマージンの高さをピクセル単位で指定する整数値。

使用上の注意
------

`vspace` に指定された値は `margin-top` と `margin-bottom` プロパティに対応付けられ、それらのマージンの高さをピクセル単位で指定します。

**警告:** このプロパティは廃止されています。代わりに、 CSS の `margin` プロパティとその個別指定形を使用して、`<img>` の周囲にマージンを設定してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-vspace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: useMap プロパティ
==============================

**`useMap`** は `HTMLImageElement` インターフェイスのプロパティで、 HTML の `usemap` 属性を反映し、この画像に適用されるクライアントサイドイメージマップの名前を提供する文字列です。

値
-

画像に適用するイメージマップを定義する `<map>` 要素のページローカル URL (つまり、ハッシュまたはポンド記号 "`#`" で始まる URL) を指定する文字列です。

クライアントサイドのイメージマップについては、学習記事「画像の上にヒットマップを追加する」で詳しく説明されています。

使用上の注意
------

`useMap` の文字列値は `<map>` 要素の有効なアンカーでなければなりません。言い換えると、この文字列は適切な `<map>` の `name` 属性の値の前に、ポンド記号またはハッシュ記号を付加したものでなければなりません。

次のような `<map>` を考えてみましょう。


```html
<map name="mainmenu-map">
  <area
 shape="circle"
 coords="25, 25, 75"
 href="/index.html"
 alt="Return to home page" />
  <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop" />
</map>
```


`mainmenu-map` という名前のイメージマップがあるとすると、それを使ったイメージは以下のようなものになります。


```html
<img src="menubox.png" usemap="#mainmenu-map" />
```


他の例（インタラクティブなものもあります）については、 `<map>` と `<area>` 要素についての記事や、イメージマップの使用法をご覧下さい。

例
-

試してみましょう
--------

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-usemap |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: crossOrigin プロパティ
===================================

`HTMLImageElement` インターフェイスの **`crossOrigin`** 属性は、画像を取得する際に使用するオリジン間リソース共有 (CORS) 設定を指定するための文字列です。

値
-

画像リソースを取得する際に使用する CORS モードを指定するキーワードの文字列です。 `crossOrigin` を指定しない場合、画像は CORS なしで取得されます（`no-cors` フェッチモード）。

許可されている値は次の通りです。

`anonymous`

`<img>` 要素によるリクエストは、`mode` が `cors` に、`credentials` モードが `same-origin` に設定されて行われます。これは、CORS が有効であり、文書が読み込まれたのと同じオリジンから画像が取得された場合に、クレデンシャルが送信されることを意味します。

`use-credentials`

`HTMLImageElement` によるリクエストは `cors` モードと `include` 認証モードを使用します。この要素によるすべての画像リクエストは、取得元のドメインに関係なく CORS を使用します。

`crossOrigin` が空の文字列 (`""`) の場合、`anonymous` モードが選択されます。

例
-

この例では、新しい `<img>` 要素が作成されて文書に追加され、匿名状態の画像が読み込まれます。画像は CORS を使用して読み込まれ、資格情報がオリジンをまたいだすべての読み込みに使用されます。

### JavaScript

以下のコードでは、 `<img>` 要素に `crossOrigin` プロパティを設定して、新しく作成された画像のフェッチに対する CORS アクセスを設定する例を示しています。


```js
const imageUrl = "clock-demo-400px.png";
const container = document.querySelector(".container");

function loadImage(url) {
  const image = new Image(200, 200);
  image.addEventListener("load", () => container.prepend(image));

  image.addEventListener("error", () => {
    const errMsg = document.createElement("output");
    errMsg.value = `Error loading image at ${url}`;
    container.append(errMsg);
  });

  image.crossOrigin = "anonymous";
  image.alt = "";
  image.src = url;
}

loadImage(imageUrl);
```

### HTML


```html
<div class="container">
  <p>
    ここに 1 つの段落があります。とても面白い段落です。
    あなたはこの段落に魅了されています。 この段落を読み続けてください。
    じゃあ、もうこの段落を読むのはやめていいよ。 読んでくれてありがとう。
  </p>
</div>
```

### CSS


```css
body {
  font:
    1.125rem/1.5,
    Helvetica,
    sans-serif;
}

.container {
  display: flow-root;
  width: 37.5em;
  border: 1px solid #d2d2d2;
}

img {
  float: left;
  padding-right: 1.5em;
}

output {
  background: rgba(100, 100, 100, 0.1);
  font-family: Courier, monospace;
  width: 95%;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-crossorigin |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: border プロパティ
==============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

廃止された `HTMLImageElement` の **`border`** プロパティは、 画像を囲む境界線の太さをピクセル数で指定します。既定値である 0 は、境界線を描画しないことを示します。

このプロパティは使用しないでください。代わりに、 CSS を使用して境界線をスタイル付けしてください。 `border` プロパティまたはその個別指定プロパティを使用すると、境界線の太さを設定するだけでなく、他の様々なスタイリングオプションを適用できる可能性があります。

具体的には、書字方向を意識した `border-block-start-width`, `border-block-end-width`, `border-inline-start-width`, `border-inline-end-width` 属性を用いて制御されます。

互換性（あるいはその他の理由）のために、代わりに（あるいは追加で）古いプロパティを使用することができます。 `border-top-width`, `border-right-width`, `border-bottom-width`, `border-left-width` です。

値
-

画像を囲む境界線の太さを CSS ピクセル単位で指定した整数値が入った文字列です。`0` または空文字列は、境界線を描画しないことを意味します。`border` の既定の値は `0` です。

使用上の注意
------

`border` は使わないでください。これは時代遅れです。代わりに、CSS の `border` プロパティとその個別指定プロパティを使用して、画像の周りに境界線をを設定してください。

例えば、以下のような HTML があった場合です。


```html
<img src="image.png" border="2" />
```


以下は、この廃止されたプロパティの代わりに、CSS を使用して同じ外観を提供するものです。


```html
<img src="image.png" style="border: 2px;" />
```


さらに追加情報を入力することで、境界線の色などを変更することができます。


```html
<img src="image.png" style="border: dashed 2px #333388;" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-border |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: name プロパティ
============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

`HTMLImageElement` インターフェイスの **`name`** プロパティは非推奨で、要素の名前を指定します。これは、全ての要素で利用可能な `id` プロパティに置き換えられました。

値
-

画像を参照するための名前を指定する文字列。

**警告:** このプロパティは非推奨であり、後方互換性のために仕様に残っているだけです。このプロパティは `id` と同じように機能するため、代わりにこれを使用することができますし、また使用すべきです。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-img-name |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: currentSrc プロパティ
==================================

`HTMLImageElement` の **`currentSrc`** プロパティは読み取り専用で、表す `<img>` 要素で現在表示されている画像の URL を表します。

値
-

`HTMLImageElement` で表される `<img>` 要素の中で、現在表示されている画像の完全な URL を示す文字列です。これは、`sizes` や `HTMLImageElement.srcset` 属性を用いて複数の画像オプションを提供する場合に有用です。`currentSrc` を使用すると、提供された画像セットの中からブラウザーがどの画像を選択したかを判断することができます。

例
-

この例では、時計の画像に 2 種類のサイズを用意しています。一つは幅 200px で、もう一つは幅 400px です。 `sizes` 属性は、ビューポートが幅 400px 未満の場合は画像を文書幅の 50% で、それ以外の場合は画像を文書幅の 90% で描画することを指定しています。

### HTML


```html
<img
 src="/files/16797/clock-demo-400px.png"
 alt="Clock"
 srcset="
 /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
 /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
 "
 sizes="(max-width: 400px) 50%, 90%" />
```

### JavaScript


```js
const clockImage = document.querySelector("img");
const p = document.createElement("p");

p.textContent = clockImage.currentSrc.endsWith("200px.png")
  ? "Using the 400px image!"
  : "Using the 200px image.";
document.body.appendChild(p);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-currentsrc-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: naturalWidth プロパティ
====================================

`HTMLImageElement` インターフェイスの
 **`naturalWidth`** プロパティは読み取り専用で、画像の本来の（自然な）密度補正された幅をCSS ピクセル数で返します。

これは，何も制約を受けずに描画した場合の画像の幅です。画像の幅を指定しなかった場合、または画像の幅を制限するか明示するコンテナー内に画像を配置する場合、この値は画像の幅を CSS で指定されたピクセル数で表します。

対応する `naturalHeight` メソッドは、画像の自然な高さを返します。

**メモ:** ほとんどの場合、自然な幅とは、サーバーから送信された画像の実際の幅です。とはいえ、ブラウザーは画像をレンダラーに送る前に画像を修正することがあります。たとえば、Chrome はローエンド端末で画像の解像度を低下させます。このような場合、`naturalWidth` はそのようなブラウザーの介入によって修正された画像の幅を自然な幅とみなして、この値を返します。

値
-

画像の幅を CSS ピクセル単位で表した整数値。これは、画像に制約や特定の値が設定されていない場合に、画像が自然に描画される幅です。この自然な幅は、 `width` とは異なり、表示されている端末のピクセル密度に合わせて補正されます。

画像に含まれる幅が指定されていない場合や、この情報を取得するための画像データが存在しない場合など、幅が利用できない場合は、 `naturalWidth` は 0 を返します。

例
-

画像を「密度調整された」自然のサイズと、ページの CSS やその他の要素によって変化した表示サイズの両方で表示するコードの例としては、`HTMLImageElement.naturalHeight` を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-naturalwidth-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: loading プロパティ
===============================

`HTMLImageElement` の **`loading`** プロパティは、文字列で、ユーザーエージェントに現在のウィンドウの視覚ビューポートの外にある画像の読み込みをどのように処理するかのヒントを提供するものです。

これは、最初のページ読み込み時にすぐに画像を読み込むのではなく、必要だと予想されるまで画像の読み込みを延期することで、文書のコンテンツの読み込みを最適化するのに役立ちます。

値
-

文字列で、ページのパフォーマンスを最適化するために，画像の読み込みをどのようにスケジュールするのが最適かについて，ユーザーエージェントにヒントを提供します。指定可能な値は次のとおりです。

`eager`

既定の動作で、 `eager` は `<img>` 要素が処理されたらすぐに画像を読み込むようにブラウザーに指示します。

`lazy`

ブラウザーがすぐに必要だと判断するまで、画像の読み込みを保留するようにユーザーエージェントに指示します。例えば、ユーザーがドキュメントをスクロールしている場合、 `lazy` の値は、ウィンドウの視覚ビューポートに表示される直前にのみ画像を読み込むようにします。

使用上の注意
------

### load イベントのタイミング

`load` イベントは、文書の処理が完了した時に発行されます。画像が積極的 (eager) に読み込まれる場合（これは既定です）、文書内のすべての画像を取得してから `load` イベントが発生します。

`loading` に `lazy` の値を指定することで、画像の要求、取得、処理にかかる時間の分だけ `load` 属性が遅延するのを防ぐことができます。

`loading` 属性が `lazy` に設定されている画像で、最初のページ読み込み時に視覚ビューポート内に配置されているものは、レイアウトが確認されるとすぐに読み込まれますが、その読み込みによって `load` イベントが遅延することはありません。
 言い換えると、これらの画像は `<img>` 要素を処理する際にすぐに読み込まれるわけではなく、最初のページ読み込みの一部として読み込まれます。ただ、 `load` イベントのタイミングには影響を与えません。

つまり、 `load` が実行されたとき、視覚ビューポートにある遅延 (lazy) で読み込まれた画像はまだ表示されていない可能性があるということです。

### 画像の遅延読み込み時の要素ずれの防止

`loading` 属性が `lazy` に設定されているために読み込みが遅れていた画像がようやく読み込まれると、ブラウザーは画像のスタイルと固有の寸法に基づいて `<img>` 要素の最終サイズを決定し、必要に応じて文書を再フローして画像に合わせて要素に加えられたサイズ変更に基づき、要素の位置を更新します。

この再フローを防ぐには、画像要素の `width` および `height` 属性を使用して画像の表示サイズを明示的に指定してください。この方法で固有のアスペクト比を設定すれば、文書の読み込みに関して要素が動いてしまい、遅延読み込みと再フローのタイミングによっては、良くて不愉快にさせたり、最悪の場合は間違ったものをクリックさせてしまう原因となることを防ぐことができます。

例
-

以下に示す `addImageToList()` 関数は、実際に必要になるまでネットワークから画像を読み込まないように遅延読み込みを使用して、写真のサムネイルをアイテムのリストに追加するものです。


```js
function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  let newItem = document.createElement("div");
  newItem.className = "photo-item";

  let newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-loading |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<img>` 要素
* ウェブパフォーマンス（MDN 学習領域）
* 遅延読み込み（MDN ウェブパフォーマンスガイド）
HTMLImageElement: y プロパティ
=========================

`HTMLImageElement` の **`y`** プロパティは読み取り専用で、ルート要素の原点からの相対座標で `<img>` 要素の上端の y 座標を示します。

`x` および `y` プロパティは、その `display` プロパティの計算値が `table-column` または `table-column-group` を持つ場合にのみ画像に有効です。言い換えれば、いずれかの値が明示的に設定されているか、包含する要素からそれを継承しているか、あるいは、 `<col>` または `<colgroup>` によって記述される列内に位置していることで、その画像に設定された場合です。

値
-

その要素の直近のルート要素の上端と `<img>` 要素の境界ボックスの上端との距離をピクセル単位で示す整数値です。直近のルート要素とは、この画像を含む一番外側の `<html>` 要素です。画像が `<iframe>` の中にある場合、その `x` はそのフレームからの相対座標です。

 下の図では、上境界の端は青いパディング領域の上端です。
 したがって、 `y` が返す値は、その点からコンテンツ領域の上端までの距離となります。

![要素に関連するさまざまなボックスの関係を示す図](/ja/docs/Web/API/HTMLImageElement/y/boxmodel-3.png)

**メモ:** `y` プロパティは、画像の `display` プロパティの計算値が `table-column` または `table-column-group` である場合にのみ有効です。言い換えれば、いずれかが `<img>` に直接設定されているか、包含要素から継承されているか、または `<col>` や `<colgroup>` で記述されている列内にあることが必要です。

例
-

`HTMLImageElement.x` に `HTMLImageElement.y` （および `HTMLImageElement.x`）を使用したデモのコードがあります。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlimageelement-y |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: naturalHeight プロパティ
=====================================

`HTMLImageElement` インターフェイスの **`naturalHeight`** プロパティは読み取り専用で、画像の本来の（自然な）密度補正された高さをCSS ピクセル数で返します。

これは、画像の高さを制限するものがない状態で描画された場合の高さです。画像の高さが指定されなかった場合、または画像の高さを制限するか明示的に指定するコンテナー内に画像が配置されなかった場合は、この高さでレンダリングされます。

**メモ:** ほとんどの場合、自然な高さとは、サーバーから送信された画像の実際の高さです。とはいえ、ブラウザーは画像をレンダラーに送る前に画像を修正することがあります。たとえば、Chrome はローエンド端末で画像の解像度を低下させます。このような場合、`naturalHeight` はそのようなブラウザーの介入によって修正された画像の高さを自然な高さとみなして、この値を返します。

値
-

画像の高さを CSS ピクセル単位で表した整数値。これは、画像に制約や特定の値が設定されていない場合に、画像が自然に描画される高さです。この自然な高さは、 `height` とは異なり、表示されている端末のピクセル密度に合わせて補正されます。

内在的な高さが利用できない場合、例えば画像の内在的な高さが指定されていなかった場合や、この情報を取得するための画像データが存在しない場合など、高さが利用できなかった場合は、`naturalHeight` は 0 を返します。

例
-

この例では、密度調整された自然な画像サイズと、ページの CSS やその他の要素によって変更されたレンダリングサイズの両方を表示しています。

### HTML


```html
<div class="box">
  <img
 src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
 class="image"
 alt="A round wall clock with a white dial and black numbers" />
</div>
<div class="output"></div>
```


HTML では、 400x398 ピクセルの画像を `<div>` の中に配置するようにしています。

### CSS


```css
.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

.output {
  padding-top: 2em;
}
```


上記の CSS で注目すべき点は、画像が描画されるコンテナーのスタイルが幅 200px であり、その幅いっぱい（100%）に画像が描画されることです。

### JavaScript


```js
let output = document.querySelector(".output");
let image = document.querySelector("img");

window.addEventListener("load", (event) => {
  output.innerHTML +=
    `自然なサイズ: ${image.naturalWidth} x ` +
    `${image.naturalHeight} ピクセル<br>`;
  output.innerHTML +=
    `表示サイズ: ${image.width} x ` + `${image.height} ピクセル`;
});
```


JavaScript のコードでは、自然なサイズと表示されたサイズを、クラス `output` を持つ `<div>` にダンプしています。これは、ウィンドウの `load` イベントハンドラーに応答して実行することで、幅や高さを計測しようとする前に画像が利用することを保証しています。

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-naturalheight-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: width プロパティ
=============================

**`width`** は `HTMLImageElement` インターフェイスのプロパティで、画像が画面やプリンターなどの視覚媒体に描画または表示される場合は CSS ピクセルで、それ以外は画像のピクセル密度補正後の幅を表します。

値
-

画像の幅を表す整数値です。幅がどのように定義されるかは、画像が画面やプリンターのような視覚的媒体にレンダリングされるかどうかに依存します。

* 画像が視覚媒体にレンダリングされる場合、幅は CSS ピクセルで表現されます。
* 画像が視覚媒体にレンダリングされない場合、画像の幅は、`naturalWidth` で示される表示密度用に調整された自然の（内在的な）幅で表わされます。
例
-

この例では、 `srcset` 属性を使って、時計の画像に 2 種類の大きさの画像を用意しています。ひとつは幅 200px、もうひとつは幅 400px です。 `sizes` 属性は、ビューポートの幅を考慮して画像を描画する幅を指定するために提供されています。

### HTML

 幅 400px までのビューポートでは、 200px の幅で描画されます。
 それ以外の場合は、 400px で描画されます。


```html
<p>画像の幅: <span class="size">?</span>px (リサイズで更新)</p>
<img
 src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
 alt="Clock"
 srcset="
 /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
 /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
 "
 sizes="(max-width: 400px) 200px, 400px" />
```

### JavaScript

JavaScript は `width` プロパティを調べて、その時点での画像の幅を決定します。これはウィンドウの `load` と `resize` イベントハンドラーで行われるので、常に最新の幅情報を利用することができます。


```js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateWidth = (event) => {
  output.innerText = clockImage.width;
};

window.addEventListener("load", updateWidth);
window.addEventListener("resize", updateWidth);
```

### 結果

この例は独自のウィンドウで試してみるとわかりやすいかもしれません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-width-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: isMap プロパティ
=============================

`HTMLImageElement` の **`isMap`** プロパティは、論理値で、画像がサーバサイドイメージマップで使用されることを示します。
 これは `<a>` 要素内にある画像にのみ使用することができます。

**メモ:** アクセシビリティの観点から、サーバーサイドイメージマップはマウスを使う必要があるため、一般に使用しない方が良いでしょう。代わりにクライアントサイドイメージマップを使ってください。

値
-

論理値で、画像がサーバサイドイメージマップに使用される場合は `true` となり、そうでない場合は `false` となります。

使用上の注意
------

サーバーサイトイメージマップの一部としてマークされている画像がクリックされると、ブラウザーは "?x,y" という文字列を組み立てます。 x と y は、マウスでクリックされた位置を画像の左上隅からのオフセットの CSS ピクセル数でで示します。

そして、ブラウザーはその URL をサーバーから取得し、 `download` 属性の値によって表示またはダウンロードを行います。

サーバサイドイメージマップとは異なり、クライアントサイドイメージマップは `<img>` 要素を対話型コンテンツモードにしません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-ismap |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: longDesc プロパティ
================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`longDesc`** は `HTMLImageElement` インターフェイスの*非推奨の*プロパティで、この画像の長い説明のテキストまたは HTML ファイルの URL を指定します。これは、`title` 属性で提供される短い説明の他に、オプションで追加された詳細を提供するために使用することができます。

値
-

空文字列（長い説明文がないことを示す）または、画像の内容の長い形式の説明文を含むファイルの URL のいずれかを指定します。

 例えば、画像がフローチャートの PNG であった場合、
 `longDesc` プロパティは、チャートで表現された制御の流れについて、テキストのみの説明を提供するために使用することができます。これは、読者が使用する説明としてだけでなく、視覚障碍者のための代替表現として使用することもできます。

使用上の注意
------

このプロパティは*非推奨*であり、今後使用するべきではありません。画像の詳細な説明へのリンクを提供するには、 `longDesc` を使用する代わりに、 `<a>` 要素を使用してリンク内に画像をカプセル化するようにしてください。

以下の古い HTML があったとします。


```html
<img
 src="taco-tuesday.jpg"
 alt="Taco Tuesday"
 longdesc="image-descriptions/taco-tuesday.html" />
```


ここでは `longDesc` を使って、画像 `taco-tuesday.jpg` の詳細な説明を HTML ファイル `image-descriptions/taco-tuesday.html` で参照できるようにすることを指定しています。

これは簡単に現在の HTML に変換することができます。


```html
<a href="image-descriptions/taco-tuesday.html">
  <img src="taco-tuesday.jpg" alt="Taco Tuesday" />
</a>
```


それに伴い、画像はより詳細に記述された HTML ファイルへのリンクとなります。

仕様書
---

この機能は、現在のどの仕様にも含まれていません。標準化される予定はありません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `aria-details` (en-US)
HTMLImageElement: decoding プロパティ
================================

**`decoding`** は `HTMLImageElement` インターフェイスのプロパティで、ブラウザーが画像をどのようにデコードすべきかというヒントを表します。

値
-

デコードヒントを表す文字列です。使用可能な値は以下の通りです。

`sync`

画像を他のコンテンツと同期してデコードし、アトミックに表示します。

`async`

画像を非同期でデコードすることで、他のコンテンツ提示の遅延を減らすことができます。

`auto`

既定のモードで、デコードモードに対する優先順位がないことを示します。ブラウザーが最適なものを決定します。

使用上の注意
------

`decoding` プロパティは、ブラウザーが画像の読み込みを並列化させるかどうかを制御することができます。もし、そうすることで問題が発生する場合は、 `sync` を指定して、非同期読み込みを無効にすることができます。これは `<img>` 要素に適用すると便利ですが、画面外にある画像オブジェクトに使用するとより効果的でしょう。

例
-


```js
const img = new Image();
img.decoding = "sync";
img.src = "img/logo.png";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-decoding |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: hspace プロパティ
==============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`hspace`** は `HTMLImageElement` インターフェイスの*廃止された*プロパティで、ページをレイアウトする際に `<img>` 要素の左右に何ピクセル分の空きを残すかを指定します。

このプロパティは、HTML の `hspace` 属性を反映します。

値
-

画像の左側と右側に適用する水平方向のマージンの幅をピクセル単位で指定する整数値です。

使用上の注意
------

`hspace` に指定された値は `margin-left` および `margin-right` プロパティにマッピングされて、それらのマージンの幅をピクセル単位で指定します。

**警告:** このプロパティは廃止されました。代わりに、CSS の `margin` プロパティとその個別指定プロパティを使用して、`<img>` の周囲に余白を設定してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-img-hspace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: align プロパティ
=============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`align`** は `HTMLImageElement` インターフェイスの*廃止された*プロパティで、コンテナーに対して画像をどのように配置するかを示す文字列です。

代わりに CSS プロパティ `vertical-align` を使用する必要があり、その名前にもかかわらず実際に画像に対しても機能します。また、 `float` プロパティを使って、画像を左または右マージンに浮動させることができます。

`align` プロパティは、HTML の `align` コンテンツ属性を反映します。

値
-

文字列で、画像の配置モードを設定する以下の文字列のうちの一つを指定します。

### ベースラインの配置

 これら 3 つの値は、テキストのベースラインに対する要素の配置を指定します。
 これらは、 CSS の `vertical-align` プロパティを使用して置き換える必要があります。

`bottom`

画像の下端を現在のテキストのベースラインと垂直方向に揃えます。**既定値**です。

`middle`

オブジェクトの中心を、現在のベースラインと垂直に整列します。

`top`

オブジェクトの上端を、現在のベースラインと垂直に整列します。

`vertical-align` は、その値に対していくつかの追加オプションを提供していることに留意しておくとよいでしょう。

### 画像を水平に浮動させる

`left` および `right` プロパティはベースラインと相対的な配置に影響を与えません。画像を左または右のマージンに「浮動」させ、続くテキストが画像の周りに流れるようにします。代わりに、CSS の `float` プロパティを使用して、値として `left` または `right` のいずれかを指定するようにしてください。

`left`

画像の左端が現在のマージンと同じ位置になるように、画像を浮動させます。その後に続くテキストは、画像の右端に流れるようになります。

`right`

画像の右端が右マージンと同じ位置になるように浮動させます。その後に続くテキストは、画像の左端に沿って流れます。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-img-align |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLImageElement: referrerPolicy プロパティ
======================================

**`HTMLImageElement.referrerPolicy`** プロパティは、
 HTML の `<img>` 要素の `referrerpolicy` 属性を反映し、リソースの取得時に送信されるリファラーを定義します。

値
-

文字列で、以下の何れかです。

`no-referrer`

`Referer` ヘッダーは完全に省略されます。リクエストと共に送信されるリファラー情報はありません。

`no-referrer-when-downgrade`

プロトコルのセキュリティレベルが変わらない場合（例: HTTP→HTTP、HTTPS→HTTPS）にはリファラーとして URL を送信し、セキュリティレベルの低い宛先（例: HTTPS→HTTP）には送信しません。

`origin`

 どのような場合でも、この文書のオリジンだけをリファラーとして送信します。
 文書 `https://example.com/page.html` はリファラーとして `https://example.com/` を送ります。


`origin-when-cross-origin`

同一オリジンリクエストを行う場合は完全な URL を送信し、それ以外の場合は文書のオリジンのみを送信します。

`same-origin`

リファラーは同一サイトオリジンには送信されますが、オリジン間リクエストではリファラー情報が送信されません。

`strict-origin`

プロトコルのセキュリティレベルが変わらない場合（例: HTTPS→HTTPS）だけ、文書のオリジンをリファラーとして送信し、セキュリティレベルの低い宛先（例: HTTPS→HTTP）には送信しないようにします。

`strict-origin-when-cross-origin` (default)

これは、ポリシーが指定されていない場合のユーザーエージェントの既定の動作です。同一オリジンリクエストを行う場合は完全な URL を送信し、プロトコルのセキュリティレベルが変わらない場合はオリジンのみを送信し（例: HTTPS→HTTPS）、セキュリティレベルの低い宛先にはヘッダーを送信しません（例: HTTPS→HTTP）。

`unsafe-url`

 同一オリジンまたはオリジン間リクエストを実行するときに、完全な URL を送信します。このポリシーは、 TLS で保護されたリソースから安全でないオリジンへのオリジンとパスを漏洩します。
 この設定の影響を慎重に検討してください。


例
-


```js
const img = new Image();
img.src = "img/logo.png";
img.referrerPolicy = "origin";

const div = document.getElementById("divAround");
div.appendChild(img); // オリジンをリファラーとして画像を取得する
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-img-referrerpolicy |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLAnchorElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`,
 `HTMLIFrameElement.referrerPolicy`
HTMLImageElement: src プロパティ
===========================

`HTMLImageElement` の **`src`** プロパティは、HTML の `src` 属性を反映し、`<img>` 要素に表示する画像を指定します。

値
-

単一の画像のみを指定し、ブラウザーがビューポートサイズと画面のピクセル密度に最適な画像を選択できるように複数の画像を指定しなかった場合、`src` 属性は希望する画像の URL を指定する文字列となります。これは、HTML の中で `src` コンテンツ属性を用いて設定するか、プログラムによって要素の `src` プロパティを設定することで行うことができます。

`srcset` コンテンツ属性を使って、画面のピクセル密度に応じた複数の画像の候補を提供する場合は、`src` 属性で指定された URL は、2 通りの方法で使用されます。

* `srcset` に対応していないブラウザーのための代替画像として使用します。
* `srcset` にサイズ倍率 `1x` で画像を指定したのと同等になります。つまり、`src` で指定した画像は、低密度の画面（ふつうの 72 DPI や 96 DPI ディスプレイなど）で使用されます。

さらに、`src` を `sizes` （または、対応する `sizes` コンテンツ属性）*および* `srcset` の両方を使用して、ビューポートサイズに基づいて画像を選択する場合、 `src` 属性は `sizes` と `srcset` に対応していないブラウザーのための予備としてのみ使用されます。その他の場合は、全く使用されません。

例
-

### 単一の画像の指定

#### HTML


```html
<img
 src="grapefruit-slice-332-332.jpg"
 width="160"
 alt="グレープフルーツのスライスです。おいしそう。" />
```


#### 結果

### 一連の画像を src で使用

一連の画像を `srcset` プロパティで使用する場合、`src` は古いブラウザー用の予備画像として、あるいは画像の `1x` サイズとして機能します。

#### HTML

#### 結果

### ビューポートベース選択時の代替画像の指定

ビューポートベースで画像を選択する際に、`sizes` プロパティも指定して `srcset` から選択すると、`src` プロパティはビューポートベースでの選択に対応していないブラウザーで使用される代替画像として機能します。ビューポートベースの選択に対応しているブラウザーは、この場合は `src` を無視します。

#### HTML

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-img-src |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.