HTMLのimgタグを使った画像の埋め込み
ウェブページに画像を表示するには、HTMLの<img>タグを使用します。
<img>タグは、画像をウェブページに埋め込むための自己終了タグであり、開始タグと終了タグのペアは必要ありません。
imgタグの属性
<img>タグには、画像の表示方法を制御するための様々な属性があります。
以下は、よく使用される属性の一部です。
| 属性 | 説明 | 必須 |
|---|---|---|
src |
画像のURLを指定します。 | 必須 |
alt |
画像が表示できない場合に表示する代替テキストを指定します。 | 必須 |
width |
画像の幅をピクセルまたはパーセンテージで指定します。 | 任意 |
height |
画像の高さをピクセルまたはパーセンテージで指定します。 | 任意 |
imgタグの使用例
以下は、<img>タグを使用して画像を表示する例です。
<img src="https://www.example.com/images/sample.jpg" alt="サンプル画像" width="500" height="300">
このコードは、https://www.example.com/images/sample.jpgにある画像を表示し、画像が表示できない場合は「サンプル画像」というテキストを表示します。また、画像の幅を500ピクセル、高さを300ピクセルに設定しています。
画像のフォーマット
<img>タグでは、以下の画像フォーマットを表示することができます。
- JPEG (
.jpg,.jpeg) - PNG (
.png) - GIF (
.gif) - SVG (
.svg) - WebP (
.webp)
各画像フォーマットには、それぞれ特徴があります。例えば、JPEGは写真のような画像に向いており、PNGはロゴのような画像に向いています。適切な画像フォーマットを選択することで、ファイルサイズを小さくし、ページの読み込み速度を向上させることができます。
画像の最適化
ウェブページに画像を埋め込む際には、画像の最適化が重要です。画像のファイルサイズが大きいと、ページの読み込み速度が遅くなる可能性があります。画像のファイルサイズを小さくするには、以下の方法があります。
- 画像編集ソフトを使用して、画像のサイズを縮小する
- 画像の画質を落とす
- 適切な画像フォーマットを選択する
画像を最適化することで、ページの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させることができます。
参考資料
- <img>: The Image Embed element - HTML: HyperText Markup Language | MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
Q&A
Q1: alt属性はなぜ重要なのですか？
A1: alt属性は、画像が表示できない場合に代替テキストを表示するために使用されます。
これは、視覚障碍のあるユーザーや、低速なインターネット接続を使用しているユーザーにとって特に重要です。
また、SEOの観点からも重要です。検索エンジンは、画像の内容を理解するためにalt属性を使用します。
Q2: 画像のサイズを指定しないとどうなるのですか？
A2: 画像のサイズを指定しないと、ブラウザは画像の元のサイズで表示しようとします。 これにより、ページのレイアウトが崩れたり、読み込みに時間がかかったりする可能性があります。 そのため、可能な限り画像のサイズを指定することをお勧めします。
Q3: レスポンシブな画像を表示するにはどうすればよいですか？
A3: レスポンシブな画像を表示するには、CSSのmax-widthプロパティを使用します。
max-width: 100%;を設定することで、画像がコンテナの幅を超えないようにすることができます。
また、height: auto;を設定することで、アスペクト比を維持しながら画像の高さを自動調整することができます。