img要素(イメージタグ)で画像を埋め込む【HTML】

HTMLなどの文書において、画像を埋め込むときはimg要素を使います。

img要素で使える属性について紹介したいと思います。

img要素で使用できる属性

img要素で使用できる属性は以下のようなものがあります。

• src（ソース）
• srcset（ソース・セット）
• alt（オルタナティブ）
• width（ウィズ）
• height（ハイト）
• crossorigin（クロス・オリジン）
• usemap（ユーズ・マップ）
• ismap（イズ・マップ）

src（ソース）

src属性は埋め込む画像のURLを指定する属性で、img要素を使う上でsrc属性は必須です。

埋め込むことができるのはPNG,JPEG,GIF,アニメーションGIF,SVGなどの画像ファイルのみです。

srcset（ソース・セット）

srcset属性では複数のイメージソースを指定し、ディスプレイのサイズやデバイスピクセル比によって画像を切り替えたりすることができます。

たとえば上のように指定することができます。

さっき紹介したsrc属性で指定している分「example.png」が通常時に表示される画像で、srcset属性でその他の条件に応じた代替画像を指定しており、デバイスピクセル比が1.5の環境においては「example-1.5x.png」が表示されますし、デバイスピクセル比が2の環境においては「example-2x.png」が表示されます。

srcset属性では画像のURLと、表示する条件（上の例だと1.5xや2x）を半角スペースで区切って指定します。

デバイスピクセル比のときは「x」という単位をつけますが、画面の幅「w」と高さ「h」で指定することも可能。

また、複数の画像はカンマ（,）で指定することができます。

alt（オルタナティブ）

alt属性は、ブラウザ環境などによって画像が表示されなかった場合に代わりに表示される代替テキストを指定するための属性。

alt属性で指定する代替テキストは、画像タイトルというよりかは、その画像が表している内容の説明を文章などで記述します。

文脈によって特に意味を持たないような画像だったら省略してもかまいませんが、説明する必要がある画像にはなるべくalt属性を指定する方がいいと思います。

ちなみにalt属性の内容は検索エンジンのクローラーも読み込むので、SEOにも多少関係があります。

width（ウィズ）

ウィズとかウィズスとか言ったりしますが、widthは画像の幅を指定するための属性です。

値として指定できるのは正の整数です。

height（ハイト）

heightは画像の高さを指定するための属性。

widthと同じく値として指定できるのは正の整数です。

crossorigin（クロス・オリジン）

crossorigin属性は、CORS（Cross-Origin Resource Sharing）という、異なるドメインの間で画像などを共有したりするクロスドメイン通信の設定をする属性です。

anonymousとuse-credentialsという値を指定することができ、値が空だったり正しくない場合はanonymousとして扱われます。

2つの値の違いは以下の通りです。

anonymous

CookieやクライアントサイドのSSL証明書、HTTP認証などのユーザー認証情報は不要

use-credentials

ユーザー認証情報が必要

usemap（ユーズ・マップ）

埋め込んだ画像をクリッカブルマップとして使う場合に指定するのがusemap属性です。

クリッカブルマップではmap要素を使うのですが、そのmap要素で指定しているname属性の値を、usemap属性の値にも指定します。（先頭に#をつけて）

ismap（イズ・マップ）

ismap属性もusemap属性と同じく、画像をクリッカブルマップとして使う場合に指定するものです。

クリックされた座標をもとに処理するプログラムのURLをa要素で指定し、ismap属性を指定した画像を配置することでクリッカブルマップを実行します。

ちなみにismap属性は値を指定する必要がない論理属性です。