【今すぐやるべき】WordPress画像の自動生成を停止する方法

画像の自動生成って何？

勝手に画像が作られてるってこと！？

こういった疑問に答えます。

本記事の内容

WordPressに画像をアップロードすると、オリジナル画像以外に自動生成される画像が何枚もあるって知ってましたか？

2048px以上の大きな画像をアップロードした場合、サーバーにはオリジナル画像以外に10枚もサイズ違いの画像がアップロードされている可能性があります。

サーバー内に自動生成された画像

この記事を書いている僕はこれをブログ歴1.5年、101記事、511のオリジナル画像をアップロードした後で気づき、地獄を見ました。笑

これを読んでいるあなたが、そんな過ちを起こさないよう画像の自動生成を停止する方法をシェアします。本記事を読んだら、今すぐやってみてください！

そもそも画像をアップロードする時の注意点は下記です。

サイトの表示に3秒以上かかるとユーザーの53%が離脱するというデータがあります。

サイトが重くなる原因の半分〜（下手すると）90%以上を占めるのが『画像』です。画像には3種類あります。

②はテーマによって生成される画像サイズが違います。

当ブログのテーマ『JIN』指定サイズは下記です（現在は「AFFINGER」を使用しています）。

つまり、640px以上の画像をアップロードした場合、サーバーには上記3サイズの画像がプラスされているわけです。

ちなみに僕は『①オリジナル画像』以外は必要ないだろうと2時間かけて全削除した挙げ句、ほとんどの画像が表示されなくなりました。。。設定前は必ずバックアップを取るようにしましょう。

①②は削除できないので、今回は『③WordPress指定サイズの画像』を自動生成しない設定を行います。

WordPressメディア指定サイズは下記で統一されています。

まずはサクッと停止してしまいます。

【今すぐやるべき】WordPress画像の自動生成を停止する方法

カンタン2ステップ

①：設定 › メディアの画像サイズをすべて０にする

WordPressの管理画面で『設定』の中の『メディア』をクリックしてください。

画像のように6つの項目をすべて『0』にして『変更を保存』をクリック。

これで3サイズの自動生成は停止されます。

②：medium_large_size_wも０にする

次にアドレスバーに下記を入力してください。

隠しオプションページが開きます。『command』+『F』でページ内検索ボックスを開いて、以下を入力してください。

『medium_large_size_w』の項目も『0』にして、『変更を保存』をクリックしてください。

以上で設定は完了です。カンタンですね。

これで今後WordPressメディア指定サイズの画像が自動生成されることはありません。しかし、すでにアップロード済みの画像は手動で削除する必要があります。

すでにアップロード済みの画像を削除する方法

3ステップ

①：未添付の画像を削除する

1枚につき数枚の画像が生成されることを考えると、未使用の画像を残しておくことはオススメしませんが、ここからは必要に応じて作業を行ってください。

『メディアライブラリ』の『すべてのメディア』 › 『未添付』に変更すると記事内で使われていない画像だけが表示されます。

しかし、ヘッダーのロゴやタブのファビコン、TwitterやFacebook投稿用のOGP画像などは未添付として扱われます（実際に僕の4枚の画像はすべて使用しています）。

逆に未使用なのに記事とまだ紐付けられていて表示されない場合もあるので、あまり信用しないで慎重に削除する必要があります。

②：自動生成された画像をFTPサーバーで削除する

前述のように、オリジナル画像は『メディアライブラリ』から『完全に削除する』ことで自動生成された画像も一緒にサーバーから削除することができます。

しかし、オリジナル画像は残して自動生成された画像だけを管理画面で削除する方法はありません。

ググると『DNUI』というプラグインがヒットしました。実際に使ってみましたが、全画像が『Not used（未使用）』と表示されてしまい機能しませんでした。

4年以上更新されていませんし、悪い噂しか聞かないので使用しない方が良いです。

そこで今回は『FTPサーバー』を使います。

画像はFileZillaの画面です。

WordPressにアップロードした画像は下記のように『年月別のファイル』に保存されています（エックスサーバーの場合はpublic_htmlフォルダの直下にwp-contentフォルダが入る）。

このファイルの中を確認し、不要なサイズの画像の上で右クリック › 削除することになります（一括選択も出来ます）。

先の画像は試しに幅・約6000pxの大きな画像を（上記設定を何もせず）アップロードした場合に生成された画像です。実に11枚もあります。

下記は画像をサイズの小さい順に並べたものです。

アイキャッチ画像は幅・760px、記事内に挿入する画像は幅・700pxとした場合の『残す/削除』一覧（残す4枚／削除7枚）。

ちなみに、オリジナル画像511枚の場合のサーバー内の（オリジナル含む）画像の総アップロード数は2025枚でした。

『uploads』ファイルの上で右クリック › ダウンロードすることで画像をまとめてバックアップすることも可能です。

また、『uploads』の中には画像以外にプラグイン関連のファイルが保存されている場合もあります（基本は『plugins』の中にあります）。

現在は削除済みのプラグインのファイルなど不要なら削除しても大丈夫です（自己責任でお願いします）。

③：サイトと管理画面内の画像の表示をチェックする

画像の削除が終わったら『PCとスマホ』で下記をチェックしましょう（設定していない画像はスルーしてください）。

チェックリスト（サイト内）

テーマで自動生成された画像は主に⑥⑦⑧で使用されていることが多いです。

また、ユーザーからは見えませんがWordPressの管理画面に影響を及ぼす可能性もあります。

チェックリスト（管理画面内）

削除した直後は『新たに画像をアップロードできるか』も念のため、確認してみてください。

自動生成に関しては、画像を初めてアップロードする時に『設定どうします？』っていうポップアップを出して欲しいくらいですよね🥺

「中サイズ」の画像を使いたい場合

とはいえ、これを自動生成を停止すると〝余計な画像〟がサーバーにアップロードされなくてスッキリする代わりに「中サイズ」などの画像が使えなくなります（自動生成されないので）。

PCで「縦長の画像」が画面いっぱいに広がると読みにくいですからね。そこでCSSで制御する方法です。

「追加CSS」に書くこと

/* 画像をPCで幅半分にして、中央寄せ、下に余白60px */
.half-img {
width: 50%;
margin: 0 auto 60px;
}

/* 959px以下では幅100% */@media screen and (max-width:959px) {
.half-img {
width: 100%;
text-align: center;
}
}

上記を書いたら、画像を<div>で囲います👇

— ヘボ｜ブログの神様になる男 (@HEBOCHANS) October 19, 2022

上記のツイート通りにコードを書くと、PCでは幅50%の画像、スマホ（959px以下）では幅100%の画像が表示されます。今度ここにしっかり追記しますね😌

まとめ

他にもWordPressブログ運営に役立つ記事を書いているので、どうぞ。