前記事「WordPress：srcset, sizes, lazyを極める」の続きです。といってもかれこれひと月になりますので自分も読み直してからです（笑）。
その前回で WordPress が srcset, sizes, lazy をどうやって出力しているのかがわかりましたので、iPhone の Retina ディスプレイなど dpr が x2、x3 となるスマホの場合を調べてみようと思います。
01調査対象サイトのスマホ画像と画像サイズ
この一連の作業の目的は、WordPress のメディア設定で画像サイズの値をいくつにすればいいかを調べることです。
まず条件の説明です。詳細は「WordPress：srcset, sizes, lazyを極める」にあります。
これは調査対象としているサイト「そんなには褒めないよ。映画評」を Chrome のスマホエミュレータで表示したキャプチャ画像です。左はトップ画面を少しスクロールさせたところ、右は各投稿ページです。メディアクエリを 707px で切っていますので、スマホではほぼすべてのデバイスで上図のように表示されます。
左のトップページでは、キービジュアルを除いて一覧表示の映画の画像がデバイス幅の 92% で表示されます。投稿ページでは一覧表示と同じ画像がデバイス幅いっぱいに表示されます。見た目の混乱を避けるために右の投稿ページは左の画像の記事とは別のページを表示しています。
現在のメディア設定の画像サイズは上図のとおりです。デフォルトのままだと思います。
この設定で dpr が x2, x3 のスマホで画像がどう表示されるかを見ていきます。
02iPhone の cssピクセル、デバイスピクセル、dpr
スマートフォンの画面サイズ、cssピクセル、デバイスピクセル、dpr（デバイスピクセル比）は様々ですのですべてのデバイスにベストの画像を用意することは現実的ではありません。デバイスシェアを見てベターな数サイズを出力するしかありません。
iPhone で見ていきます。現在 iPhone では 12〜16 と SE あたりが主流のようですのでその cssピクセル、デバイスピクセル、dpr を見てみます。
| 機種名 | 画面サイズ | cssピクセル | デバイスピクセル | dpr | 発売日 |
|---|---|---|---|---|---|
| iPhone12Pro | 6.1 | 390×844 | 1170×2532 | 3 | 2020/10/23 |
| iPhoneSE(3rd) | 4.7 | 375×667 | 750×1334 | 2 | 2022/3/18 |
| iPhone14ProMax | 6.7 | 430×932 | 1290×2796 | 3 | 2022/9/16 |
| iPhone16ProMax | 6.9 | 440×956 | 1320×2868 | 3 | 2024/9/20 |
この表からでも iPhone16 の横幅いっぱいに画像を表示しようとする場合は 1320px 以上ないとぼける可能性があるということがわかります。スマートフォンを横使いにした場合は 2868px 以上ということになります。
03dpr x2, x3 のデバイスに読み込まれる画像サイズ
Chrome のスマホエミュレータを使って実際にどのサイズの画像が読み込まれるかを見ていきます。
トップページを表示しドロップダウンで iPhoneSE を指定してみます。上部に cssピクセル値と dpr が表示されています。
この画像の HTMLソースは次のようになっています。
<img width="1920" height="1080"
src="kneecap.jpg" class="" alt="" decoding="async" fetchpriority="high"
srcset="kneecap.jpg 1920w,
kneecap-300x169.jpg 300w,
kneecap-1024x576.jpg 1024w,
kneecap-768x432.jpg 768w"
sizes="(max-width: 706px) 92vw, 300px">
この時、トップページの画像には 4つ目から loading=”lazy” の属性が設定されていますので 3つの画像が読み込まれています。サイズは中大（medium_large）768px です。
これは sizes 属性により、cssピクセル値 706px までは 92vw で表示せよとの指示に従い、375 x 0.92 x 2 ＝ 690 となり、srcset の中から 690px よりも大きくて最も近い値 768px の画像が選ばれたということです。
次に iPhone12Pro です。画像は同じですので上部の指定データだけです。
390 x 0.92 x 3 = 1076.4 となり、
フルサイズの 1920px の画像が読み込まれています。大サイズの 1024px の画像は役に立っていないことになります。
iPhone14ProMax の場合も 430 x 0.92 x 3 = 1186.8 となり、同じようにフルサイズが読み込まれますので画像は省略です。
最後に iPhone16ProMax です。
cssピクセル値 440 で dpr3 ですので 440 x 0.92 x 3 = 1214.4 となり、同じようにフルサイズが読み込まれています。
04試しに 1215px の画像を作成してみる
では、上の計算上ギリギリの画像があればそれを読み込むかを調べてみましょう。
ちゃんと 1215px の画像を読み込んでいます。ただ、よく見てみますとファイルのデータ容量が増えています。
1920px の kneecap.jpg が 101kb なのに 1215px の kneecap-1215×683.jpg は 137kb に増えています。
これは WordPress の画像圧縮率のせいですね。フィルターフック jpeg_quality で変更できます。デフォルトは 90 になっています。
function imz_regenerate_jpeg_quality() {
return 60;
}
add_filter( 'jpeg_quality', 'imz_regenerate_jpeg_quality');これを 60 にしますと 83.5kb になるのですが、これは jpg ですので、たとえば同色が続いている部分が多ければファイル容量は小さくなるといった具合で画像によって違います。
この調査対象サイトの画像は映画の宣伝画像であり、それとわかればいいということで 100kb 程度に抑えてアップロードしていますのでこういうことになるんでしょう。このサイトの場合、いっそのことスマホはすべてフルサイズで表示する設定にしたほうがいいかも知れません。
画像の扱いは難しいですね。今日の収穫は dpr が理解できたことくらいでしょうか。
