画像が豊富に使われたサイトやページは、コンテンツを分かりやすく豊かなものにし、また重要なポイントを視覚にアピールすることができます。一方で、画像を多く使いすぎたり、サイズの大きな画像を使用することでページの読み込み速度が落ちてしまうと、逆にユーザビリティを下げてしまう恐れもあります。
サイトスピードの高速化はSEOのなかでも非常に重要な位置を占めていますので、GTMetrixやGoogle Page Insightsなどで画像を圧縮するべきだという警告がでるようなら、要注意。
そういう私のブログもしっかり警告がでており、画像圧縮プラグインを使って圧縮する必要がありました。。
WordPressの画像圧縮プラグインは評価が高いものが多く、どれを使おうか迷ってしまいます。一番人気でいわゆる「老舗」のプラグインならEWWW Image Optimizerということになるのでしょうが、人気とかインストール数が多いからという理由だけじゃなくて、「どれくらい圧縮できるのか」ということが一番重要な要素だと思います。
ということで、一枚の画像を用意し、5つの人気の高いプラグインそれぞれで圧縮した結果を比較してみることにしました。プラグインはすべて無料で使えるものに限定しています。
今回使ったのはこの写真。
オリジナルサイズは223KB(808 × 639ピクセル)、ブログやウェブサイト上に載せる画像としては標準的な大きさかと思います。(最近はもっと大きいな画像が使われることもありますが)
画像圧縮プラグイン5つの比較
以下がその圧縮後のサイズやプラグインの特徴を表にまとめたものです。
プラグイン | 圧縮後のサイズ | 圧縮数の制限 | 圧縮タイプ。その他 | 会員登録 |
EWWW Image Optimizer | 202.7 KB | 特になし | 無料版はLossless圧縮のみ NextGEN Gallery や GRAND Flagallery の画像も圧縮できる | 不要 |
WP Smush | 202.7 KB | 特になし | 無料版はLossless圧縮のみ | 不要 |
Imagify | 167KB | 50MB/月(200KBの写真なら250枚) | Agressive (Normal, Agressive, Ultraの3モードから選べる) | 要 |
Imagify | 143.69 KB | 同上 | Ultra(Normal, Agressive, Ultraの3モードから選べる) | 要 |
Compress JPEG & PNG images | 152.6 KB | 月の上限500枚 | Lossy(圧縮サービスで有名なTinyPNGが提供しているプラグイン) | 要 |
ShortPixel | 115KB | 月の上限50 | Lossy | 要 |
そして以下が、オリジナルの写真(左側)と各プラグインで圧縮した後の写真(右側)を並べたもの。パッと見た感じはほぼどれもオリジナルと変わらないです。
少し目を画面から離してぼーっと眺めていると違いが見えてくるような・・・?
結論:圧縮プラグインはどれがいいのか
圧縮する写真、サイトの用途にもよりますが、個人的にはImagifyのAgressive(中程度の圧縮、Lossy)モードが圧縮もそこそこしっかりできて安心感があるかなと思いました。
Imagifyのプラグインを使うと、Agressiveに基本しておいて、もう少し圧縮してもよさそうな画像だなと思ったら、管理画面からさらにUltraモードでその画像だけ強く圧縮する、というようなこともできます。
一番圧縮が強いShort Pixelの圧縮後の画像は鮮明さが欠けてぼやっとしている感じです。とはいえ、よく見なければ分からないですので、サイトの速度アップを重視していて圧縮を強めにかけたいなら、Short Pixelか、Compress JPEG & PNG images かを使うのがよさそうです。
ShortPixelだとほぼ半分のサイズにまでなるのが凄いところですが、月当たりの圧縮枚数の制限が50枚と少なすぎるので、これまで溜まりに溜まった既存画像を圧縮したい方にはあまり向いていません(もちろん有料版ならもっと圧縮できます!)。その場合はパンダが印象的なTinyPNGが提供しているプラグインCompress JPEG & PNG images を使うほうがいいですね。
逆にポートフォリオサイトや写真を重視するeコマースサイトなど画像の劣化を避ける必要があるサイトの場合は、Lossless圧縮のEWWW Image OptimizerかWP Smushがいいでしょう。
中間を行きたい人にはImagifyがおススメ。私もImagifyを使うことにしました。
2021.12.12追記:現在はこれらの圧縮プラグインは使用せず、WebP Converter for Mediaを使ってWebP形式に対応するようにしています。
コメント