WordPress

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

投稿日:2017年12月28日 更新日:

1. はじめに

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

2. srcsetsizes の仕組み

srcsetsizes について簡単に説明します。

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

<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を指定する(複数可)

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

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

2019.04.10

3. WordPress での srcsetsizes

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. 参考情報

関連

WordPress

WSL + Homestead で WordPress のプラグイン開発環境を作る

2017.12.26
WordPress

WordPress:本文に<p>や<br>が自動で追加されないようにする方法(wpautop を無効にする)

2018.01.30
WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

2018.01.15

スポンサーリンク



📂-WordPress
-,

執筆者:labo


  1. taka より:

    すごく参考になりました。

    表示幅1000pxのサイトで、高解像度用に2000pxの画像もUPすると、
    (max-width: 2000px) 100vw, 2000px となってしまい、
    ビューポート幅が1000pxを超えると2000px画像が表示されて困っていました。
    こちらのコードで、(max-width:1000px) 100vw, 1000px に書き換えることができました。

    しかし、同時にすべての画像が(max-width:1000px) 100vw, 1000px となるので、小さく表示しい画像まで大きくなってしまいます。

    アイキャッチなどはテンプレートで書き込むことで何とかしていたのですが、それ以外の画像に対しても、maxは1000pxで、それ未満のものは画像サイズに沿うように出力することはできないものでしょうか?

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生する

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生した場合の対応方法について書きました。

WordPress

WordPress のプラグイン Autoptimize についての覚書

WordPress のプラグイン Autoptimize についての覚書です。

WordPressで作られたサイトの利用テーマを調査する

ブラウザでサイトを見ていて、「これは WordPressを使っているのか?」「WordPressを使っているとしてら、何のテーマを使っているのか?」を調査する方法です。 ※ 100%分かるわけではあり …

WordPress

WSL + Homestead で WordPress のプラグイン開発環境を作る

目次1. はじめに2. 環境3. 作業1. 今回 WordPress をインストールするディレクトリを用意します2. Homestead に Webアプリケーションの設定を追加します3. Window …

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …