HTMLでページに画像/写真を追加するには<img>タグを使います。URL(リモートサーバーから)でも、ローカルのファイルパスでも動作します。

基本の使い方

<img src="image.jpg" alt="画像の説明">

<img>は単独のタグです — 閉じタグ(</img>)はありません。

重要な属性(Attributes)

• src:画像のURLまたはファイルパス(必須)。
• alt:代替テキスト — 画像が読み込めないときやスクリーンリーダーのため(必須とみなされます)。
• width / height:ピクセル単位のサイズ。
• title:ホバー時に表示される短い説明。

2つの方法:URL vs ローカル

1. URLで(リモート)

<img src="https://www.burakbayram.com/wp-content/uploads/2026/photo.jpg" alt="風景">

2. ローカルファイル

HTMLファイルと同じフォルダの場合:

<img src="photo.jpg" alt="風景">

サブフォルダの場合:

<img src="images/photo.jpg" alt="風景">

2026年 — モダンな<img>ベストプラクティス

• loading=”lazy”:画面内の位置に来るまで読み込まれません。ページ速度の向上に。
• decoding=”async”:ブラウザがバックグラウンドでデコードします。
• srcset:異なる画面解像度に応じた異なる画像ファイル。
• sizes:異なるビューポート向けのサイズ指定。
• WebP / AVIF形式:JPG/PNGより50〜80%小さい。
• <picture>タグ:アートディレクションとフォーマットのフォールバック。

モダンな例

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="風景"
       width="800" height="600"
       loading="lazy" decoding="async">
</picture>