[WordPress] 挙動確認付き！大画像自動リサイズ（-scaled）と srcset属性 の自動付与

WordPress には、大きな画像を自動でリサイズし、画面サイズに応じて最適な画像を選んで表示する仕組みがあります。
本記事では、この自動リサイズ機能と srcset 属性による表示切り替えについて解説します。

WordPress 5.3 以降で導入された、大きな画像の自動リサイズ処理

スマホや高画質カメラで撮影した高解像度画像をそのまま WordPress にアップロードすると、
「本来表示に使われる大きさよりも遥かに大きい画像」がそのまま表示され、ページの読み込み速度が低下するリスクがあります。

この問題を解決するため、WordPress 5.3 以降では、
縦または横のいずれかが 2,560px を超える画像は、自動的に 2,560px 以下にリサイズされる仕様が導入されました。

挙動確認

横 2,570px の画像をアップロードした場合（縦または横のいずれかが 2,560px を超えるケース）。

 

アップロード後、自動的に横 2,560px 以下にリサイズされました。

仕組み

• 画像アップロード時、縦または横のいずれかが 2,560px（デフォルトのしきい値）を超える場合、自動でリサイズされる
• リサイズ後の画像（ファイル名に -scaled が付く）が「フルサイズ」として扱われる場合がある
• 元のオリジナル画像もサーバー上には保持される

WordPress 4.4 以降で導入された、srcset 属性

WordPress 4.4 以降では、記事に画像を挿入すると srcset 属性が自動的に付与されます。

挙動確認

記事内に「フルサイズ」で画像を配置します。

 
表示された画像を「右クリック ＞ 画像アドレスをコピー」で確認してみます。

 
すると、先ほどの -scaled が付いた画像ではなく、別の画像が参照されていることが分かります。

これは、ブラウザが自動で付与された srcset 属性をもとに、最適なサイズを選んでいるためです。

 

実際に画像のソースを確認すると、以下のようなコードになっています。

 

分かりやすいように書き出してみます。

srcset 属性によって複数の候補画像が提示され、ブラウザは最適と判断した画像を自動で選択します。
この例では 2048×1365.jpg（2048w）が選択されていることが確認できます。

srcset に含まれる画像例

2560px 以下にリサイズされた画像

• -scaled.jpg（2560w）

「設定 ＞ メディア」で生成される画像サイズ

• サムネイルサイズ：-225×150.jpg（225w）
• 中サイズ：-300×200.jpg（300w）
• 大サイズ：-1024×683.jpg（1024w）

WordPress 本体が自動で追加する生成画像

• -768×512.jpg（768w）
• -1536×1024.jpg（1536w）
• -2048×1365.jpg（2048w）

まとめ

• WordPress 5.3 以降、縦横いずれかが 2,560px を超える画像は、自動的に 2,560px 以下にリサイズされ、-scaled 付きのファイルが生成される
• オリジナル画像もサーバーには保持されるが、記事内ではリサイズ済みの画像が「フルサイズ」として扱われる場合がある
• WordPress 4.4 以降では srcset 属性が自動で付与され、ブラウザがデバイスや画面幅に応じて最適なサイズを選択する
• 生成される画像サイズは、設定画面で指定した「サムネイル／中／大サイズ」に加え、WordPress 本体が自動で用意する
  medium_large（768px）、
  1536px、
  2048px なども含まれる
• この仕組みにより、高解像度の画像をそのままアップロードしても、表示速度や最適化が自動的にある程度担保される