Webサイトのレスポンシブ対応の一環として、1つの画像要素に対して複数の画像ファイルを用意の上、表示端末に合わせた最適な画像の出しわけ表示を可能とする「レスポンシブイメージ」を利用するサイトが一般的となっています。
本記事では、レスポンシブイメージの記述方式を採用している画像要素の編集方法をご紹介します。
最適な画像の判定方法および読み込みタイミングはブラウザによって仕様が異なりますのでご留意ください。画像要素（imgタグ）に複数の画像ファイルを設定するケース
srcset属性・sizes属性を指定したimgタグの基本
imgタグにsrcset属性とsizes属性を指定することで、デバイス幅・解像度に適した画像が自動でエンドユーザーのブラウザで判定され表示されるようにできます。
こちらは、特定の画面幅や解像度の場合に、こちらで指定した画像を必ず表示するよう担保する手法ではありません。 指定画像を表示したい場合は、pictureタグやCSSでメディアクエリを記述してご対応ください。例えば、以下のようなHTMLコードでは、サイズの異なる3つの画像を設定しています。
- srcset属性： 画像ファイルのパス、および画像自体の横幅の情報を宣言
- 例では） "画像１のパス 400w"は、画像1のファイル場所、および画像1の横幅が400pxであることを示す
- sizes属性： 画像をページで表示する際の横幅を指定
- 例では） 画面幅1280px以下の場合は、画面幅100%で表示し、それ以外は1280px幅で表示する
<img srcset="画像1のパス 400w,
画像2のパス 1200w"
src="画像2のパス"
sizes="(max-width: 1280px) 100vw, 1280px"
>なお、srcset属性では、画像の横幅の情報を宣言する以外に、画像が対応するデバイスピクセル比（画面解像度）の情報を「~x」の形式で宣言する場合もあります。この場合はsizes属性の設定は不要です。
<img srcset="画像1のパス,
画像2のパス 2x"
src="画像2のパス"
>ページエディタでimgタグに対してレスポンシブイメージを設定する
1)imgタグの「レスポンシブ画像」項目を確認する
ページエディタのプレビュー上で、編集したい画像要素をブロックとして選択し、編集モードに切り替えます。
レスポンシブ画像が既に設定されている場合、画像候補（srcset）や画面幅の条件（sizes）を確認できます。
2) レスポンシブ画像を編集する
「レスポンシブ画像を編集」ボタンをクリックし、以下を設定します。
| 設定項目 | 説明 | 注意事項 |
|---|---|---|
| 1. 最適な画像を選ぶ条件 | 画面幅（px）とデバイス解像度（x）から選択します | デバイス解像度を選択する場合、画面幅の条件は設定不要です |
| 2-1.画像候補 | srcset属性に対応します。 上記で設定した条件に応じて、表示する画像候補 |
・画像幅は必ず0より大きい値を入力してください。 |
| 2-2.画面幅の条件 | sizez属性に対応します。 特定の画面幅で、画像をどのサイズ・幅で表示するかを指定します。 |
最適な画像を選ぶ条件に対応して、画像候補や画面幅の条件を設定します。
組み合わせとして不適切な設定となっている場合アラートが表示されますので、設定を見直してください。pictureタグを使用しているケース
pictureタグの基本
pictureタグは、指定した条件に合致する最適な画像ファイルを表示するために使用されます。
例えば、以下のようなHTMLコードでは、画面幅の条件（media属性）を指定し、該当条件を満たす際に読み込む画像を複数設定しています。
上から順番に条件を判定して合致する内容があれば表示（以降の判定は行わず表示されない）、いずれにも合致しない場合にimgタグで登録された内容を表示する仕組みです。
<picture>
<source srcset="画像1のパス" media="(max-width: 767px)"> -- スマートフォン用
<source srcset="画像2のパス" media="(max-width: 1279px)"> -- タブレット用
<img src="画像3のパス"> -- PC用
</picture>ページエディタでpictureタグを編集する
1)プレビュー上でpictureタグをブロックとして選択する
編集したい画像をプレビュー上でクリックすると、多くのケースでpictureタグに含まれる画像要素（imgタグ）が選択された状態になります。
そのまま編集を進めてしまうと、pictureタグで設定された他の指定条件時の画像ファイル等の変更ができないため、以下のようなガイドテキストが表示されます。 親要素にあたるpictureタグをブロックとして選択し直した上で編集を行います。
一度編集したい画像をプレビュー上でクリックの上、右上に表示されるパネルから、pictureタグを選択すると便利です。
2)画像素材を一つずつ編集する
pictureタグを選択すると、設定されているレスポンシブ画像と表示条件の組み合わせが、判定される優先度順に並んでいます。
画像や表示条件を編集・削除したり、新たに設定することが可能です。
設定したレスポンシブ画像をドラッグアンドドロップで並び替えを行うことで、判定される優先度を入れ替えることができます。
Tips/注意事項
pictureタグ内のimgタグ（デフォルト画像）に対しては、当サポートサイト記事の前半で紹介したレスポンシブ設定は基本的には不要のため、GUI上ではできないように制限をかけています。
ガイドに従って、親要素のpictureタグでレスポンシブイメージの設定を行なってください。
もし元サイト側ですでに該当imgタグにレスポンシブ設定がされてしまっている場合、右パネル内のレスポンシブ設定を開いて、画像候補や画面幅の条件を削除してからpictureタグの編集を行なってください。