はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

WEBサイトの表示速度高速化で画像圧縮するベストな手順は?サイズ変更が先?それとも圧縮アプリが先?

WEBサイトやブログの表示速度を速くするために色々な施策を講じていると思います。高速化する方法として、画像の容量をできるだけ小さくするために「画像の圧縮」をしている方も多いと思います。

自分も画像の圧縮しているのですが、フッと疑問が頭をよぎりました。画像のサイズを変更してから、圧縮アプリを使う方がいいよね?画像を圧縮してからサイズ変更したほうがいいんじゃない?試してみよう!やってみよう!

2つの手順を比較してみた

という訳で「画像のサイズを変更してから、圧縮アプリを使う」と「画像を圧縮してからサイズ変更する」の2通りのやり方で、どちらの方が最終的な画像の容量が小さくなるのかを比較してみました。

今回、使用する画像はこちら↓(アップロード前に画像サイズ変更も圧縮もしていない画像を貼っています)
使用する画像

テスト1:「画像のサイズを変更してから、圧縮アプリを使う」

サイズ変更も圧縮アプリも使用していない状態での画像の容量です。約291KBありました。
テスト1の元データ

まずは画像のサイズを変更します。(今回はMacのプレビューを使いました)
テスト1の画像サイズ変更

画像サイズ変更後の画像容量は約98KB。かなり小さくなりました。
テスト1の画像サイズ変更

続いて画像圧縮アプリ(ImageOptim)を使って圧縮します。
テスト1を圧縮

ImageOptimのダウンロードページ

圧縮後の画像容量は約86KBと少し小さくなりました。
テスト1の圧縮後

テスト2:「画像を圧縮してからサイズ変更する」

サイズ変更も圧縮アプリも使用していない状態での画像の容量はテスト1と同じ(約291KB)です。
テスト2の元データ

画像圧縮アプリ(ImageOptim)で圧縮します。
テスト2を圧縮

圧縮後の画像容量は約270KBと少し小さくなりまし。
テスト2の圧縮後

次は画像サイズを変更します。
テスト2のサイズを変更

画像サイズ変更後の画像容量は約94KBになりました。
テスト2の画像サイズ変更後

今回は「画像のサイズを変更してから、圧縮アプリを使う」の方が小さくなった

結果は、「画像のサイズを変更してから、圧縮アプリを使う」が86KB、「画像を圧縮してからサイズ変更する」が94KB。

画像のサイズを変更してから、圧縮アプリを使う」の勝利!

ただし!他の画像で同じように試したところ、画像サイズを変更したら逆に画像容量が増えた(?)ので、必ずしも画像のサイズを変更してから、圧縮アプリを使うのが最善ではないかもしれません。

ですが、一般的なやり方は「画像のサイズを変更してから、圧縮アプリを使う」のようなので、僕はこの手順でやっています。

WEBマスターの手帳では、WordPressプラグイン「EWWW Image Optimizer」も使っています。

大量の画像サイズを一気に変更するなら「iMage Tools」

画像サイズを変更するのに、今回は分かりやすいようにプレビューツールを使いましたが、何枚も画像がある場合に一気に画像サイズを変えたい時には「iMage Tools」を使っています。
一気に画像サイズを変えたい時には「iMage Tools」

iMage Tools
カテゴリ: 写真
現在の価格: 無料

どうやらPhotoshopを使って「WEBおよびデバイス用に保存」をするのも有効らしい。毎回、Photoshopを使うのは面倒だから重すぎる画像の時にはPhotoshopを使ってみようかな。

ただブログを書くと言っても色々と手間ひまかかってます。ただ単に「良い文章」を書いていれば「良いコンテンツ」といことでもないし、画像をたくさん使ったり、動画を沢山貼り付けても表示速度が遅くては本末転倒。

WEBサイトを運営するって言うほど簡単じゃないですね。でもそれも含めて僕は楽しいし大好きなんですけどね。