WEBサイトやブログの表示速度を速くするために色々な施策を講じていると思います。高速化する方法として、画像の容量をできるだけ小さくするために「画像の圧縮」をしている方も多いと思います。
自分も画像の圧縮しているのですが、フッと疑問が頭をよぎりました。画像のサイズを変更してから、圧縮アプリを使う方がいいよね?画像を圧縮してからサイズ変更したほうがいいんじゃない?試してみよう!やってみよう!
2つの手順を比較してみた
という訳で「画像のサイズを変更してから、圧縮アプリを使う」と「画像を圧縮してからサイズ変更する」の2通りのやり方で、どちらの方が最終的な画像の容量が小さくなるのかを比較してみました。
今回、使用する画像はこちら↓(アップロード前に画像サイズ変更も圧縮もしていない画像を貼っています)
テスト1:「画像のサイズを変更してから、圧縮アプリを使う」
サイズ変更も圧縮アプリも使用していない状態での画像の容量です。約291KBありました。
まずは画像のサイズを変更します。(今回はMacのプレビューを使いました)
画像サイズ変更後の画像容量は約98KB。かなり小さくなりました。
続いて画像圧縮アプリ(ImageOptim)を使って圧縮します。
※ImageOptimのダウンロードページ
圧縮後の画像容量は約86KBと少し小さくなりました。
テスト2:「画像を圧縮してからサイズ変更する」
サイズ変更も圧縮アプリも使用していない状態での画像の容量はテスト1と同じ(約291KB)です。
画像圧縮アプリ(ImageOptim)で圧縮します。
圧縮後の画像容量は約270KBと少し小さくなりまし。
次は画像サイズを変更します。
画像サイズ変更後の画像容量は約94KBになりました。
今回は「画像のサイズを変更してから、圧縮アプリを使う」の方が小さくなった
結果は、「画像のサイズを変更してから、圧縮アプリを使う」が86KB、「画像を圧縮してからサイズ変更する」が94KB。
「画像のサイズを変更してから、圧縮アプリを使う」の勝利!
ただし!他の画像で同じように試したところ、画像サイズを変更したら逆に画像容量が増えた(?)ので、必ずしも画像のサイズを変更してから、圧縮アプリを使うのが最善ではないかもしれません。
ですが、一般的なやり方は「画像のサイズを変更してから、圧縮アプリを使う」のようなので、僕はこの手順でやっています。
WEBマスターの手帳では、WordPressプラグイン「EWWW Image Optimizer」も使っています。
大量の画像サイズを一気に変更するなら「iMage Tools」
画像サイズを変更するのに、今回は分かりやすいようにプレビューツールを使いましたが、何枚も画像がある場合に一気に画像サイズを変えたい時には「iMage Tools」を使っています。
どうやらPhotoshopを使って「WEBおよびデバイス用に保存」をするのも有効らしい。毎回、Photoshopを使うのは面倒だから重すぎる画像の時にはPhotoshopを使ってみようかな。
ただブログを書くと言っても色々と手間ひまかかってます。ただ単に「良い文章」を書いていれば「良いコンテンツ」といことでもないし、画像をたくさん使ったり、動画を沢山貼り付けても表示速度が遅くては本末転倒。
WEBサイトを運営するって言うほど簡単じゃないですね。でもそれも含めて僕は楽しいし大好きなんですけどね。