目次
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
関連
すごく参考になりました。
表示幅1000pxのサイトで、高解像度用に2000pxの画像もUPすると、
(max-width: 2000px) 100vw, 2000px となってしまい、
ビューポート幅が1000pxを超えると2000px画像が表示されて困っていました。
こちらのコードで、(max-width:1000px) 100vw, 1000px に書き換えることができました。
しかし、同時にすべての画像が(max-width:1000px) 100vw, 1000px となるので、小さく表示しい画像まで大きくなってしまいます。
アイキャッチなどはテンプレートで書き込むことで何とかしていたのですが、それ以外の画像に対しても、maxは1000pxで、それ未満のものは画像サイズに沿うように出力することはできないものでしょうか?
コメントありがとうございます。
本記事内で定義している custom_wp_calculate_image_sizes() 関数の引数は、実際は5つ指定することができます。(詳細→ https://developer.wordpress.org/reference/hooks/wp_calculate_image_sizes/)
全ての引数についてチェックしたわけではありませんが、この5つのどれか($size や $image_meta あたり?)を使って画像の元のサイズを取得し、その値で条件分岐して戻り値(すなわち sizes 属性値)を分けるという方法が考えられます。一度、お試しください。
※ その際は、custom_wp_calculate_image_sizes() 関数に指定した引数の数を、その下の add_filter()関数の第4引数に指定してください(詳細→ https://developer.wordpress.org/reference/functions/add_filter/)。
なるほど!
試してみます。
ありがとうございます。