不要な画像が生成されてる!?要らない写真は削除してサーバーを軽量化!
目次
画像がサーバーを圧迫してない?
ハイサイ!ブログで写真を多用しているショウ(@OKI_NOTE)です。
ブログでなりふり構わず写真をアップしていて、今さらサーバーの心配をしています。今後もたくさん写真をアップロードしていきたいので、今回画像の設定を見直すことにしました。
設定するまで知らなかったのですが、アップロードされた画像ファイルはどうやら1つだけで保存されないようなのです。何を言ってるかわからないかもしれませんが、読めば納得してくれるはず。画像の容量で悩んでいるブロガーさん以外にも参考になれば幸いです!
スポンサーリンク
WordPressのメディア設定
画像を1つアップロードすると、サーバーに自動的に保存されます。実は、アップロードした画像データはそのまま保存されません。ワードプレスのデフォルト(初期設定)だと、1つのファイルにつき追加で3種類のサイズがアップロードされるようになっています。
WordPress管理画面の「設定」にある「メディア」を開いたことあると思いますが、ここで設定されている3サイズが自動で生成されるようになっているんですね。
アップロードされたファイルはサーバーの「themes/自分のブログテーマ/wp-content/uploads」に保存されています。
大サイズは生成されないこともある
もし自分がアップロードした元画像ファイルが、大サイズの指定ピクセルより低い場合、リサイズされないようになっています。僕の場合、アップロードする画像は事前にリサイズして800px以下にするので、大サイズ(1024px)で生成されることは滅多にありません。(たまにあるw)
Stinger3では更に追加で生成される!
WordPressのメディア設定の話をしましたが、使っているテーマによっても生成されるファイルの種類は変わります。
例えばStinger3の場合、メディアで設定されている3種類に加え、100pxと110pxが生成されるようになっています。これは、functions.php内に以下のサムネイル追加のコードが記載されているためです。
//アイキャッチサムネイル add_theme_support('post-thumbnails'); add_image_size('thumb100',100,100,true); add_image_size('thumb110',110,110,true);
ちなみにこの追加サムネイルはどこで使われているのかというと、100pxはサイドバーの新着記事(NEW ENTRY)、110pxは記事本文下の関連記事のアイキャッチに使用されています。
サーバーを見ると、1つの画像につき、100px、110px、150px(サムネイルサイズ)、400px(中サイズ)、1024px(大サイズ)、元ファイルの計6ファイル確認できると思います。
たとえブログで1種類のサイズの画像しか使わなくても、残り5つは無駄な画像ファイルが生成されてしまうことになるのです。
これはサーバーのデータを圧迫するので良ろしくない!
まずはブログの設計を先に考える!
そもそも僕が画像ファイルを整理しようとしようと思ったきっかけが3つあります。
1つ目はブログのカスタマイズをしたいこと。2つ目はスマホで表示されるアイキャッチサムネイルの画質を向上しようと思ったこと。3つ目はブログでアップロードする画像の量が増えてきたことにあります。
ブログのカスタマイズをするため
このブログはStinger3というテーマをベースに作成しています。
オリジナルのサイトデザインにするためにCSSやPHPファイルをいじりますが、ブログのデザインを変更していく上で、どのコードが不要になるのか、どのファイルサイズが今後必要になるのか考えなければいけません。
僕が今理想とするブログデザインでは、画像の種類はアップロードした元画像と、サムネイルともう1種類で十分でした。それ以外の画像は使わないので要らないファイルになってしまいます。
スマホのサムネイルの画質をあげるため
Stingerはスマホの閲覧にも最適化されているのですが、1つだけ気になる点がありました。それはスマホで閲覧しているときの画質に粗いところがあること。H3のチェックボックスや、関連記事の画像が前から気になっていたので、いろいろいじってみた結果、適用されている画像自体のピクセル数に問題があることがわかりました。
つまり初期設定の100pxと110pxでは十分な画質が確保出来ていないわけです。
wordpressの設定で画像アップ時の圧縮率が90%に設定されていることが原因という記事もありましたが、100%に変更してみても効果はありませんでした。画像のピクセル数を上げてwidthとheightで縮小指定して表示すると、綺麗に表示されるようになったので、200pxの切り抜き画像を使用することにしました。
画像を大量に使用するため
このブログでは1つの記事を作成するときに、画像を5枚〜50枚使います。
例えばある記事で30枚の元画像を使用するとします。1枚サーバーにあげるごとに5枚ずつ自動で生成されるので、1枚だけで300KBも無駄なファイルを蓄積するわけです。これが30枚になると9MB分余分なわけです。
1記事でこれだけ不要なファイルが増えるので、記事が数百規模になるととてもじゃないけど管理できません。
気になる方は、FTPソフトやレンタルサーバーのファイルマネージャーなどを使って、サイズ違いの同じ画像がいくつ生成されているのか、チェックしてみたほうが良いと思います。
アップロード画像をサーバーから削除する方法
直接サーバーから削除
ブログで使用している画像がたくさんじゃなければ、FTPソフトを使用して直接サーバーにアクセスして削除した方が早いです。生成された画像は、ファイル名のうしろに「110×110」とピクセル数が書かれているのでわかりやすいかと思います。
ただ一度削除してしまうと、バックアップをとっていない限り戻すことは不可能なので慎重に!
プラグインを使用する
サーバーから不要な画像を削除するだけでなく、新たに設定したサイズまで生成している優秀なプラグインがあります。その名も「Force Regenerate Thumbnails」。
ちなみにこの名前に似た、有名なプラグイン「Regenerate Thumbnails」があるので間違えないように注意しましょう。Regenerate Thumbnailsの場合は同様に再生成してくれるのですが、過去に設定した画像は削除してくれません。
Force Regenerate Thumbnailsの使い方についてはこちらが参考になります。
不要画像を生成しないようメディア設定を変更
不要画像を消した後は、不要画像を生成しないよう設定し直します。
まずはWordpressのメディア設定で、使用しないサイズがある場合その値を0にします。ここでは中サイズと大サイズを0にしたので、生成されるのはサムネイルサイズのみになります。
次に、function.php内にある以下のアイキャッチ自動生成コードを削除します。僕の場合は200pxを新たに使用するので、100の値を150に変えて110を削除しました。
//アイキャッチサムネイル add_theme_support('post-thumbnails'); add_image_size('thumb100',100,100,true); add_image_size('thumb110',110,110,true);
これで今後アップロードする画像は元画像、サムネイルの150px、function.phpに記載した200pxの3つになります。
実際どれぐらい容量が減った?
軽量化前のファイルサイズは978.5MBと1GB近く。100px、110px、400px(中サイズ)、1024px(大サイズ)を削除したことで、674.1MBになりました。1年分の画像データなので、300MBほど軽量化したことになります。これは大きな減量じゃないでしょうか!
ブログもスリムに美しく!
合わせてこちらもどうぞ:
OKINOTEからお知らせ
沖縄の役立つリンクまとめ始めました。
沖縄ファミリーマート初寄稿記事 !沖縄の道の駅を取材しました。
地元ンチュがおすすめ!許田、糸満、ぎのざ・・7つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)
スポンサーリンク
ad
シェア感謝です! \(^o^)/
-
一眼「EOS 70D ダブルズームキット」が届いたから今日は開封記念日
お見苦しい開封の儀にお付き合いください ハイサイ!ショウ(@OKI_NOTE)です。 注文したCanon EOS 70D ダブルズームキットが届きました! …
-
逆さ吊りも可能。頑丈・小型・携帯性に優れたManfrotto の旅行用三脚『Befree』
①コンパクトで携帯性が重要。②撮影の幅を利かせるため、自由度が高い。③一眼に重さに耐えられる頑丈さと高級感。この3つを兼ね備えた三脚が「Befree」です。開封して、さっそく使用感を確かめて見ました!…
-
これぞ一眼に求めていたもの。1ヶ月間使用してわかったEOS70Dの良いところ
ハイサイ!ショウ(@OKI_NOTE)です。 CanonのEOS70Dダブルズームキットを購入してはや1ヶ月が経過しました。 Canon デジタル一…
-
豆知識!iPhoneのロック画面からフラッシュライトを点灯する方法
暗いところでiPhoneのライトを使って懐中電灯代わりに使うことってよくありますよね? 懐中電灯の無料アプリはたくさんあるので不便はしませんが、実は初期アプリからフラッシュラ…
-
年末に応募したCanonスリースターキャンペーンのお知らせがやっと届いた!
応募から約3ヶ月。忘れた頃に… ハイサイ!今年本格的に一眼デビューをしたショウ(@OKI_NOTE)です。 年末に、一眼を販売し…
-
今年のブログ収益でデジタル一眼カメラを買った話とその理由
1年目のアドセンス収入はこれぐらい ハイサイ!ショウ(@OKI_NOTE)です。 ブログを初めてそろそろ一年。年末ということもあり、ブログに関する今年のデータを…
-
脱一眼初心者!レンズ交換を素早くするたった1つのコツ
最初に陥るレンズ交換の壁 ハイサイ!一眼歴3年のショウ(@OKI_NOTE)です。 一眼レフデジタルカメラの醍醐味の1つとも言える多種多様なレンズ。状況…
-
アプリPhoto Sphereで沖縄の360°風景を堪能してみた
Photo Sphereってなに? スマートフォンで360度のパノラマ写真を撮影できるGoogle発のカメラ&写真共有アプリ「Photo Sphere」。…
-
ウミカジテラスでフォトコンテスト開催中!入賞者には商品券がもらえるよ
2015年8月にオープンした沖縄の新観光スポット瀬長島ウミカジテラス。初となるフォトコンテストが1月いっぱいまで開催されています。応募はInstagramにハッシュタグを付けて投稿するだけ。思い出の一…
-
同じカメラとは思えない!撮影を上達させたいなら参考になるサイト『500px』
500pxは写真に興味がある人や、写真撮影をレベルアップさせたい人におすすめのオンライン写真コミュニティ。ものによっては撮った機材や焦点距離、F値にシャッタースピードなど詳細も記載されているので、すご…