img タグエレメント
img タグエレメントは、画像を web ページに取り込むための HTML タグエレメントです。
扱える画像は、JPG、GIF、PNG、APNG、AVIF、SVG、WebP 形式です。
img タグエレメントの src 属性で画像ファイルの場所を指定します。そのファイルデータをブラウザが読み込みこむことで、あたかもページ内にあるように表示します。
<img src="url_" />
タグの編集を参照してください。
HTML においては、ワードのような文章編集ソフトのように画像などのメディアを手軽に埋め込むことができません。表示したい箇所にその取り込み元（URL）を指定した <img> エレメントを配置します。
例えば、 img
ディレクトリの example.jpg という画像を取り込むには以下のようにします。
<img src="./img/example.jpg" />
画像ファイルはimg
やimage
といったディレクトリ名で保存しておくことが多いです。
右寄せ、左寄せ
画像ファイルの表示は、文章の段落や章の中で右寄せ
や左寄せ
で表示することができます。詳しくは以下の右寄せ、左寄せ
を参照してください。
ユーザビリティ(usability)
モバイル ユーザビリティ
といった画面の大きさによって読み込む画像を替えるには<picture>エレメントを使います。
- ad -
属性
画像や動画、音声といった非テキストコンテンツには alt 属性や title 属性を使ってテキストでコンテンツの内容が分かるようにすることをお勧めします。
- ad -
右寄せ、左寄せ
画像ファイルの表示は、文章の段落や章の中で右寄せ
や左寄せ
といった回り込み
表示をすることができます。
右寄せ
や左寄せ
のやり方は、CSS スタイルの float: left / right ;
を使います。
さらに、この回り込み
は適当な位置で終了させなければなりません。終了するには、clear: right | left | both;です。
Example
- ad -
JavaScript
<img> エレメントは HTMLImageElement インターフェイスで定義されています。
その他
jpeg は、国際標準化機構 (ISO)や日本産業規格 (JIS)によって規格化されています。画像の圧縮に優れていますが、どうしても画質の劣化を伴います。
png の方が画質の劣化は起こり難いです。
tiff は、画像の圧縮を行わないためにファイルが大きくなる傾向にあります。圧縮を行わないために画質の劣化が起こり難いです。