ブログ運営

ブログの画像は、アップロードする前に縮小・圧縮するべき理由

ブログ画像最適化記事のアイキャッチ画像
この記事はこんな人向け
  • 画像はプラグインだけで最適化している
  • サーバの容量を軽くしたい
  • ブログの画像に適切なサイズを知りたい

画像の最適化というと、EWWW Image OptimizerCompress JPEG & PNG imagesなどのプラグインを使っている方も多いと思います。

確かにプラグインは便利なのですが、プラグインだけではカバーできない弱点があるので、アップロード前に縮小・圧縮をすべきです

そうすると結果的に、

  • サーバの容量を節約できる
  • 画像の表示速度がさらに速くなる
  • 軽くてサクサク動くサイトになる

というメリットがあります。というわけで今回の記事では、

今回の記事内容
  • アップロード前の最適化が必要な理由
  • 画像の大きさはどうすれば良いのか

について解説していきます。

画像はアップロード前に縮小・圧縮が必要な理由

画像最適化用のプラグインがあるのに、わざわざアップロード前に縮小・圧縮するなんて面倒!

だと思いますよね。ですが必ずやるべき理由がありまして、以下の通りです。

アップロード前に最適化が必要な理由
  1. プラグインだけでは、無駄にファイルが作られる
  2. 画像の横幅は700ピクセルで十分

それぞれ解説していきます。

1.プラグインだけでは、無駄にファイルが作られる

確かにプラグインを使えば、画像の縮小・圧縮を自動でやってくれるのでたいへん便利です。

しかしプラグインの機能として、

  • 加工する前の画像もサーバ上に保存する
  • サムネイルなど、色々な用途のために複数ファイルを生成

という特徴があるので、元ファイルが大きいとその分重くなる原因につながります。

では、「アップロード前に何もしない写真」「縮小・圧縮してからアップロードした写真」の2つを用意して、サーバ上に保存されたファイルがどうなるのか見てみましょう。

なお原本として使う写真は、撮ったままの状態で

  • 大きさ:横4608px・縦3456px
  • サイズ:2,170KB

(pxはピクセル、KBはサイズを表す単位)

という写真を使います。実験として使用したプラグインはEWWW Image Optimizer。

1.アップロード前に何もしなかった場合

何もせずにアップロードし、プラグインで生成されたファイルがこちら。

ファイル容量比較画像1
青枠の部分が、1枚の画像から生成されたファイル達です。

  • 4608×3456(元ファイル)
  • 1280×720
  • 1024×768
  • 768×576
  • 640×360
  • 320×180
  • 300×225
  • 150×150

と、計8枚のファイルになりました。容量は、8枚全部で約2,676KBです。

2.縮小・圧縮してからアップロードした場合

続いて、アップロード前に「700×525」に縮小・圧縮した場合は以下の通り。

ファイル容量比較画像2
  • 700×525(元ファイル)
  • 640×360
  • 320×180
  • 300×225
  • 150×150

と、計5枚のファイルに。元のファイルが「700×525」なので、生成すべき大きさの種類が少ないのです。

容量は全部で約151KBになりました。

結果をまとめると、

何もしなかった場合投稿前に縮小した場合
生成ファイル数8枚5枚
合計サイズ2,676KB151KB

合計サイズは、約17倍の差となっています

ファイル1枚でコレなので、数十枚、数百枚と積み重なると、サーバにかかる負荷はかなりの違いが出てきます。

画像をアップロードする前に縮小・圧縮しておくと、サーバの容量を大幅に節約できる!

2.画像の横幅は700ピクセルで十分

投稿する画像の大きさは、横幅700ピクセルで十分です。

現状は大半がスマホでの閲覧であり、スマホの横幅は大きくても800ピクセル程度です。

タブレットやPCで閲覧する際も、横幅は700ピクセルで問題ありません。

ちなみにスマホで撮った1枚の写真を、手動の縮小ありなしで比べてみます(どちらもワードプレス上のプラグインは適用)。

最適化前のラーメン画像スマホで撮ったまま無加工の画像
最適化後のラーメン画像縮小・圧縮した後の画像

元画像の横幅は4608ピクセルですが、1枚目はプラグインの機能で1024ピクセルに、2枚目はアップロード前にあらかじめ700ピクセルにしています。

どうでしょうか。見た目はほとんど変わらないと思います。

極限まで圧縮しても、見た目は変わらずサーバの負荷が下がる(つまりサイトが遅くなりにくい)なら、やらない手はありません!

スポンサーリンク

最後に:画像はプラグイン任せにせず、アップロード前にひと手間かけよう

ではもう一度、画像をアップロードする前に縮小・圧縮するメリットをまとめます。

メリットまとめ
  • サーバ上のファイル容量を軽くできる
  • その結果、サイトの速度が遅くなりにくい
  • 画像の見た目はあまり変わらない

「メリットはわかったけど、いちいち手で縮小とか面倒」というあなたも大丈夫。画像の縮小・圧縮作業は、iloveIMGという無料サイトで簡単にできます!

下記の記事で、iloveIMGの使い方を解説しています。ブログやサイトの画像を軽くしたい方は必読。

画像最適化記事(アイキャッチ)
画像のサイズ縮小・圧縮でブログ高速化!iloveIMGで簡単に出来るやり方を解説ブログやサイトに掲載する画像は、アップロードする前に縮小・圧縮しておくと、Webサーバの負荷を大幅に減らすことが出来ます。少しだけ手間が増えますが、慣れれば全然大したことないので、是非ともマスターしましょう!...

--以上!

COMMENT

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