MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

引用やシェアする際は該当記事または画像のURLを貼っていただければ、ご自由にお使いいただいて構いません。

コンテンツ作成時の参考サイト

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

WordPressメディア設定|画像の自動生成はすべて停止しよう

当ページのリンクには広告が含まれています。
WordPressメディア設定

WordPressのメディア設定とは、画像のアップロードに関するものです。
実は初期設定のままだと、1つの画像に対し、複数のサイズが自動生成されています。

私は7年以上サイトを運営していますが、自動生成は必要ないと結論付けました。

当記事では、画像生成の仕組みと自動生成を停止する方法を解説します。

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

WordPress画像生成の仕組み

WordPressメディア一覧

WordPressに画像をアップロードすると、メディア欄には1枚しか表示されませんよね。
しかし実際は、画像を保存しているサーバー側に最大7枚も自動生成されています。

お使いのテーマに独自生成サイズが設定されている場合、もっと増えます

3000px画像の容量

試しにファイル名「test-image」サイズ3000×2000px、容量660KBの画像をアップロードしてみましょう。

あえて3000pxにしたのは、2561px以上の画像をアップロードすると、生成されるファイルがあるためです。

レンタルサーバーのファイルマネージャー

WordPressの画像ファイルはレンタルサーバーのファイルマネージャーから確認できます。
ここでは当サイト使用中のの手順を例に紹介します。
cPanelにログイン
ファイルマネージャーをクリック

ファイルマネージャーuploadsフォルダ検索

右上の検索窓に①「uploads」と入力後→②「進む」をクリック

ファイルマネージャーuploadsフォルダ検索結果

複数のドメイン管理している方は、いくつか候補が出てきますので
/public_html/希望のドメイン/wp-content/uploadsをダブルクリックしてください。

ファイルマネージャー画像フォルダの階層

年フォルダ→月フォルダと階層を展開すると、画像ファイルが表示されます。

※.過去にアップした画像の自動生成は、手動で削除する必要がありますので、ここから行ってください。
記事後半でも解説しています。

WordPress uploadsフォルダの位置

もちろんFTPソフトからも確認および編集可能です。

画像を1枚アップロードするたび最大7枚自動生成されている

WordPressデフォルト画像自動生成

サーバーの画像フォルダを見てみると、サイズ違いの画像が7つ生成されました。
基本的にオリジナル画像より、小さいサイズが自動生成されます。
例えば1000pxの画像をアップロードした場合、「150・300・768px」の3つが生成されるということ。

※.またサンプル画像は横長だったため、縦横比も横に調整されていますが、縦長画像の場合は、縦に調整されます。

WordPressの画像削除方法

ちなみにWordPress側のオリジナル画像を削除すると、サーバー側のデータも同時に消えます。
※自動生成含む。
削除方法は「メディア」からでも「投稿画面」でも同じです。

WordPressデフォルト画像アップロードファイル数

一番下の「scaled」は、2561px以上の画像をアップロードすると、強制的に2560pxサイズに自動変換されるものです。
つまりWordPressのデフォルト状態では、2561px以上の画像をアップロードできません
記事の後半で、scaledを無効にする方法を解説しています。

そして問題なのは右側の「容量」です。
オリジナル1枚なら660.07KBですが、他7つを合計すると(660.7+2128.7)=2789.4KBにもなります。

サンプル画像は「scaled=2560px画像」を生成するため、あえて大きなサイズにしました。

しかしそうでなくても、デフォルトでは画像を1枚アップロードするたびに最大7枚分の容量がサーバーに保存されていることになります。

カゲオ

ぶっちゃけチリツモどころじゃないよ
特に画像をたくさん使うサイトは要注意

画像はレンタルサーバーのディスク容量を圧迫する

レンタルサーバーディスク容量

レンタルサーバーのストレージはプランによって上限があります。
例えば当サイト使用中のスタンダードプランでは、300GBに設定されています。

管理しているサイトを全部合わせると、1万枚以上の画像をアップロードしました。
それでもオリジナル1枚だけなら、わずか15GB前後に収まっています

カゲオ

もしデフォルトのまま自動生成されていたら、どれだけ容量を圧迫していたかわかりません…

ストレージが上限に達した場合
  • サイトが表示されなくなる
  • メールが送受信できなくなる
  • FTPソフトに接続できなくなる

このような問題が発生するため、プランのアップグレードが必要になります。

ストレージを圧迫する要素

  • テーマやプラグイン
  • データベース(記事やユーザー情報)
  • ログファイル(アクセス数)
  • キャッシュファイル(一度読み込んだサイト情報を保存してくれる機能)

このうち自分で節約できるものが、プラグインデータベース=画像および動画容量です。

プラグインは必要最低限に抑え、利用しなくなったものは「停止」ではなく「削除」しましょう。

画像は先ほど解説した通り、自動生成を停止すればかなり容量を節約できます。

ではなぜWordPressは複数の画像を生成しているのでしょうか。
次章はそれについて解説します。

WordPressが複数サイズの画像を自動生成している理由

WordPressデフォルト画像アップロードファイル数

あらためて先ほどの容量を見てみましょう。
オリジナル(660.7KB)に対し、最小の150×150は(8.3KB)に収まっています。
約80倍も差がありますね。

WordPress人気記事ランキング

例えば、サイドバーに設置した人気記事ランキングのアイキャッチ画像は、スペースの関係上かなり小さいですよね。
この画像を読み込ませるとき、オリジナル画像だけだと毎回その容量を読み込まなければいけません。

このような場合、サムネイルのサイズ(150×150)を設定しておけば、サイトの読み込みが軽くなります。
関連記事」や「トップページ記事一覧」も同様です。

WordPress投稿画像の解像度選択

そのほか記事内に挿入する画像も、状況に応じてサイズ選択できます。

PageSpeed Insights 適切なサイズの画像

試しに当サイトのトップページを、サイトスピードを測れるPageSpeed Insightsに読み込んでみましょう。
改善欄に「適切なサイズの画像」と表示されました。
ちなみに測定時のトップページは12枚の画像(記事)が並んでいます。

減らせるデータ量は46KBと出ていますね…。
えっ?こんなもの?と思ったのではないでしょうか?

そうなんです、そもそも最初にアップロードする画像をしっかり圧縮しておけば、読み込み速度に影響を与えるほど遅くならないのです。

画質と容量のバランス

もう一つの注意点は、小さな画像は解像度が低いということです。
以下4つ画像を見比べてみましょう。

150×150px|容量5.02KB
300×200px|容量10.46KB
1024×683px|容量72.78KB
1920×1280px|容量132.3KB

どうでしょうか。
1000pxを超えると4Kモニターで見てもさほど劣化を感じないはずです。
サンプルは「JPEG」ですが、現在は「AVIF」というもっと軽量で画質の劣化を防げる拡張子もあります。

「AVIF」はWordPress6.5から対応しています。

確かにSEOを考慮すると、サイト表示は速いに越したことはありません。
ただし100KB以下の画像であれば、実際の読み込みに影響を与えるほど遅くならないのです。

以上のことから私は、1200px前後のオリジナル画像1枚だけにして、その他の自動生成は停止しています。
また7年以上サイト運営してきましたが、SEOに影響を及ぼしたことはありません

カゲオ

ということで、ここからメディア設定自動生成の停止方法を解説するね

WordPressメディア設定

WordPressメディア設定

管理画面設定メディアを開きます。
サムネイルのサイズ・中サイズ・大サイズはコードを記述して無効化させるため、デフォルトのままで大丈夫です。

ファイルアップロード

WordPressメディア設定ファイルアップロード

デフォルトでチェックしてあるはずですが、外れていたら「チェック」しましょう。

WordPress画像を年月フォルダで管理

チェックすると、画像ファイルが「年月フォルダ」に自動分類されるため、管理が楽です。
逆にノーチェックの「ファイル管理」だと、ファイルがズラーッと並ぶだけですので、数が増えてきたときの管理が難しくなります。

カゲオ

画像は年月フォルダで管理しよう

すべての画像生成を停止する方法

それでは、今回のメイン設定。
画像生成を停止するコードを記述していきましょう。

functions.php編集

子テーマのfunctions.phpに以下のコードをコピペしてください。

//すべての画像生成を停止する
function resize_disabled($sizes) {
  $sizes = array();
  return $sizes;
}
add_filter('intermediate_image_sizes', 'resize_disabled');
add_filter( 'big_image_size_threshold', '__return_false' );

このコードであれば、テーマ側にデフォルト以外の独自画像生成があっても停止できます

2561px以上の画像をアップロードする予定がなければ、一番下のコードは削除しても構いません。

過去の生成画像は手動で削除する必要あり

停止コードは過去の画像には反映されないので注意しましょう。
過去画像を削除するには、ファイルマネージャーまたはFTPソフトから手動で削除する必要があります。

ファイルマネージャーの削除方法

ファイルマネージャー画像ファイル削除方法

Shiftで複数選択>②右クリック>③Deleteをクリック

ファイルマネージャー画像ファイル完全削除方法

④ゴミ箱をスキップしてファイルを完全に削除するに「チェック」します。
Confirmをクリック

一部の画像生成だけ停止する方法

WordPressデフォルト画像自動生成
//項目別に画像生成を停止する
function resize_disabled( $stop ) {
  unset( $stop['thumbnail'] );
  unset( $stop['medium'] );
  unset( $stop['large'] );
  unset( $stop['medium_large'] );
  unset( $stop['1536x1536'] );
  unset( $stop['2048x2048'] );
  return $stop;
}
add_filter( 'intermediate_image_sizes_advanced', 'resize_disabled' );
add_filter( 'big_image_size_threshold', '__return_false' );
コード項目またはサイズ
thumbnailサムネイルのサイズ|151px以上
medium中サイズ|301px以上
large大サイズ|1025px以上
medium_largemedium_large_size_w|769px以上
1536×15361537px以上
2048×20482049px以上
add_filter( ‘big_image_size_threshold’, ‘__return_false’ );scaled|2561px以上

記述したコードが停止されますので、必要な項目があればコードを削除してください
一番下のコードで、2561px以上の画像もアップロードできるようになります
また冒頭で解説したとおり、基本はオリジナル画像以下のサイズが自動生成されます

//項目別に画像生成を停止する
function resize_disabled( $stop ) {
  unset( $stop['thumbnail'] );
  

  unset( $stop['medium_large'] );
  unset( $stop['1536x1536'] );
  unset( $stop['2048x2048'] );
  return $stop;
}
add_filter( 'intermediate_image_sizes_advanced', 'resize_disabled' );
add_filter( 'big_image_size_threshold', '__return_false' );

例えば「medium」と「large」を削除した状態で、1200px画像をアップロードしたとしましょう。
その場合”300px“と”1024px“の画像が生成されます。
くどいようですが、必要な画像サイズを削除してください。

結論:WordPressのメディア設定は全停止がおすすめ

以上、WordPressのメディア設定について解説しました。
画像の自動生成はサーバーを圧迫するため、すべて停止しちゃいましょう。

オリジナル画像だけで読み込み速度のテスト(PageSpeed Insightsなど)を実行すると、必ず「画像をもっと小さくできる」と注意喚起されますが、気にしなくてOKです。

特に画像を多用するサイトの場合は、自動生成を放置しておくと膨大な量になりますので、全停止がおすすめです。

WordPressメディア設定

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次