HTML
イメージ

構文

• <img src="" alt="">

パラメーター

イメージの作成

ページに画像を追加するには、imageタグを使用します。

イメージタグ（ img ）には終了タグがありません。 imgタグに与える主な2つの属性はsrc 、画像ソース、 alt 。これは画像を説明する代替テキストです。

<img src="images/hello.png" alt="Hello World">

ウェブURLから画像を取得することもできます：

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

注：画像は技術的にHTMLページに挿入されず、画像はHTMLページにリンクされます。 <img>タグは、参照画像用の保存領域を作成します。

base64を使用してページ内に直接画像を埋め込むことも可能です：

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

ヒント：イメージを別のドキュメントにリンクするには、単に<a>タグ内に<img>タグをネストします。

画像の幅と高さ

注： width属性とheight属性は、画像では推奨されていません 。彼らの使用はずっと厳しくなっています。

イメージのサイズは、イメージタグのwidth属性とheight属性を使用して指定できます。

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

画像のwidthとheightを指定することで、実際の画像サイズを指定していても、ページの配置方法に関するヒントがブラウザに表示されます。イメージのサイズが指定されていない場合は、イメージがロードされた後にブラウザがページのレイアウトを再計算する必要があり、ロード中にページが「ジャンプ」する可能性があります。

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

代替テキストの選択

Alt-Textは、視覚障害のあるユーザーや検索エンジンでスクリーンリーダーが使用します。そのため、あなたの画像に適切なaltテキストを書くことが重要です。

イメージをalt属性で置き換えても、テキストは正しく表示されます。例えば：

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

イメージがなければ、これは次のようになります。

匿名ユーザーavatar匿名ユーザーが書いた：

Lorem ipsum dolor sed。

アイコンの編集 / 削除アイコン

これを修正するには：

• アバターのaltテキストを削除します。この画像は、覗き見るユーザー（匿名であることを示す簡単に識別可能なアイコン）の情報を追加しますが、この情報は既にテキストで利用可能です。 ¹
• アイコンのalt-textから「icon」を削除します。これがアイコンであることが分かっていれば、その実際の目的を伝えることはできません。

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

匿名ユーザーが書いた：

Lorem ipsum dolor sed。

編集 / 削除

脚注

¹空のalt属性を含めることとそれを完全に除外することの間に意味的な違いがあります。空のalt属性は、イメージがコンテンツの重要な部分ではないことを示します（この場合は真であり、それは残りの部分を理解する必要がない単なる追加イメージです）。したがって、レンダリングから省略することができます。しかし、alt属性がないことは、イメージがコンテンツの重要な部分であり、レンダリングにテキスト同等物が存在しないことを示します。

srcset属性を使用した応答イメージ

サイズのあるsrcsetの使用

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizesはメディアクエリーのようなもので、画像がビューポートにどれくらいのスペースを要しているかを表します。

• ビューポートが1200pxより大きい場合、画像は正確に580pxです（たとえば、コンテンツはコンテナ内で最大幅1200pxです。画像の半分がマージンを引いた値）。
• ビューポートが640pxと1200pxの間にある場合、画像はビューポートの48％を占めます（たとえば、画像のスケールはページで、ビューポートの幅からマージンを引いた値の半分をとります）。
• ビューポートが他のサイズ（640px未満の場合）の場合、画像はビューポートの98％を占めます（たとえば、画像のスケールはページで、ビューポートの全幅から余白を引いた値です）。 最後の項目については、メディア条件を省略する必要があります。

srcsetは単に我々が利用可能な画像とそのサイズをブラウザに伝えています。

• img/hello-300.jpgはimg/hello-300.jpg 、
• img/hello-600.jpgはimg/hello-600.jpg幅ですが、
• img/hello-900.jpgは900pxです
• img/hello-1200.jpgは1200ピクセルです

srcは常に必須の画像ソースです。 srcsetを使用する場合、ブラウザがsrcsetサポートしていない場合、 srcは代替画像をsrcsetます。

サイズのないsrcsetの使用

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcsetは、利用可能なイメージのリストを、デバイスピクセル比x descriptorで提供します。

• デバイスピクセル比率が1の場合は、 img/hello-300.jpg使用してimg/hello-300.jpg
• デバイスのピクセル比率が2の場合は、 img/hello-600.jpg使用してimg/hello-600.jpg
• デバイスのピクセル比率が3の場合は、 img/hello-1200.jpg使用してimg/hello-1200.jpg

srcは常に必須の画像ソースです。 srcsetを使用する場合、ブラウザがsrcsetサポートしていない場合、 srcは代替画像をsrcsetます。

画素を用いた応答画像

コード

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

使用法

異なる画面幅で異なる画像を表示するには、上の例に示すように、画像タグにソースタグを使用してすべての画像を含める必要があります。

結果

• 画面の幅が600ピクセルを超える画面では、large_image.jpgが表示されます
• 画面幅> 450ピクセルの画面では、small_image.jpgが表示されます
• 他の画面幅の画面では、default_image.jpgが表示されます