【WordPress】ガッツリ画像を圧縮できるプラグイン「Compress JPEG & PNG images」でサイト高速化まっしぐら!

【WordPress】ガッツリ画像を圧縮できるプラグイン「Compress JPEG & PNG images」でサイト高速化まっしぐら!

2017.3.14

WordPressプラグインで画像を圧縮できるものと言ったら「EWWW Image Optimizer」というプラグインが有名です。

ところがどっこい、今回は画像を圧縮できるWebサービスとして有名な「TinyPNG」謹製のプラグインを使ってみることにしました。

1ヶ月間に圧縮できる枚数に限りはあるものの、EWWW Image Optimizerに比べて設定項目も少なくて使いやすい、かつ、圧縮率も良い感じだったので早速乗り換えることにしました!

2018.08.06 : バージョン 3での変更点に合わせて記事内容を編集しました。

「EWWW Image Optimizer」より使いやすいぞ「Compress JPEG & PNG images」

よっひー(@yosiakatsuki)です。

画像圧縮できるWebサービス「TinyPNG」からWordPressプラグインが登場したというのは知っていたものの、1ヶ月に圧縮できる枚数に上限があるということでなかなか使う気になれず避けていました。

配布用WordPressテーマ用のサイトを作ったのを機に、「Compress JPEG & PNG images」を使ってみたら想像以上に使いやすいし圧縮率もいい

さっそくこのブログでも「EWWW Image Optimizer」から「Compress JPEG & PNG images」に乗り換えることにしたので、プラグイン乗り換えを決意したポイントなどを紹介してみます。

圧縮率がいい

EWWWより圧縮率がよく、PageSpeed Insightsで指摘がなくなるほどに圧縮できる

まず、画像を圧縮して容量を抑えるのが本来の目的なので、気になるのは圧縮率ですね。

上の図の左が「EWWW Image Optimizer」、右が「Compress JPEG & PNG images」を有効化した状態でが同じ画像をアップしたときの圧縮後の容量です。

もともとサイズの小さい画像ですが、左はPageSpeed Insightsで警告が出ますが、右は問題なしです。

僕としてはこの差が大きいです。

設定が簡単

設定項目が少なくて迷うことがない

「Compress JPEG & PNG images」は設定項目がめちゃめちゃシンプルです

「細かな設定ができる」のもありがたいことではありますが、それだけで「使いこなせるか心配」になることもあります…

その点、このプラグインは設定項目が少なくて迷うことなく使い始められると思います。

※導入方法と設定についてはこの後説明します

アップロード済み画像の一括圧縮・個別圧縮もできる

プラグイン導入前にアップロード済みのファイルについても圧縮処理を行うことが可能です!

一括圧縮

既にアップロード済みの画像を一括で圧縮することも可能です

プラグインを有効化すると「メディア」のメニューに追加される「Bulk Optimization」からアップロード済みのファイルを一括で圧縮することが出来ます(事前のバックアップはお忘れなく!)

ただし、「Bulk Optimization」のページにも書いてありますが、枚数によっては無料枠を超えるおそれがあるので注意してください

(すべて圧縮した場合の見積もりが表示されていますので参考に…)

個別圧縮

アップロード済みの画像を個別に圧縮することも可能です

既にアップロード済みの画像は、メディアライブラリの一覧(リスト形式)に追加された「Compression」列のボタンから圧縮処理することが出来ます。

もしくは、圧縮したいが画像の一番左の列のチェックをつけて、まとめて処理することも出来ます!

Compress JPEG & PNG imagesの注意点

1ヶ月500枚の制限がある

非常に使いやすいプラグインではありますが、1ヶ月に500枚までしか圧縮出来ないという制限があります…

500枚が多いか少ないかは運営スタイルによって変わってくる部分ですね。

しかも、「500枚」というのは「アップロードする写真500枚」というわけではなく、アップロード時に作成されるサムネイル画像や中サイズ画像についても圧縮処理のカウントに含まれます。

そのため、圧縮処理をする画像サイズを選んで、圧縮する枚数の節約をしておく必要があります!(設定方法は後述)

無料枠を過ぎた分は枚数毎の従量課金のようですので、僕は「有料でもまぁいいかな?」という気もしないでもないです。

無料の範囲内で使えるか試算してみる

例えば、毎日記事を書く人で、画像はフルサイズ、サムネイル、大サイズを圧縮したとします。

簡易的に1ヶ月30日で考えると…500(枚) / 30(日) * 3(種類) = 5.55…

毎日1記事書いて、圧縮する画像が3種類の人は1記事あたり5枚程度の画像までなら無料枠でも十分このプラグインを使っていける…という計算になります。

画像を5枚使った記事を毎日書くなんて大変!!って場合は無料枠で十分使えるのではないでしょうか。

アップロードが遅い

【追記】バージョン3.0.0から圧縮の処理方法が変更になり、アップロード時の速度が改善されました!

画像の圧縮率が高く、サイトの高速化を期待できますが、その反面、画像のアップロードに時間がかかるようになります…

テンポよくブログを書いて公開したい方にはちょっと馴染まない気がするので、試しに使ってみてあまりにも遅いと感じたら、後からまとめて一括圧縮するといいかもしれません。

Compress JPEG & PNG imagesのインストール・設定方法

それではCompress JPEG & PNG imagesをインストールして設定してみます

インストール

プラグインの新規追加からパンダアイコンのプラグインをインストール

インストールはプラグインの新規追加ページから「tinypng」と検索すると見慣れたパンダさんが見つかると思います。(プラグイン名をコピペで検索しても大丈夫です)

こちらをインストールして有効化します

APIキーの取得

APIキー取得のためにアカウント名とメールアドレスを入力

インストールが完了したら[設定]→[Compress JPEG & PNG images]に設定が追加されています。

こちらからAPIキーを取得(もしくは入力)してアカウント認証をしておきます。

まだアカウントを持っていない場合はアカウント名とメールアドレスを入力して「Register Account」ボタンを押します。

アカウント有効化のリンクつきメールが届く

入力したメールアドレスにメールが届きますので、「Activate your account」からアカウントを有効化します。

アカウント認証ができれば緑色のチェックマークが付きます

アカウント認証ができていれば「Your account is connected」と表示されるはずです!

圧縮タイミングの設定をする

画像の圧縮タイミングを選択できる

まずは画像を圧縮するタイミングを選択します。

初期状態では「Compress new images in the background (Recommended)」が選択され、オススメもされています。
バックグラウンドで圧縮すると書かれていますが、バージョン 3.0.0 時点では正直どのタイミングで圧縮されているかよくわかりません…

メディアの一覧で確認したところ、記事を公開してもアップロードから何時間経っても圧縮されませんでした…
知り合いは「圧縮された」と言っていたので、なにか他のプラグインが影響しているか、サーバー側の設定が関係しているのかもしれません。

もし、うまく圧縮されない場合は、画像アップロード後に「メディア」→「Bulk Optimization」から一括圧縮しましょう。

「Compress new images during upload」は画像アップロード時に圧縮します。アップロードに時間がかかるのであまりオススメしません。

「Do not compress new images automatically」についてはアップロード時の圧縮をしない設定です。後ほどまとめて圧縮処理をすればいい場合はこの設定でもいいでしょう。

圧縮する画像サイズなどの設定をする

圧縮処理を行うサイズを選ぶ

先に話したとおり、無料プランでは1ヶ月に500枚までしか画像の圧縮が出来ないという制限があるので、圧縮処理をする画像サイズをしっかり選んでおきます!

設定の「File compression」という項目に表示されている画像サイズで圧縮したいものにチェックを付けます。

運営スタイルに合わせて選んでください!

その他設定

「Original Image」の項目は変更する必要はないかと思います。

「Resize and compress the original image」についてはアップロードした画像を自動で設定しておいた幅・高さにリサイズするための設定です。

便利っちゃ便利ですが、圧縮枚数を1枚多めに使ってしまうので、できればリサイズはアップロード前に手動でやったほうがいいでしょう…

その他3項目は日付やコピーライト、GPSの情報を消さずに保存しておくか…といった設定項目になります。

メタ情報が必要なければチェックは入れないままにしておきます。

まとめ

APIキーの取得もあっという間ですのでホント設定はなにも迷うことなく簡単です!

画像はなるべく軽くしたほうがページの表示も速くなるのでぜひ使ってみてください!

その他サイト高速化…というかPageSpeed Insightsで100点取ってみた実験も記事にしているのでよろしかったらどうぞ▼

WordPressサイト高速化!PageSpeed Insights100点の為にやったこと・わかったこと
先日公開した新しい自作テーマがとうとうPageSpeed Insightsのスコア100点をとることが出来ました! 実際100点を取ってみると「PageSpee…
yosiakatsuki.net

ではまた。