【WordPress】勝手に作られる不要なサムネイル画像を削除・停止させる方法

2017年8月16日2022年4月16日

WordPressは不要な画像がサーバー上に作られているというのをご存じでしょうか？画像を1枚アップしたつもりでもその裏では複数の画像が勝手に作られています。

これからWordPressを始めるというのなら記事を書く前に今から紹介する設定を行えば大丈夫ですが、運営期間が長ければ長いほど不要な画像が膨大になってますよね。

今回はその不要な画像をどうにかしてサーバーをスッキリさせるための記事です。

不要な画像が複数作成されている問題

先ほどの続きですが、WordPressで1枚画像をアップロードすると1枚保存されるわけではなく自動的にリサイズされ5、6枚ほどの画像が保存されることになります。

これって「聞いてないよ」ということになりますよね。今回、この記事でこの画像問題について考えられる上で万全な対策をしようというわけです。

何が問題なのかというと、画像1枚のデータ容量が100KBだとします。100～320pxの画像が複数枚作られるのならこちらは追加＋100KBとしましょう。ちなみに画像のサイズが小さいほどデータ容量は軽くなります。

当サイトは1記事で画像を10枚使うことも珍しくないため不要な画像だけで1000KB(1MB)です。10記事で10MB、100記事で100MB(0.1GB)。

データ容量削減でサーバーを軽量化

WordPressにアップロードした画像は全体の容量を圧迫してしまいやがてそれがページの速度低下の原因となってしまうといわれます。画像を多用するサイトであればなおらです。

私はそれをできるだけ防ぐためにアップロードする全ての画像をリサイズして圧縮して上げていたのですが、今回の件にように今まで1枚だけと思っていた画像が複数枚あることを知り愕然です。

2年間という運営期間なので総記事数は500以上にもおよびます。当然自動作成された複数の画像は膨大です。これを1つずつ削除しなければならないのかと…。

試しにFTPソフトで「/wp-content/uploads/年/月」のディレクトリを見てみましょう。作成される画像の数はテーマにもよるでしょうが、おそらくデフォルトの仕様のためこの仕組みを知らずに記事を上げていると1枚の画像で5、6枚にリサイズされ保存されているはずです。

試しに当サイトが以前上げた記事の画像を見てみましょう。この画像1つでこれだけの画像が同時作成されていることになります。

twitter-99dollar (640×427 / 42KB) ※元の画像
twitter-99dollar　(320×214 / 11KB)
twitter-99dollar　(320×180 / 9KB)
twitter-99dollar　(300×200 / 10KB)
twitter-99dollar　(150×150 / 5KB)
twitter-99dollar　(100×100 / 3KB)

このサイズについては設定や使っているテーマによって多少の違いがあるようです。

私は高速化のために過去に上げた記事内の未圧縮画像を圧縮して再アップロードするという作業を時間があるときにしていましたが、これだけの複数画像が追加されているというのならそれが逆にデータ容量を圧迫させることになっていたのかもしれません。

当サイトはこれだけ画像圧縮作業をしてもGoogleのパフォーマンスチェックで画像の最適化を指摘されているので、このようなことを考えると当然の結果といえるのかもしれません。

どうすればいい？

既に元の画像を軽くしてアップしているのもありますし、小さな画像ほど容量も比例して縮小されますので考えられないほどのデータ容量ではありませんができれば早い段階から対処しておきたい案件ですよね。

ちなみにメディアのライブラリの一覧から元画像を削除しただけではこれらの自動作成された画像を消すことができないようです。現時点で考えられるのはFTPを使いuploadsディレクトリから1つ1つ直接削除するか不要画像を削除するためのWordPressのプラグインを使うしか方法はないかと。

私はパフォーマンス維持のためできたらプラグインを使いたくありません。ということで、手間がかかりますがFTPから削除することにしました。

削除する

1つ1つ手作業で削除する場合、気を付けなければならないことがあります。例えば上記のようにアップした元の画像以外に5つの画像が作成される場合、既に使われているものもありますから5つ全てを消すと正常にサムネイル画像が表示されないことがあります。

twitter-99dollar (640×427) ※元の画像
twitter-99dollar　(320×214)
twitter-99dollar　(320×180)
twitter-99dollar　(300×200)
twitter-99dollar　(150×150)
twitter-99dollar　(100×100)

私の環境では、トップページの記事一覧のサムネイルとウィジェットの新着記事で150×150(テーマによる)が使われています。つまり元の画像だけでなく150×150も残しておかなければならないのです。

また、これも利用環境によりますが当サイトが使用しているテーマSimplicityのブログカードで確認したら画像が消えていました。確認したらこちらは100×100を読み込んでいるようです。

ということから記事内で複数の画像をアップしている場合はブログカード用の100×100と記事一覧・新着記事用の150×150サムネイルに使われるこれらのサイズだけ消さないように気を付けるのがポイントということですね。2枚目以降は元の画像のみ残しておけばあとは削除でもかまいません。

例えば・・

example
example2
example3
example4
example5

このように1つの記事で複数の画像があるのなら、サムネイルで使われる1枚目

example (サーバー/example-100×100、example-150×150)
example2
example3
example4
example5

ちなみに誤って150×150の画像を削除してしまった場合、当然このようになってしまいます。

再度大きな画像をアップするか150×150サイズを自分で作成しトップページの記事一覧で読み込んでいるのと同じ150×150のファイル名をアップします。

読み込んでいるファイル名はChromeを使っているのであれば右クリックからの「検証」で確認することができますし、アップロード先はダッシュボードのメディアからではなくFTPの「/wp-content/uploads/年/月」からです。ここにアップすれば150×150のサムネイルを読み込んでまたトップページ一覧や新着記事で表示されることになります。

また、元画像と150×150画像だけ残した後TwitterやFacebook、Google+といったSNSでシェアされたときに使われる画像を確認してみましたが問題なく表示されていました。SNSのサムネイルの心配はなさそうです。

それ以外にもアップしたロゴやサイトアイコンも複数の画像が作成されているようです。こちらは記事内の画像のように複数アップすることはなく通常は1枚アップするだけでしょうからそのままでも問題なさそうですし表示されないということにもなりかねないのでへたにいじらず触らないのが賢明かもしれません。

既にアップしてしまった画像はプラグインを使わないのであれば大変ですがこのように対応するしかなさそうです。ですが、これからアップする画像は複数リサイズされないための設定して対応するのが最善といえます。どのように設定すればいいのか次の章で見てみましょう。

不要な画像を作成させないための設定

それでは設定していきます。WordPressでサムネイルサイズが設定されている箇所はメディア設定とfunctions.phpの2か所です。まずはメディア設定から。

メディア設定

WordPress管理パネルにログインです。

「設定」→「メディア」を選択するとこのような画面。サムネイルのサイズ「小」「中」「大」に値がそれぞれ設定されています。

これはどこに使われているサイズなのかというと、アップする画像設定時に選ぶためのサイズです。

上の写真で「大」の1024×1024が選択肢にないのは、そのサイズが作成すらされていないからです。私の場合アップするときはデータ容量軽減のため必ず700px以下にするわけですが、そのように画像の大きさがメディアのサムネイルサイズに達しない時は作られないということになります。

なのでアップした画像が100×100だったり、「中」300×300サイズ以下だった場合はそのサイズは作られないことになります。

不要な画像を作成させないためにサイズの値を「0」にしておきましょう。100×100や150×150の画像はfunctions.phpで設定されているので全て「0」にしてもらってOKです。

ちなみに「サムネイルを実寸法にトリミングする」というのは画像全体からサムネで表示する用に画像を切り取るということです。後述するfunctions.phpのサムネイルにおけるところの「true」の働きになるのでしょう。

値を「0」にするので関係なさそうですが、一応チェックを外しておきます。

functions.php

続いてこちらです。テーマの編集からfunctions.phpを見てみましょう。見当たらなければ子テーマを作っている場合親テーマ内のfuntions.phpです。

当サイトの環境ではこのように設定されていました。

// アイキャッチ画像を有効化
add_theme_support(‘post-thumbnails’);
//サムネイルサイズ
add_image_size(‘thumb100’, 100, 100, true);
add_image_size(‘thumb150’, 150, 150, true);
add_image_size(‘thumb320’, 320, 180, true);
add_image_size(‘thumb320_raw’, 320, 0, false);

例えば100×100の場合、「thumb100」が任意の名称それに続く「100, 100」が設定サイズ、「frue」が画像を切り抜いて表示させるかどうかという設定です。

(‘thumb100’, 100, 100, true)

今回は元画像以外に100×100と150×150を残したいわけですから「320,180」と「320,0」をコメントアウトすればOK。

// アイキャッチ画像を有効化
add_theme_support(‘post-thumbnails’);
//サムネイルサイズ
add_image_size(‘thumb100’, 100, 100, true);
add_image_size(‘thumb150’, 150, 150, true);
//add_image_size(‘thumb320’, 320, 180, true);
//add_image_size(‘thumb320_raw’, 320, 0, false);

これで保存します。functions.phpはちょっとした空白などですぐに画面が真っ白になってしまうので慌てず慎重に行いましょう。

作成するサイズについて

メディア設定とfunctions.phpの設定をすることでそれ以降にアップした画像は「元画像、100×100、150×150」の3つが作成されることになります。元画像だけにしようかとも思いましたが当サイトの環境では100×100、150×150はどうしても外せなかったのでやはりこの3サイズです。

設定次第でこれを元画像だけで全てを賄うことも可能ですが、例えば元画像で新着記事やブログカードのサムネイルといった小さな画像でも間に合っているような箇所を大きなサムネイルサイズを使うことで遅延につながる可能性もあるとのこと。これに関しては今回確認しなかったので定かではありませんが、やはり小さなサムネイル用に100pxや150pxあたりは残しておいた方がいいのではと。

300pxと違い100×100や150×150ならそれほど大きなデータ容量ではないですし、従来なら6つも画像が勝手に作成されていることになるので今回の設定をするかしないかでだいぶ違ってくるかと思います。

まとめ

ちなみに「この記事が気に入ったらいいね」ブログパーツは1つ目の元画像から取得しているようなので問題ありませんでした。AMPに関してもエラーチェックツールを使ってみましたが今回の設定による画像関係のエラーは無いようです。

当サイトの場合は画像圧縮の見直しによる再度の画像アップや数百記事分の画像をこれから削除修正していかなければならないので、何時間か下手したら何日かかるかわかりませんが自分のペースでやっていければなと。

今回の設定でどのくらいのデータ容量の軽減につながったのかは次の記事で紹介したいと思います。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！