WordPress に関する srcset と sizes 属性値の簡単な説明

1. はじめに

WordPress で画像を表示すると、img タグに srcset と sizes 属性が自動で追加されます。これは、Responsive Images（レスポンシブ画像）という機能です。このあたりについて簡単に説明します。

2. srcset と sizes の仕組み

srcset と sizes について簡単に説明します。

以下は、img タグの実例です。srcset と sizes 属性が指定されています。

<img src="/wp-content/uploads/2017/12/foo-1024x696.png"
  alt="" class="alignnone size-medium wp-image-nnnn"
  sizes="
    (max-width: 767px) 70vw,
    (max-width: 991px) 350px,
    500px"
  srcset="
    https://example.com/wp-content/uploads/2017/12/foo-300x204.png 400w,
    https://example.com/wp-content/uploads/2017/12/foo-768x522.png 868w,
    https://example.com/wp-content/uploads/2017/12/foo-1024x696.png 1124w"
>

簡単に説明すると、以下となります。

• sizes 属性に、表示したいサイズを指定する。
• srcset 属性に、候補となる画像ファイルのURLを指定する（複数可）

詳しくは以下の記事を参照してください。

3. WordPress での srcset と sizes

WordPress では、こんな感じの img タグが出力されます。
（先ほども全く同じです）

<img src="/wp-content/uploads/2017/12/foo-1024x696.png"
  alt="" class="alignnone size-medium wp-image-nnnn"
  sizes="
    (max-width: 600px) 100vw,
   600px"
  srcset="
    https://example.com/wp-content/uploads/2017/12/foo-300x204.png 400w,
    https://example.com/wp-content/uploads/2017/12/foo-768x522.png 868w,
    https://example.com/wp-content/uploads/2017/12/foo-1024x696.png 1124w"
>

※ 処理の順番に沿うように、srcset より先に sizes を記述しましたが実際は逆の順番で出力されます。

3-1. sizes 属性

WordPress は、sizes 属性を自動で出力してくれます。

例えば、600px の幅を指定して記事に画像を挿入した場合、デフォルトでは以下のような出力になります。

sizes="(max-width: 600px) 100vw, 600px"

つまり、「指定した幅よりもビューポートが小さい場合は、100vw (幅100%) で表示し、それ以外の場合は指定した通りの幅(600px)で表示する」ということになります。多くの場合、この出力で問題ないように思います。（参考：media.php in tags/4.9.6/src/wp-includes – WordPress Trac）

しかし、お使いのテーマに合わせるために sizes 属性の出力を変えたい場合もあるでしょう。その場合には、wp_calculate_image_sizes フィルターを使います。

以下は、実際に変更するコードの一例です。functions.php に記述します。

/**
 * img タグの sizes 属性値を上書きする
 */
function custom_wp_calculate_image_sizes( $sizes, $size ) {
    // テーマにフィットする幅を指定する
    return "(max-width: 767px) 70vw, (max-width: 991px) 350px, 500px";
}
add_filter('wp_calculate_image_sizes', 'custom_wp_calculate_image_sizes', 10 , 2);

※ WordPress の投稿記事に画像を貼る手順と sizes 属性値の変更 と同じコードです。

3-2. srcset 属性

• WordPress が自動で出力してくれます。
  • 元画像(full), サムネイル(thumbnail), 大サイズ(large), 中サイズ(medium), アイキャッチ(post_thumbnail), medium_large の中から、存在するもの全てを指定してくれるようです。
• WordPress は、w 単位で画像の実際の幅をそのままセットします。
• WordPress が自動で生成してくれる srcset の値を変更する必要は特になさそうです。

3-3. [設定] – [メディア] 画面での中サイズ

[設定] – [メディア] 画面の、「中サイズ」のところで「幅の上限」と「高さの上限」が設定できますが、ここれはデフォルトの 300 のままにしておくことをお勧めします。

例えばここを 400 に変更すると、380px 幅の横長画像をアップロードした時に スマホのCSSピクセル幅である 360px (320pxもありますが) 以下の画像が自動生成されません（サムネイル画像は除く）。中サイズよりも大サイズの方が大きい値を指定しているでしょうから、大サイズも生成されません。そうすると、元画像以外に srcset に指定するような画像はないことになり、実際この場合、今のWordPress は srcset, sizes 属性を自動生成してくれません。なので、width, height でスマホサイズ用のサイズを手動で指定しない限り、元のサイズで表示されるのでスマホの画面には収まらないという結果になります。

4. まとめ

ちゃんと使いこなそうと思うと、意外と大変な機能であると思います。

5. 参考情報

• 4.8.4 Images – HTML Standard
• Media Queries Level 4
• Srcset and sizes — ericportis.com
  • 日本語訳
• Responsive Images in WordPress 4.4 – Make WordPress Core
• Responsive Images: Merge Proposal – Make WordPress Core

関連

スポンサーリンク