2026年10月2日

WordPressでメディアをアップロード前に自動リサイズする実装方法

メディア・画像

スマートフォンで撮った数千ピクセルの写真をそのままアップロードすると、転送に時間がかかり、サーバー側の画像処理でメモリ不足やタイムアウトも起きやすくなります。ブラウザの中で画像を縮小してから送る「アップロード前リサイズ」を入れると、転送量とサーバー負荷の両方を減らせます。この記事では、メディアライブラリの標準アップローダーに縮小設定を加える方法、自作フォームで Canvas を使って縮小する方法、サーバー側で上限をかける保険の設定までを、確認方法とあわせて説明します。

まず仕組みを整理する：どこで縮小するか

画像を小さくできる場所は大きく3つあります。

ブラウザ（アップロード前）：送る前に縮小するので、転送量とサーバーの処理量がもっとも少なく済みます。この記事の主題です
サーバー（アップロード直後）：WordPress 本体や画像系プラグインが、受け取ったあとに縮小します。ブラウザの対応状況に左右されません
配信時（CDN など）：保存はそのままで、表示のたびに縮小・変換します

ブラウザ側の縮小は効果が大きい一方、利用者の環境によっては動かないことがあります。そのため「ブラウザで縮小し、漏れたものはサーバー側の上限で受け止める」という二段構えにするのが現実的です。

注意したいのは、WordPress のアップロード経路が1つではない点です。メディアライブラリ画面やメディア選択モーダルは Plupload というライブラリでアップロードしますが、ブロックエディターの画像ブロックへ直接ドラッグした場合は REST API 経由で送られます。後者には Plupload の設定が効きません。どの経路を対象にするのかを最初に決めておくと、「設定したのに縮小されない」という混乱を避けられます。

方法1：メディアライブラリのアップローダーに縮小設定を加える

WordPress の標準アップローダーが使う Plupload には、送信前に画像を縮小する resize という設定があります。WordPress は Plupload の初期設定をフィルターで変更できるようにしているため、そこに縮小のサイズと画質を渡します。

コードはテーマに書くとテーマ変更で消えるので、mu-plugin（wp-content/mu-plugins/ に置くファイル）か、自作の小さなプラグインにするのがおすすめです。作業前にバックアップを取り、ステージング環境で試してください。

<?php
/**
 * Plugin Name: Client-side Image Resize
 * Description: メディアアップローダーで送信前に画像を縮小する
 */

// メディア選択モーダル・メディアライブラリ（wp.media）向け
add_filter( 'plupload_default_settings', function ( $settings ) {
	$settings['resize'] = array(
		'width'   => 1920, // 長辺の上限（横）
		'height'  => 1920, // 長辺の上限（縦）
		'quality' => 82,   // JPEG の画質（0〜100）
	);
	return $settings;
} );

// 「メディア」>「新規追加」画面の旧来のアップローダー向け
add_filter( 'plupload_init', function ( $plupload_init ) {
	$plupload_init['resize'] = array(
		'width'   => 1920,
		'height'  => 1920,
		'quality' => 82,
	);
	return $plupload_init;
} );

width と height は「この枠に収まるように縦横比を保って縮小する」という意味で、元画像がそれより小さければ拡大はされません。1920 は一般的なブログの表示幅に対して余裕のある値で、ギャラリーや全幅の画像を多用するサイトなら 2560 程度まで上げてもかまいません。

つまずきやすい点

対象の形式：Plupload の縮小は JPEG と PNG が中心です。GIF アニメーションや WebP、HEIC などは縮小されずにそのまま送られることがあります
画質の意味：quality が効くのは JPEG です。PNG は画質指定ではなくピクセル数が減ることで小さくなります
メタデータ：ブラウザで再エンコードすると、撮影日時や向き、位置情報などの Exif 情報の扱いが変わることがあります。位置情報が消えるのはプライバシー面では利点ですが、写真の向きがずれる場合は、元画像が Exif の回転情報に頼っていないかを確認してください
バージョン差：WordPress が同梱する Plupload の版や、アップローダーの実装は更新で変わることがあります（2026年10月現在）。更新のたびに動作を確認してください

確認方法

ブラウザの開発者ツールの「ネットワーク」タブを開き、大きな写真をメディアライブラリにアップロードします。async-upload.php へのリクエストの送信サイズが、元ファイルより大きく減っていれば縮小が効いています。アップロード後にメディアの詳細画面で寸法を見て、1920 ピクセル以内になっていることも確かめます。

方法2：自作のアップロードフォームで Canvas を使って縮小する

会員向けの投稿フォームなど、独自の画面から REST API にアップロードする場合は、JavaScript で縮小してから送ります。考え方は「画像を読み込む → Canvas に縮小して描く → Blob に書き出して送る」です。

// file: <input type="file"> で選ばれた File オブジェクト
async function resizeImage(file, maxSize = 1920, quality = 0.82) {
  if (!['image/jpeg', 'image/png'].includes(file.type)) {
    return file; // 対象外の形式はそのまま返す
  }

  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));
  if (scale === 1) {
    bitmap.close();
    return file; // すでに小さい画像は再エンコードしない
  }

  const canvas = document.createElement('canvas');
  canvas.width = Math.round(bitmap.width * scale);
  canvas.height = Math.round(bitmap.height * scale);
  canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close();

  const blob = await new Promise((resolve) =>
    canvas.toBlob(resolve, file.type, quality)
  );
  if (!blob) {
    return file; // 書き出しに失敗したら元ファイルで送る
  }
  return new File([blob], file.name, { type: file.type });
}

すでに十分小さい画像は再エンコードせずに返しています。小さい画像をわざわざ描き直すと、画質が落ちるだけでなく、ファイルサイズがかえって増えることがあるためです。Exif の向き情報は、現在の主要ブラウザでは createImageBitmap の既定動作で反映されることが多いものの、古い環境では向きがずれる場合があります。テストには、縦向きと横向きの両方の写真を含めてください。

縮小した File は、FormData に入れて /wp-json/wp/v2/media へ送ります。このとき、ログイン中のユーザーとして送るなら wp_create_nonce( 'wp_rest' ) で作った nonce を X-WP-Nonce ヘッダーに付けます。メディアを追加できるのは upload_files 権限を持つユーザーだけなので、権限のない利用者に画像を送らせたい場合は、REST API を直接開放するのではなく、権限チェックと形式チェックを行う独自のエンドポイントを用意してください。

方法3：サーバー側で上限をかける（保険として）

ブラウザの縮小が効かなかった画像や、ブロックエディター経由の画像に備えて、サーバー側にも上限を設定しておきます。WordPress 5.3 以降は、長辺が一定のサイズを超える画像を自動で縮小し、ファイル名に -scaled を付けた版を作ります。この基準は big_image_size_threshold フィルターで変えられます（既定値は 2560）。

<?php
// 長辺の上限を 1920px にする（false を返すとこの機能を止める）
add_filter( 'big_image_size_threshold', function () {
	return 1920;
} );

// WordPress が生成する JPEG の画質（既定は 82）
add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
	return 'image/jpeg' === $mime_type ? 80 : $quality;
}, 10, 2 );

この仕組みでは元画像もサーバーに残り、添付ファイルのメタデータに記録されます。ディスク容量を節約したい場合はアップロード前の縮小が効いてくる、という関係です。また、サーバー側の縮小は受け取ったあとに行うため、巨大な画像を処理する瞬間のメモリ不足は防げません。アップロード時に「サーバーで画像を処理できません」のようなエラーが出る場合は、ブラウザ側の縮小を入れる意味が大きいと考えてよいでしょう。

コードを書きたくない場合は、アップロード時に既定のサイズへ縮小するプラグインもあります。たとえば Imsanity は、設定した最大サイズを超える画像をアップロード時に縮小するプラグインです。ただし多くはサーバー側で処理するもので、転送量は減りません。機能の範囲や設定画面の表記はバージョンで変わるので、導入前にプラグインページで更新状況と説明を確認してください。

運用上の注意

既存の画像には効かない：ここで紹介した方法は、これからアップロードする画像だけが対象です。過去の画像を縮小するには別の作業（サムネイルの再生成や一括最適化）が必要で、その前にはバックアップが欠かせません
原寸が必要な用途を確認する：写真の販売や印刷用データの配布など、原寸を残したいサイトではアップロード前の縮小は向きません
画像最適化プラグインとの重複：圧縮プラグインと併用すると、縮小と圧縮が二重にかかり画質が想定より落ちることがあります。どの段階で何をするかを1つずつ決めておくと、画質の問題が起きたときに原因を追いやすくなります

まとめ

アップロード前の縮小は、転送量とサーバーの画像処理の負荷を同時に減らせる
メディアライブラリの標準アップローダーには plupload_default_settings と plupload_init フィルターで resize 設定を渡す。ブロックエディターへの直接ドロップには効かない点に注意する
自作フォームでは createImageBitmap と Canvas で縮小し、nonce と権限チェックを付けて REST API に送る
漏れに備えて big_image_size_threshold でサーバー側の上限もかけておく
コードは mu-plugin に置き、バックアップを取ってステージングで縦横の写真を使って確認する