【Word Press】メディアに画像を1枚だけアップしたのに勝手に同じ画像が何枚も自動生成されていた時の対処法!

ワードプレスを使ってブログの記事を作成している時、画像を載せたいと思う事・・・ありますよね?

ほぼ毎記事なんかしら画像を載っけている、にこる(@choco2col)です。

メディアに画像をアップロードして記事に挿入する時、サムネイルサイズや中サイズ、大サイズと、載せる記事の場所に応じてサイズが選べて便利だなぁ~・・・って、思っていました。

ところがそのサイズ違いの画像、サイズごとにそれぞれ別に自動生成され、あなたの契約しているサーバーに勝手に保存されているという事をご存知でしたか?

たった1枚の画像をメディアにアップロードしただけで、何枚も勝手に、です。

それってどういう事?
画像が何枚も・・・って事は、その分容量が増えてサーバーに負担がかかるってこと?

にこる

めーこ

サーバーにふたんがかかるとどーなるの?
画像が増えればそれだけバックアップにかかる時間も増えますし、サーバー契約の容量が足りなくなって、プラン変更しなくてはいけなくなる時が早く来るかもしれません。

それから、容量が増えればウェブページの表示速度に影響がでます。これはサイトの離脱率にも関係してくるので、軽視は出来ません。

アイキャッチや、記事内で実際に使っている画像がサーバーに保存されているのなら、それはあたりまえの事で納得できますが、それ以外の使わなかった画像がサーバーに保存されている意味って・・・

ないですよ!

今回はメディアに画像をアップロードする時に、使わないサイズの画像を勝手に自動生成させないための設定方法をご紹介します。無駄なものは省いて、少しでもサーバーを軽くしてあげましょう!

同じ画像が何枚も保存されている事に気がついた経緯

そもそも、なぜサーバー内に何枚も同じ画像が保存されていると気がついたのかですが、ミカコ(@mikakolife)さんのブログでアイキャッチ画像を軽くする方法が紹介されている記事を読んだのがキッカケです。
参考 【ワードプレス初心者向け】軽いアイキャッチ画像の作り方!重たいブログとはさよなら!ミカコライフ

その中で、自分のブログの表示速度を簡単に調べられるサイトの紹介がありました。PageSpeedInsightsというサイトです。

自分のサイトのURLを入力するだけで、簡単に表示速度がどれくらいか教えてくれるのですが、それ以上にどうすればもっと早くなるのか、最適化の提案までしてくれます。

その最適化の提案を拝見した時に、「この画像を圧縮してサイズ変更すると、〇%削減できるよ!」といった内容と、ご丁寧にどの画像かも指示してくれていました。その一覧を見ていて思ったのです。

アップロードする時につけたファイル名の後に「-520×300.jpg」とか「-160×160.jpg」とか付いてる同じファイル名がいくつもあるんだけど・・・なにこれ?

にこる


MEMO
ちなみに私のブログでは、記事に入れる画像はほぼ全て【大サイズ】を選んで挿入しています。
「-520×300.jpg」とか「-160×160.jpg」のサイズで記事に挿入する事はほとんどありません。

「この画像を圧縮してサイズ変更すると、〇%削減できるよ!」・・・の、前に・・・

そのサイズの画像、記事内で使ってないんだけど!?

にこる

最適化の提案で、「この画像軽くして!」と言われてるけど、そもそも記事内に入れてないので、軽くするもなにも・・・要らなくない!?と思ってしまいました。

そこで私は、契約しているサーバー内に現時点でどのような画像ファイルが保存されているのか確認してみました。

ファイル転送ソフトを使ってサーバー内の画像確認を

なぜファイル転送ソフトを使って確認するのかというと、ワードプレス内のメディアから今ある画像を確認しても、自分がメディアに画像をアップロードする時に転送した「1枚」の画像しか確認出来ないからです。

ファイル転送ソフトがよくわからないという方は、Webで困ったときに検索するといつも助けてくれる「サルワカ」さんのサイトに詳しく掲載されていますのでそちらを参考にしてください。
参考 【FileZillaの使い方】WordPressでFTPソフトを使おうサルワカ

私が使っているファイル転送ソフト(FTPソフト)は「FileZilla」という無料ソフトです。


このソフトでサーバーに接続して、サーバー側のフォルダを開いていきます。→【自分のサイトのURL】→【public_html】→【wp_contents】→【uploads】内で確認出来ます。

そこで私は1種類の画像ファイルが8パターンも自動生成されていた事に驚愕しました・・・

文字だとわかりにくいので一度自分のパソコンに保存して開いてみたフォルダ内がこちら↓

ちなみにこの画像は記事のアイキャッチに一度、一か所のみに使っていて他の場所に自分では指定していません。

複数のファイルが保存されているか簡単に知るには

ちなみにこのサイズ違いの画像自動生成は、ワードプレスの初期設定で最初から設定されています。変更した記憶がなければほぼ自動生成されているはずですが、気になる方は記事作成画面から適当な画像を挿入してみてください。

添付ファイルの表示設定のところから、サイズを開いて「フルサイズ」以外のサイズが表示されていたら、その数だけ別に自動生成されているはずです。

使わない画像を自動生成させない設定をしよう!

ワードプレスの初期設定では、画像をアップロードする際のそのままのサイズ「フルサイズ」と、その他に「大サイズ」「中サイズ」「サムネイル」の3つを自動生成します。

MEMO
ちなみに、アップロードする画像が大サイズ(1024×1024)や中サイズ(300×300)よりも小さいサイズの場合は各サイズは自動生成されず、「フルサイズ」のみが表示されます。

サーバーに負担をかけたくない方は、できれば使いたい画像を自分でサイズ調整し、「フルサイズ」のみでアップロード、他の3種類は自動生成させないようにするのがおすすめです。自分でサイズ調整の仕方がわからない!という方は後程説明しますね。

設定方法はこちら

ダッシュボードの「設定」→「メディア」を開きます。

メディア設定画面で、各サイズの数値を「0」にして設定保存すれば、今後使わない画像の自動生成は行われなくなり、メディア追加画面でも「フルサイズ」のみが表示されるようになります。
「どうしてもこのサイズだけは使う!」という場合はその項目だけ数値を変えなければ今まで通り自動生成されます。

フルサイズしかアップロードしない設定にして適当な画像をアップロードし、メディア追加画面を確認したのがこちら・・・
ん?・・・確かに「大サイズ」や「中サイズ」「サムネイル」は表示されなくなったけど・・・フルサイズの下に表示されている520×300pxとか、160×160pxというのは何だろう??と思いますよね?

自動生成しない設定にしてもテーマによっては他にも生成されてしまう

ワードプレスの魅力の一つでもある「テーマ」は、記事作成時の利便性や、サイトを自分でデザインしなくても簡単に整えられるテンプレートの様な存在です。

ちなみにこのサイトはワードプレステーマの「SANGO」を使っていますが、なんと先ほどの520×300pxとか、160×160pxという謎なサイズの画像は、この「SANGO」の仕様によるものでした。


めも
他にどんなサイズの画像がどれだけアップロードされるかは、各テーマごとに変わってきますので、この先は「SANGO」の場合として参考までにお読みいただければ嬉しいです。

なぜ先ほどのサイズの画像が他にアップロードされるのか調べてみました。

「SANGO」の場合、記事以外にトップページなどで表示される「タイトルカード」や、サイドバーに表示される「人気記事」や「最近の投稿」といった部分にも小さな画像が使われているのですが・・・

これらの実際の画像上でマウスを右クリックして一旦画像を保存し、プロパティで詳細を見てみると・・・

お気づきでしょうか・・・先ほどの謎サイズの画像と全く同じ数字ですね。
ちなみに768×451というサイズは・・・

今までアイキャッチ画像はフルサイズか、記事内で使う大サイズが勝手に使われてるのかと思っていましたが、いやいや全然・・・これもアイキャッチ専用にわざわざ自動生成された別画像だったのですよ・・・これを知った時かなりの衝撃を受けました・・・

そんなわけで、特に設定も変えずに「SANGO」を使っている場合は1枚の画像をアップロードするだけで同時に8枚も自動生成されてサーバーに保存されているのでした・・・

それでも使用している画像ファイルなのであれば仕方がないのかな、とは思います。これらは楽して見栄えを良くするための犠牲なのだと・・・(すみません、「SANGO」は悪くありません・・・かなり優良なテーマです・・・初心者に優しいですから!)

テーマの仕様による自動生成は必要だと思いますが、先にあげた「大サイズ」「中サイズ」「サムネイル」は、記事内で使用しないのであれば確実にいらない画像ファイルなので、サーバー負担が気になる方はこれを機に設定を見直してみてはいかがでしょうか。

アップロードする画像のサイズを自分で縮小するには

「SANGO」の場合だと、丁度良い画像サイズがアイキャッチの場合は横幅768px、記事内で使う画像は横幅680px(このサイトの場合)なのですが、横幅768pxの画像を記事内に使っても自動で調整されて綺麗に収まります。

画像を横幅768pxにサイズ調整しておけば、テーマによる仕様で画像が他に自動生成される事がなくなるのでおすすめです。

アイキャッチ用に作った画像を記事内で使う事はあまりないかと思いますが、これは画像を自分で縮小する時に画像毎にいちいちサイズ設定を変えるのが面倒な場合の提案です。

おすすめの画像縮小ソフト

冒頭でご紹介した、ミカコさんのブログ記事内でもいくつか紹介されていますが、画像を縮小・圧縮できるソフトであれば基本的にどれを使用しても問題ありません。自分が使いやすいもので良いと思います。

私が使用しているソフトは、窓の杜から提供されている定番の複数画像一括縮小ツール、「縮小専用。」というフリーソフトです。

ただしこれ・・・Windows専用の様です。すごく便利なのにそこだけは残念。開発されたのは随分前のようですが、Windowsにまず入れる定番無料アプリ -2018年版-でも紹介されていていて、現在でも特に問題なく使用出来ています。

とにかく簡単で軽いので、Windowsを使われている方にはおすすめです。

ダウンロードして起動させると、このような小窓が開いていきなり使えます。おすすめの設定を赤枠で囲ってみましたが、画像サイズは自分の指定したい数値を入力でき、オプションで画像自体の容量をどのくらいまで下げるかも指定できます。

変換後は、の部分は、その後ワードプレスのメディアにアップロードする事を考慮すると「フォルダを作ってその中に保存」が断然おすすめです。

MEMO
オプションの画像くっきり(鮮鋭化)にチェックが入っていますが、PCのキャプチャ等、文字が入っている画像はチェックを入れると鮮明にくっきり縮小されるので、劣化しても見やすい画像が生成されます。

逆に風景写真やイラスト等、少し滲んでいた方が綺麗に見えるものはチェックを外したほうが綺麗に劣化されます。好みもあると思うので、両方試して確認してみるといいかもしれません。

縮小・圧縮したい画像が入っているフォルダを開いて、縮小・圧縮したいファイルを選択(複数可)してから縮小専用。のソフト上にドラッグ&ドロップするだけで、元画像のあるフォルダ内に自動で「Resized」フォルダが作成され、そのフォルダ内に縮小された画像が作成されます。

後はそこからワードプレスにアップロードしたい画像を選択して、メディア内にドラッグ&ドロップするだけです。

ちなみに、サイズ指定など前回操作と同じで特に変えなくても良い場合は、ソフトを起動させなくてもデスクトップ上にある「縮小専用。」のアイコン上にドラッグ&ドロップするだけで同じ動作をしてくれます。

まとめ

自分のサイトを最適化するために偶然みつけた仕様ですが、使ってないもの、いらないものが貴重なサーバースペースを陣取っているなんて無駄でしかないと思うのは私だけでしょうか?

今回、サーバー内を調べるためにローカル保存した「uploads」のフォルダは、こんなに膨れ上がっていました。

いや、でもこのブログまだ30ちょっとしか記事書いてないのに使っている画像多すぎるのは認めるけどね?

にこる

めーこ

それでもここまで多くはないはずだよ!!
現時点では良くても、何年も、何記事も、と先の事を考えると、少しでも無駄なものは省いておいて、少しでも快適な環境を維持出来ればいいな、と思いました。

最後で申し訳ありませんが、これ使ってないな?と思って「uploads」内の画像をホイホイ捨ててしまうのは危険です。自分では身に覚えがなくても、使用しているテーマのどこかで使われている画像なのかもしれません。

自分でははっきり良くわからない、自信がないという場合は、これまでのメディアは無理にいじらず、これからアップロードする画像を気にするようになさってください。それでも削除したいという方は、どうか自己責任でお願いします。

まぁ、サーバーの容量を気にするほど先の未来までブログを続けているかわからないけどねぇ?

にこる

めーこ

そこだよねぇ?

13 COMMENTS

コジマ

はじめまして!
有益な情報ありがとうございます。初心者ながらこちらのサイトを参考に「FileZilla」の設定をしました!
一つお伺いしたいのですが、自分のパソコンに保存の仕方が分からずつまづいております…もしよろしければご教授いただけないでしょうか。
よろしくお願いいたします!

返信する
にこる

コジマさん、コメントありがとうございます。
自分のパソコンに「uploads」のフォルダを保存したいという事でしょうか?(違ったらごめんなさい!)

それでしたら、「FileZilla」でサーバー側(右側)の「uploads」フォルダを表示させて、そのフォルダを選択し、それをそのままドラッグ&ドロップで自分のパソコンのデスクトップ上にポン!します。(他に保存したい場所がある場合はそこへドロップでもOK)

「uploads」フォルダ内にたくさん画像が保存されている場合は少し時間がかかるかもしれませんのでご容赦くださいね。
もしそれで保存出来なかったらまたお気軽にコメントくださいね(o´▽`o)

返信する
よしとも

 どうも初めまして。
ホントにびっくりしました!
「なんで同じファイル名なのに8種類もあるんじゃ~」
と。(笑)
それはヘッダー画像だったのですが、いろいろなサイズ
で細切れになってました。^^;
現在、画像の管理はどうされてますか?

返信する
にこる

よしともさん、コメント頂きありがとうございます!
私も最初に知った時は本当にびっくりしました(笑)
同じファイル名でもそれぞれ使用箇所があるなら仕方ないですが、
賢く設定して少しでもサーバー負担を軽くしたいですよね。

画像の管理は
ちょっと手間ですが現在も自分で画像のサイズを変更して、
必要なものだけサーバーに残しています。
心配性なので一応外付けHDDにローカル保存もしてますよ^^

返信する
よしとも

早速の返信ありがとうございます~
Recent PostsやPopularエリアにある小さい画像
は、ひょっとして縮小専用。で作った画像ですか?
それともWordPress生成したものでしょうか?
また、「これらの実際の画像上でマウスを右クリッ
クして一旦画像を保存し、プロパティで詳細を見て
みると・・・」の下に表示されている画像など、記事に
使われている画像は、パソコンで作成した元々のオ
リジナルサイズ画像でしょうか?

僕はFilezillaというアップロードソフトを使っているの
ですが、アップロードフォルダをひょんなことから開け
てみると、同じ名前のファイルが9つあったので、その
画像をアップロードした時は酔っぱらってアップロード
しまくっていたのかなぁーなんて凹んでました。(笑)
WordPressは始めたばかりですので、洗礼を受けて
しまったという心境ですね^^;

返信する
にこる

Recent PostsやPopularの四角い画像は、ワードプレスのテーマ「SANGO」の仕様で自動生成されるので、記事内にある対処をしてもこのテーマを使っている限りオリジナルとは別に作成されてしまいます。

記事内にある画像は全て「縮小専用。」を使って自分でサイズを指定して作った画像です。「SANGO」の場合は記事内で使っている画像は設定をすれば自動生成されないようですが、その他のテーマについては使った事が無いのでよくわからないのです・・・すみません。

面倒ですが、ファイル転送ソフトで確認するしかないんですよね。とりあえずは記事内にある方法でだいぶサーバー負担を減らせるはずです。最初の内は良くても、長く続けていたらだいぶ差が開きますからね・・・^^

返信する
よしとも

調べてみたところ、WordPress本体とは別に
テーマ自体でも強制的に画像を生成するみた
いですね~
Simple Image Sizesというプラグインを入れて
みたのですが、テーマで生成している画像サイ
ズもあからさまになりました。
今日はスッキリして寝れそうです。(笑)
しかし、にこるさんの画力が素晴らしくてただた
だ見惚れてしまいます。(^o^)
僕も画力鍛えねば・・・

返信する
にこる

よしともさん、ありがとうございます~(喜’v`*)
そうなんですよ!使っているテーマによって強制的に作られてしまうんです。
でもテーマによって作られたサイズは、サイト内のどこかで使われているはずなので、便利なテーマを使用している以上仕方がないんですけどね・・・

画力ですか!?Σ(´゚д゚`)
お褒め頂き大変恐縮です!!
昔の趣味が今になって生きてきているかもしれないですね(笑)
おかげで記事を書くのは亀の歩みですが・・・これからも地道にやっていきます~^^
本当にありがとうございました。

返信する
よしとも

 ややっ!?
またまたコメントいただいていたなんて、嬉しいです。
すっごく!
7日の遅くにこちらに訪問したはずなのですが、見過ごして
ました。
酔っ払ってました。
すみませんw
テーマ側で作成される画像というのは、大きなサイズの画像
を、表示だけ小さくてもファイルサイズは大きいままなため、
数種類の小さいサイズの画像を生成するみたいです。
スマホは月々のネット使用量が決まってますよね。
だからサイズの小さい画像を採用して、少しでもスマホユーザー
の負担を軽減する仕組みらしいです。
しかし、サーバー容量がかさむので、ブログを作る側にとっては
つらいものがありますが、それでも少しでもサーバー容量を少な
くするために足掻くだけ足掻いてみます!
そのモチベーションがいつまで続くのやらですが。(笑)

画力がないと写真配布サイトの画像を使用しますが、意図した
内容が反映されていないサイトさんがなんと多いことかと驚いて
ますね~
その点にこるさんのように自由に画像作成できるのは、かなりの
強みだと実感してます。(^o^)
やっぱり最初はトレースなんですね!
なんでもトライですね♪

ところでにこるさんのツイッターはかなりのフォロワーさんがいらっ
しゃいますが、何か特別なことをされてますか?
ひょっとしてサイト作成して収益を上げてらっしゃるのでしょうか?

返信する
にこる

他の記事も読んでくださって嬉しいです(喜’v`*)
ありがとうございます~!

ブログをはじめるまでは、絵を描いたりアイキャッチなどの
画像も作成する事がなかったので(パソコンも、それこそ
3~4年位電源入れてなかったかも(笑))
いい方向に自分が興味を持てた事に今は感謝してます(笑)

ツイッターは息抜きでやっていて、特に何も変わった事や
狙ったことはしてないです。むしろ日常のくだらない事しか
呟かないので、フォロワーさんには本当に感謝ですね^^
私はこのブログと日記ブログしかやってないので、
そこまで収益を狙ったサイト運営はしていないです。

返信する
よしとも

 いやー返信遅れてどうもすみませんでしたー
現場仕事なのでずっと寮生活でした^^
やっぱシャバ(パソコン界)はええなぁ~と感じる今日このごろ
です。(笑)
3~4年位電源入れてなかったなんて時期もあったとは以外で
す!
あのフォロワー数を見ておったまげたもんですよ~
これだけの優良ブログとツイッターならアクセスも集まりやすい
ので、アフィリエトリンク貼ればかなりの高収入で毎日特上寿司
食べれるかもです(^o^)
なかなか仕事でブログ立ち上げが遅れてますが、完成したらぜ
ひ相互リンクしてくださいね。(^^)

返信する
にこる

よしともさん
ありがとうございます´∀`*
今期はアフィリエイトにも少しずつ力を入れて頑張っていきたいです。
ブログが完成したら?見に行かせて頂きますね^^勉強させて頂きます~♪

返信する
よしとも

現在WordPressでブログ立ち上げを目論んでるのですが、この
”大量同時多発画像生成”の事実を知って作業が頓挫しているのは
秘密です。(笑)
お互いに荒稼ぎしましょう!
choco2colさんの他の記事を見て、こちらこそ勉強ですよ~

よしとも へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA