ワードプレスのsrcsetとsizes設定を一番わかりやすく説明

ワードプレスでは画像を挿入したときに自動でsrcsetとsizesというものがimgタグに埋め込まれるようになっています。

このsrcsetとsizes、パソコンやタブレット、それからスマホといった具合に異なる画面サイズで閲覧されるようになったWEBサイトの心強い味方！なんですが、HTML見てみるとなんかぐちゃぐちゃムダに長ったらしいし、仕組みよくわからないし…。もういいや！消しちゃえ！と無効にしてしまってる人もいるのではないでしょうか。

というコトでここではワードプレスのsrcsetとsizes設定を一番わかりやすく解説したいと思います。

1. srcset、sizesとは【おさらい】
1. srcset
2. sizes
2. ワードプレスの設定振り返り
3. ワードプレスのsizes
4. 満を持してのsrcset
5. やっかいなレティーナディスプレイ
1. srcsetとレティーナ
6. まとめ

srcset、sizesとは【おさらい】

そもそもsrcsetとsizesとは？というのをサクッとおさらいしておきますね。

srcset

srcsetはその名の通り、imgタグのsrcを何個かセットにしたやつ。

imgタグのsrcって「～～.jpg」みたいな感じで画像URLを書く部分ですよね。それが複数集まって、セットになったのがsrcsetなのです。

普通のsrcだったらその画像がシンプルに読み込まれますよね。でもsrcsetはその何個かある中から一番”適した画像を1個だけ”読み込む動きになります。

例えばimgタグの中が従来通りsrcだけだったら、パソコンでもスマホでも読み込まれる写真は同じものになっちゃうわけです。でもSEOとかを見るととにかく読み込み速度早い方がいい！みたいな風潮ありますよね。口ずっぱく言われるというか。

パソコン用の大きな写真は果たして小さな画面のスマホに必要なのかな？いやいらないハズ、もっとちっちゃい画像にすれば容量削減出来てSEO的にもいいハズ！ですよね。

こんな時にsrcsetの出番。パソコンは横幅広いから大きめの写真で～！反対にスマホが横幅小さいから小さい写真で読み込み高速化～！というのをsrcsetがしてくれてるんです。

sizes

sizesはsrcsetとニコイチの関係。斬っても切り離せないやつ。

こいつはsrcsetの中からピッタリの1枚を選択するときのルールになります。このルール通りにパソコンやスマホは自分に一番ピッタリの画像をsrcsetの中から1枚選ぶ、ということを自動でやってるんです。

ワードプレスの設定振り返り

んじゃ次にワードプレスが自動生成するsrcsetとsizes設定がどんなものなのかみておきましょう。こっちもサクッと。…そう、あの長ったらしいやつです。

srcset="○○.png 960w, ××.png 480w, △△.png 768w, □□.png 1138w"
sizes="(max-width: 960px) 100vw, 960px"

ふむふむ、ワードプレスが自動生成する「srcset」、こんな風にいろんなサイズの画像がたくさん並んでる感じ。メディアサイズの設定によって並んでる個数や数字は違ってきますのでなんとなくで見といてくださいね。

んで次に、sizesの方はなんかメディアクエリ（max-width）みたいなのあがってその後にサイズ指定っぽいのが2つあるなー、という感じ。

今はなにがなんやら意味が分からなくてもぜんぜんOK。んじゃワードプレスが自動生成するsrcsetとsizesのおさらいもすんだんでちょっとくわしく見ていきましょう。

ワードプレスのsizes

上の方に書かれてるsrcsetから見ていくんじゃないの？とギモンに思われるかもですが、ピッタリの画像を1個選ぶルールであるsizesの方から見ていく方がわかりやすいんです。srcsetは後からみるので安心してくださいね。

さて。んじゃsizesを見ていきましょう。

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

これですよね。

sizesっていうのはルールだよ！という話でした。

書き方はいろいろあるんですがワードプレスの場合は「（max-width：○○px）100vw,○○px」というのを必ず自動生成します。ちなみにワードプレスの場合は「○○」の位置に同じ数字が必ず入り、画像を挿入するときに選んだ「大サイズ」とか「中サイズ」とかの数字になります。

私の場合、メディアサイズ設定で「大サイズ」を960pxに設定していて、上で紹介した例は大サイズの画像を挿入したときのやつなので○○の所が960になってます。

さて、それではわかりやすいように○○が960の場合で例を見ていきますね。

「（max-width：960px）100vw,960px」このsizesのルールをストーリー仕立てで書くと、

1. 画面たち「sizes様、ルールを教えてください！」
2. sizes「君たち自分の横幅は？」
3. 画面A「ぼくは1080pxです」画面B「わたしは480px！」
4. sizes「ふーん、なら画面A君は960pxの画像選んで。画面Bちゃんは480pxの画像でよろしく」
5. 画面たち「はい！」

こういう感じ。

画面の横幅が「max-width:960px」以下なら自分の画面サイズ（100vw）の画像選んでね、もし960px超えてるなら960pxの画像選んでね！というコト。

つまりなにかっていうと、ワードプレスのsizesは「自分の画面サイズを超えるような分不相応なバカデカ画像読み込まない設定になってる」というコト！

満を持してのsrcset

ワードプレスのsizesの意味は分かったのでさあいよいよ満を持してのsrcsetを見ていきましょう。

srcset="○○.png 960w, ××.png 480w, △△.png 768w, □□.png 1138w"

これですね。

この例だとsrcsetとして4つの画像が候補に挙がってる状態です。

さっきsrcsetの個数は人や画像によって異なる、と書いたんですがこれはワードプレスの設定で1個の画像につきどれだけサイズ違いを作ってるかで変わってきます。ここらへんはテンプレート側でいろいろ設定してあると思うんで、多い人はsrcsetに10個とか並ぶかもしれません。

さ。ちょっと脱線しました。もう一度srcsetを見ると、それぞれ画像の後ろに「960w」みたいな数字がありますよね。この数字がキモ。

書き出してみると、こんな感じ。

1. ○○.png：960w
2. ××.png：480w
3. △△.png：768w
4. □□.png：1138w

さっきのsizesで画面たちはルールをもらいました。例でいうと画面A君は960pxの画像選ぶ、画面Bちゃんは480pxの画像を選ぶことになったのでした。

もうわかりますね。この中で画面A君、画面Bちゃんが選ぶ画像は、

• 画面A君：○○.png
• 画面Bちゃん：××.png

これでそれぞれの画面がそれぞれの画面サイズにちょうどピッタリの画像を選べた、というコトになります。ムダにバカデカな画像を読み込まないから表示速度も速くなる。めでたしですね。

ピッタリの画像がなかったら…？

例では画面A君も画面Bちゃんも自分にピッタリのサイズの画像がたまたまsrcset内にありました。でもピッタリのサイズがない場合はどうなるの？というギモン。

この場合も近しいサイズの画像を自動で選ぶようになっているので心配はしなくてOK。その近しいサイズの選び方ですが、

1. 自分より大きなサイズでかつ一番小さいものを選ぶ（例：画面Cが500pxなら大きくかつ一番小さい△△.pngが読み込まれる）
2. 自分より大きなサイズの画像がsrcset内にないなら、その中で一番大きいのを選ぶ（例画面Dが1,300pxなら□□.pngが読み込まれる）

となっています。

画面Cは500に近い480を選んだ方が無駄が少なそう、と思ってしまいますが480の画像を500まで伸ばすとちょっとぼやけますよね。srcsetはそれを嫌がってるんですね。だからちょっと大きくてもぼやけない768を選びに行く、と。

ま、とりあえずよき塩梅の画像を自動で選んでくれるのであまり気にしなくてOKです。

やっかいなレティーナディスプレイ

…実はまだ終わりじゃない。レティーナディスプレイこと高精細ディスプレイの説明が残っています。

レティーナディスプレイっていうのは本来はアイフォンが使ってるきれいに表示される画面のコトなんですが、アンドロイドとかに採用されてるいわゆる「高精細ディスプレイ」についても、もうレティーナと呼ぶことが多いと思います。

ようは普通よりきれいに表示されるやつ、高精細ディスプレイのやつ、ぜんぶまとめてレティーナ！と呼んじゃってる感じ。

んで最近ではほぼすべてのスマホがレティーナディスプレイといってもいいくらい。アマゾンのファイアタブレットですら微妙にレティーナ。

レティーナがきれいに見える理由。それは普通の画面は普通に1pxが1pxなんですが、レティーナは4px分の画素を1pxとして表示しちゃうテクノロジー。

なので4つを1個にギュッとするぶん画面が鮮やかに鮮明になるよ！ていうものです。

レティーナディスプレイの場合srcsetが影響を受けます。sizesはなにも影響ないです。

まだ続くのか…、とゲンナリしますが本当にこれで最後。さあワードプレスのsrcsetとレティーナディスプレイについて最後の力を振り絞ってみていきましょう。

srcsetとレティーナ

レティーナディスプレイの場合、sizesで決まったサイズを2倍（レティーナx3なら3倍）したものをsrcsetから探す動きになります。

レティーナx3とは？

「レティーナx3」。この表記があってるのかわからないんですが、レティーナディスプレイの中には9pxを1個にギュッとしたやつ、つまり普通の4pxを1個にギュッとしたレティーナより、もっと高精細な上位レティーナが存在するのです。

これを便宜上「レティーナx3」と表記しちゃってます。

さっきの場合で画面Bちゃんは480px。でも実はレティーナディスプレイだったなら、480の2倍の960をsrcsetから探すようになります。結果480pxでレティーナな画面は○○.pngを読み込みます。

…実はさっきから意図的にsizesの単位「px」とsrcsetの単位「w」について説明を避けてたんですが、sizesの「px」は本当の画面横幅を表してます。レティーナとか普通の画面とかまったく関係なくアイフォンは320pxとか375pxとか物理的な横幅になります。

反対にsrcsetの「w」はレティーナみたいな場合に2倍とか3倍とかされるサイズ表記。

とりあえずレティーナの場合はその倍率分sizesで決まったサイズにかけ算して、それをsrcsetから探す動きになるよ！というのだけ押さえておけばOK！

まとめ

ワードプレスが自然に生成するsrcsetとsizesについてわかりやすく紹介しました。

結局ワードプレスは画面サイズより大きな画像を読み込まないようにイイ感じにsizesのルールを作ってくれてることがわかりました。

ただ、最近ではスマホがレティーナばっかりになってて、横幅320pxのアイフォンでレティーナx2でも640px以上の画像をsrcsetから選んじゃいます。

それじゃあ結局小さなサイズの画像（例えば360pxとか）はsrcsetに書いてあっても読み込まれるタイミングほぼない、というコトになるんじゃ？という部分はまた次の機会にお話ししたいと思います。それでは。