【Wordpress】スマホで読み込まれる画像とsrcsetの関係。Retinaディスプレイに最適な画像を出す仕組み。

WordPressとsrcset属性、Retinaディスプレイの関係について

以前Wordpressのメディア設定と各画像サイズの最適な使い方をまとめたのですが、今回はメディア設定とも関係があるsrcset属性とその動作についてまとめました。
（以前の記事については、記事の最後にリンクしてあります。）

この記事の内容は知っていなくてもWordpressが勝手にやってくれるので大きな問題は起こらないのですが、知っておくと画像の読み込みに関する知識が深まります。

また、最近のスマートフォンやMacに搭載されているRetinaディスプレイに対しても今より良い対応が出来るようになるかもしれません。

srcset属性の説明からRetinaディスプレイについて。そして、実際に画像の読み込みをテストした内容も含みますので長文ですが、サイト運営者なら知っておいて損はない内容ばかりです。ぜひ最後までお読みいただければと思います。

WordPressにおけるsrcset属性について

まず始めにWordpressにおけるsrcset属性についてです。
コード自体は自動的に付与されるので書き方については割愛します。

Webサイトに画像を表示するにはsrcという属性を使いますが、Wordpress4.4以降ではこのsrc属性の他にもsrcsetという属性が自動的に付与されて出力されます。

中サイズ（300×150px）の画像に付与されたsrcset属性

例えばデフォルトテーマTwenty Twenty-Oneで1600×800pxの画像をアップロードし、中サイズで記事内に埋め込んだ時はこんな感じにsrcsetが付与されます。
（画像出力時に付与されるので、記事編集画面などでは確認できません。）

ずらずら～と表示されるので初めて見ると結構戸惑います・ｗ・
このsrcset属性にはブラウザに最適な画像サイズを出し分ける役割があります。
srcset内には画像のアップロード時にWordpressによって自動生成された画像へのURLがセットされ、このサイズの中からブラウザに一番合うサイズの画像を表示するというという感じです。

アクセス時の端末に合った画像のみが読み込まれるので、これだけURLが書かれていてもいずれか１つの画像のみが読み込まれることになります。

srcだけで画像表示出来るのになぜこんなに画像が用意されているのかと言えばそれはRetina（レティナ）ディスプレイの存在があるからです。

Retinaディスプレイについて

srcset属性の存在意義はズバリRetina（レティナ）ディスプレイへの対応です。

最近のスマートフォンやMacにはRetinaディスプレイという高解像度の画面が使われています。このディスプレイが結構曲者なのです。

例えばiPhone SEの場合、画面サイズは320ptですが事実上は640pxです。
iPhone SE(2世代)なら画面サイズが375ptで事実上750pxの解像度です。
iPhone12 Proにもなると画面が390pt、解像度は1170pxです。

何が言いたいのかというと、Retinaディスプレイは画面サイズの２倍～３倍の解像度で画像を表示しているということです。

パソコンのHDディスプレイで画像を見るよりもスマートフォンで画像を見た方が綺麗に見える。またスマホだけ画像がぼやけてしまうというのもこれが原因です。

この辺りが伝わりにくいと思うので、実際にsrcset属性によって読み込まれる画像をテストしました。

WordPressの自動リサイズ機能について

今回ローカル環境に作ったWordpressで画像の読み込みテストをしました。
テストの前にWordpressの画像リサイズ機能についてちらっと触れます。

オリジナル画像は1600×800px

サンプルとして横幅1600px、縦幅800pxの画像を用意しました。
これをデフォルトテーマ「Twenty Twenty-One」を使ったサイトにアップします。

メディア設定はWordpressの初期設定

メディア設定は初期設定です。この設定でサンプル画像をアップロードします。

サイズが異なる６種類の画像が自動生成される

するとアップロード時にWordpressの機能によって様々なサイズの画像が自動生成されます。メディア設定で設定したサイズの他、Wordpressにデフォルトで設定してあるサイズや、テーマで使用されるサイズの画像が生成されます。

この画像を中サイズで記事に埋め込んでみます。

自動生成された画像がsrcsetに使われる

すると自動生成された画像へのURLがsrcset内にセットされます。

150×150pxの画像はサムネイル用に自動でトリミングされた画像です。
これはアスペクト比が異なるのでセットされません。

こんな感じでWordpressでは自動的にRetinaディスプレイに対応しています。

srcset画像の読み込みテスト

では事前知識が揃ったところで実際に読み込みテストです！
と言いたいところですが、フルサイズ画像を使うとRetinaディスプレイでの読み込みが分かりにくいので大サイズを使います。

「Twenty Twenty-One」はcontent幅が610px

テーマTwenty Twenty-Oneでは画像（文章）が表示される領域の横幅が610pxです。
なので、まずメディア設定の大サイズ610pxに合わせました。

大サイズを1024pxから610pxに変更

610pxの理由は記事冒頭に紹介した記事「WordPressおすすめのメディア設定！」でも解説していますが、Retinaディスプレイではないパソコン用として、大サイズはWebサイトの画像表示幅ギリギリに画像を設定するのが良いと思いますので。

メディア設定を変更しても画像を再アップロードしないとそのサイズが生成されませんので、サンプル画像を再アップロードします。

大サイズを記事に埋め込む

大サイズが準備できたら記事に埋め込みます。

src属性には挿入した画像が使われる

ここでもう一つ大切な内容です。
非Retinaディスプレイ（PC等）ではsrc属性に設定してある画像が使われます。
（src属性は非Retinaディスプレイ用のフォールバックでもあります。）

srcには挿入した画像のURLが入る

Wordpressの場合、src属性には挿入した画像サイズのURLが入ります。
今回は大サイズを記事に挿入したので、パソコンなどのHDディスプレイでは大サイズが使われることになります。

各端末で読み込みテスト！

ここまできたらパソコン、iPhone SE、iPhone12 Proの３機種で読み込み確認したいところですが、あいにく実機を持っていません。

なので今回もChromeに助けてもらいます。
Chromeでデベロッパーツールを開き、レスポンシブツールを起動。
続いてキャッシュを無効にし、読み込んだ画像のみを確認します。

パソコンでの読み込み結果

挿入した大サイズ（610×305px）をパソコンで表示した結果です。

パソコンでの読み込み結果

src属性に指定してある610pxの画像が読み込まれていることが分かります。

スマートフォンでの読み込み結果

iPhone SE(第2世代)

続いてRetinaディスプレイであるiPhone SEで画像を表示した結果です。
iPhone SE(第2世代)は750pxの解像度を持っています。

iPhone SE（第2世代）での読み込み結果

結果、srcsetにある画像のうちの１つである768pxのものが読み込まれました。
768pxの画像は「medium_large」と呼ばれるサイズでWordpress4.4から自動作成されるようになっているものです。

iPhone12 Pro

画面サイズの３倍の解像度を持っているiPhone12 Proでの結果です。

iPhone12 Proでの読み込み結果

iPhone12 Proではsrcsetより1536×768pxの画像が読み込まれました。
解像度は1170pxですのでこれが一番"最適"な画像なのです。

srcset属性あり、なしの画質比較

百聞は一見に如かず…という事でサンプル画像も用意しました。

画像の表示幅は300×150pxですが、上の画像にはsrcsetを付けています。
対して下側にある画像にはsrcsetは付いていません。
分かりやすいようにsrcset属性には1200×600pxの画像のみを設定しました。

300pxの画像（srcsetに1200×600px指定）

300pxの画像（srcset指定なし）

Retinaディスプレイ（スマホ）だと上の画像の方が高画質に見えるはずです。
HDディスプレイのパソコンだと多分同じ画質に見えます。

Retinaディスプレイの時は、srcset属性に設定してあるより高画質な1200×600pxの画像を読んでいるという事が分かるかと思います。

閲覧環境が違っても伝わるように画像化してみました。

画像化してみた。（分からないかな…）

う～ん画像にするとイマイチ分からないですね…
スマホ画面の上下の画質の違い、PCで画質が同じという事が伝えたいのですが。

各項目のまとめ

長くなったので各項目をまとめます。この記事のポイントは以下です。

Wordpressではsrcsetにはアップロード時に自動リサイズされた画像URLが自動的に入り、srcには画像挿入時に選択した画像のURLが入ります。
自動リサイズですが、設定してあるサイズよりも小さいサイズの画像をアップロードしても自動生成されません。

srcsetの出力はfunctions.phpなどにコードを追記するだけで簡単に出力停止できますが、出力していても読み込まれる画像数に変わりはありません。
それどころかRetinaディスプレイに柔軟に対応できないので、僕は非推奨です。

サイトの画像表示幅が最大640pxなので640pxだけで良いかと思いがちですが、iPhone 12では1170px相当の大きさの画像を読み込もうとするので、画像が若干ぼやける可能性があります。

パソコンにも解像度２倍のスマホにも、解像度３倍のスマホにも…
それぞれ画像の大きさと容量が一番最適なものを出し分けるのがsrcsetです。
うまいことなってますね！

まとめ

メディア設定に関する記事の続きとして書けばよいと思ったのですが、このページに直接アクセスしてくれた人には上手く伝わらない可能性があり、書く内容を凄く迷いました。

画像を表示させるだけなら簡単なのですが、全デバイスに最適化するとなるとそれなりの知識が必要な時代かもしれません。今後のスマートフォンで解像度４倍、６倍になってくるとHD（1920×1080px）でも小さい！という事にもなりかねません…Retinaディスプレイ…綺麗なのは良いのですがサイト運営者泣かせですｗ

Wordpressの画像に関する記事は他にも書いています。
良かったらチェックしていって下さい・ｗ・

ではではこの辺で・ｗ・