スマートフォンで撮った写真を、そのままWordPressにアップロードする。それだけで、サーバーには何枚の画像ができるでしょうか。
Localで作ったテストサイトで、5000×2598ピクセル（889KB）の写真を1枚アップロードしてみると、できたファイルは8枚、合計1.58MBでした。元の写真の1.8倍です。
1枚の写真から作られた8枚のファイル
WordPressは、画像をアップロードすると、表示する場所に合わせて大きさの違う画像を自動で作ります。テストサイト（WordPress 7.1.3、テーマはTwenty Twenty-Five）で作られたのは、次の8枚でした。
いちばん大きいのは、アップロードした元の写真そのもの（889KB）です。ここに、2560pxに縮めた画像と、6つのサイズの画像が加わります。
それぞれの画像の役割
| 画像 | 大きさ | 使われる場面 |
| サムネイル | 150×150 | 管理画面の一覧、記事の一覧の小さな画像など。正方形に切り抜かれる |
| 中サイズ | 幅・高さ300まで | 記事に小さめに入れるとき |
| medium_large | 幅768まで | スマートフォンなど、画面の小さい端末向け。設定画面には出てこない |
| 大サイズ | 幅・高さ1024まで | 記事の本文に大きく入れるとき |
| 1536×1536、2048×2048 | 幅・高さ1536、2048まで | 高解像度の画面向け。設定画面には出てこない |
| -scaled | 幅・高さ2560まで | 大きすぎる写真の代わりに、「フルサイズ」として使われる |
ブラウザは、画面の大きさに合わせて、この中からちょうどよい大きさの画像を選んで読み込みます。スマートフォンで見る人に、5000pxの写真をそのまま送らずに済むわけです。
「2560px」の仕組み
アップロードした画像の幅か高さが2560pxを超えると、WordPressは2560pxに縮めた画像を作り、ファイル名の最後に「-scaled」を付けます。WordPress 5.3から入った仕組みです。
メディアライブラリで画像を開くと、ファイル名が「photo-scaled.jpg」、大きさが2560×1330ピクセルになっていました（①）。その下の「元の画像」（②）が、アップロードした5000pxの写真です。
サイトに表示されるのは2560pxまでの画像で、元の写真はサーバーに残るだけです。それでも8枚の中でいちばん大きく、容量の半分以上を占めています。
テーマによって、できる枚数は変わる
テーマは、自分のデザインに合わせた大きさの画像を追加で作らせることがあります。tcd-theme.comでも、1000×608pxのアイキャッチ画像を1枚アップロードすると、テーマが決めた大きさ（790×480、450×280、380×230など）を含めて、6つのサイズが作られていました。
元の画像より大きいサイズは作られません。1000pxの画像なら、1024px以上の大サイズや、1536px、2048pxの画像はできません。
サーバーの容量を節約する方法
1. 先に小さくしてからアップロードする
いちばん効くのは、アップロードする前に写真を小さくしておくことです。同じ写真を2000pxに縮めてからアップロードすると、「-scaled」の画像が作られず、元の画像も277KBで済みました。
ブログの記事に入れる写真なら、横2000pxあれば十分です。画像の圧縮には、TinyPNGなどのサービスも使えます。
Webサイトを運営していると、アップロードした画像が原因でページの表示速度が落ちてしまうことは少なくありません。 画像サイズを圧縮する定番プラグインが「TinyPNG（タイニーピング）」ですが、設定項目が多く、初期設定のまま使っている方も多いのではないでしょうか。 本記事では、TinyP...
2. 使わないサイズを作らないようにする
「設定」→「メディア」で、サムネイル（①）、中サイズ（②）、大サイズ（③）の大きさを変えられます。幅と高さを0にすると、そのサイズは作られなくなります。
設定画面に出てこない1536px、2048pxの画像は、コードで止めます。子テーマの functions.php か、コードスニペット用のプラグインに追加します。
add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
unset( $sizes['1536x1536'], $sizes['2048x2048'] );
return $sizes;
} );テストサイトでこのコードを入れて同じ写真をアップロードすると、ファイルは6枚、合計1.28MBになりました。先に2000pxへ縮めた写真と組み合わせると、5枚で411KBまで減りました。最初の1.58MBの4分の1です。
3. 2560pxの基準を変える
「-scaled」を作る基準の2560pxも、コードで変えられます。次の例では、2000pxを超える画像を2000pxに縮めます。
add_filter( 'big_image_size_threshold', function () {
return 2000;
} );return false; にすると、縮めずにそのまま使うようになりますが、大きな写真がそのまま表示に使われるので、おすすめしません。
設定を変えたら、すでにある画像も作り直す
サイズの設定を変えても、これまでにアップロードした画像には反映されません。作り直すには、プラグイン「Regenerate Thumbnails」を使うか、WP-CLIが使えるなら wp media regenerate を実行します。
国内最大のWordPressテーマ販売サイト。デザイン・機能・実用性を搭載したTCD WordPress Theme
使わなくなったサイズの画像は、作り直しても自動では消えません。たまった不要な画像の整理には、Media Cleanerなどのプラグインが使えます。
WordPressサイト内で未使用の画像（メディア）を抽出できるプラグイン「Media Cleaner」をご紹介します。 使われてない画像をそのままにしておくことで即座に問題に繋がることはありませんが、未使用画像を長期間溜めると後でどこにあるか分からなくなります。そうなると、一向に削除できない...
まとめ
写真1枚のアップロードで、サーバーには8枚、元の写真の1.8倍の画像がたまっていました。いちばん効く対策は、アップロードの前に2000pxくらいまで縮めておくことです。それだけで「-scaled」の画像が作られず、元の画像も小さくなります。
記事に毎回写真を入れるブログなら、1年で数百枚になります。まずは今月アップロードした画像のフォルダを開いて、1枚の写真から何枚できているかを見てみると、効き目が実感できます。
メディア設定のほかの項目は、こちらの記事で紹介しています。
メディア設定では、メディアライブラリに関する下記の設定を行います。 生成される画像サイズの設定 画像の保管場所をフォルダで分類するかどうか 特別な理由がなければ、デフォルトの設定でも問題はありませんので、当記事を参考に必要な箇所だけ設定を変更していただければ幸いです。 ...
WordPressテーマ集
コメント