レスポンシブ対応の一環として、1つの画像要素に対して複数の画像ファイルを用意の上、表示端末に合わせた最適な画像の出し分け表示を可能とするレスポンシブイメージを利用するサイトが増えています。

本記事では、レスポンシブイメージを採用している画像要素（例: imgタグ、pictureタグ）の編集方法について解説します。

補足

最適な画像の判定方法および読み込みタイミングはブラウザによって仕様が異なりますのでご留意ください。

imgタグにおけるレスポンシブイメージの設定方法

srcset属性・sizes属性を使用する

imgタグにsrcset属性とsizes属性を指定すると、端末の画面幅や解像度に基づいて最適な画像をブラウザが自動的に選択し、表示できます。

ご注意ください

特定の画面幅や解像度で必ず特定の画像を表示する場合は、pictureタグやCSSのメディアクエリを使用してください。

以下のコード例では、異なるサイズの画像を指定しています。

<img srcset="画像1のパス 400w,
             画像2のパス 1200w"
     src="画像2のパス"
     sizes="(max-width: 1280px) 100vw, 1280px"
>

各属性の説明

srcset属性:
画像ファイルのパスと横幅情報を指定。例: 画像1のパス 400wは、横幅400pxの画像を指定。
sizes属性:
表示する画像の横幅を条件に応じて指定。例: 画面幅1280px以下では画面幅100%で表示、それ以外では1280px幅で表示。

なお、srcset属性では、画像の横幅の情報を宣言する以外に、デバイス解像度（ピクセル比）の情報を~xの形式で宣言する場合もあります。この場合はsizes属性の設定は不要です。

<img srcset="画像1のパス,
             画像2のパス 2x"
     src="画像2のパス"
>

ブロックエディターでimgタグを編集する手順

1. imgタグの「レスポンシブ画像」項目を確認する

ブロックエディターのプレビュー上で、編集したい画像要素をブロックとして選択し、編集モードに切り替えます。
レスポンシブ画像が既に設定されている場合、画像候補（srcset）や画面幅の条件（sizes）を確認できます。

2. レスポンシブ画像を編集する

［レスポンシブ画像を編集］ボタンをクリックし、以下を設定します。

ご注意ください

組み合わせとして不適切な設定となっている場合アラートが表示されますので、設定を見直してください。

設定項目	説明	注意事項
最適な画像を選ぶ条件	画像が切り替わる条件を、画面幅（px）かデバイス解像度（x）を選択します	デバイス解像度を選択する場合、画面幅の条件は設定不要です
画像候補	srcset属性に対応します。上記で設定した条件に応じて、表示する画像候補を設定します。	画像幅は必ず0より大きい値を入力してください。
画面幅の条件	sizez属性に対応します。特定の画面幅で、画像をどのサイズ・幅で表示するかを指定します。

null

pictureタグにおけるレスポンシブイメージの設定方法

条件に応じた画像の切り替え

pictureタグを使うと、より柔軟な条件で画像を切り替えることが可能です。以下は例です。

<picture>
  <source srcset="画像1のパス" media="(max-width: 767px)"> -- スマートフォン用
  <source srcset="画像2のパス" media="(max-width: 1279px)"> -- タブレット用
  <img src="画像3のパス"> -- PC用
</picture>

条件に一致した最初の画像が表示され、それ以降の判定は行われません。どの条件にも一致しない場合、imgタグの画像が表示されます。