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

本記事では、レスポンシブイメージの記述方式を採用している画像要素の編集方法をご紹介します。

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

画像要素（imgタグ）に複数の画像ファイルが設定されているケース

srcset属性・sizes属性を指定したimgタグの基本

imgタグにsrcset属性とsizes属性を指定することで、デバイス幅・解像度に適した画像が自動でエンドユーザーのブラウザで判定され表示されるようにできます。

例えば、以下のようなHTMLコードでは、サイズの異なる3つの画像を設定しています。

  • srcset属性： 画像ファイルのパス、および画像自体の横幅の情報を宣言
    • 例では） "画像１のパス 320w"は、画像1のファイル場所、および画像1の横幅が320pxであることを示す
  • sizes属性： 画像をページで表示する際の横幅を指定
    • 例では） 画面幅1280px以下の場合は、画面幅100%で表示し、それ以外は1280px幅で表示する
<img srcset="画像1のパス 320w, 
             画像2のパス 640w,
             画像３のパス 1280w"
     src="画像3のパス"
     sizes="(max-width: 1280px) 100vw, 1280px"
>

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

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

ページエディタでimgタグを編集する

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

ページエディタのプレビュー上で、編集したい画像要素をブロックとして選択し、編集モードに切り替えます。
右側の編集パネルで「レスポンシブ画像」という項目を開くと、srcset属性で指定された画像とその横幅、およびsizes属性を確認できます。

sizes属性内で画像表示の横幅の条件が複数設定されている場合、カンマ（",")区切りで分けて表示されます。
仕様上、編集パネルではsrcset属性で指定された画像ごとにsizez属性内の条件が分けて表示されていますが、各画像ファイルごとの表示条件の指定ではない点にご注意ください。

null

2) 画像ファイルを編集する

新たに画像を登録の上、画像の横幅を指定します。

null

出しわけに利用する画像ファイルを増やすことも可能です。
「追加」ボタンから、新たに出しわけ用の画像を登録し、横幅の情報を入力します。

null

pictureタグを使用しているケース

pictureタグの基本

pictureタグは、指定した条件に合致する最適な画像ファイルを表示するために使用されます。
例えば、以下のようなHTMLコードでは、画面幅の条件（media属性）を指定し、該当条件を満たす際に読み込む画像を複数設定しています。
上から順番に条件を判定して合致する内容があれば表示（以降の判定は行わず表示されない）、いずれにも合致しない場合にimgタグで登録された内容を表示する仕組みです。

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

ページエディタでpictureタグを編集する

1)プレビュー上でpictureタグをブロックとして選択する

編集したい画像をプレビュー上でクリックすると、多くのケースでpictureタグに含まれる画像要素（imgタグ）が選択された状態になります。
そのまま編集を進めてしまうと、pictureタグで設定された他の指定条件時の画像ファイル等の変更ができないため、親要素にあたるpictureタグをブロックとして選択し直した上で編集を行います。

一度編集したい画像をプレビュー上でクリックの上、右上に表示されるパネルから、pictureタグを選択すると便利です。

null

2)画像素材を一つずつ編集する

ページエディター左上のレイヤーパネルを開き、「すべてのブロックの要素」に表示を切り替えると、設定されているsourceタグやimgタグをすべて確認できます。

null

sourceタグやimgタグを一つずつ選択し、ページエディター右側の編集パネルで画像を登録・変更します。
なお、各タグに設定されている属性は右側の編集パネルで確認できます。 

sourceタグの属性（条件）を確認の上、適した画像素材を登録するようにしましょう。

null

または、コード編集ボタンを押して、直接HTMLを編集することも可能です。
null