WordPress

WordPress でリサイズ後の画像を圧縮できる『Compress JPEG & PNG images』

WordPress でリサイズ後の画像を圧縮できる『Compress JPEG & PNG images』

毎回画像をアップロードする際には、圧縮してから画像を上げているのですが、GTmetrixを使って速度チェックを行った所、なぜか『Optimize images』の項目がE判定になっており、

画像が圧縮できてないぞ!なんとかしろ!

との注意文言が出ていました。

GTmetrixの要修正箇所『Optimize images』

GTmetrixの要修正箇所『Optimize images』

なんでや!圧縮した画像アップロードしてるやろ!と思い内容を確認してみると、新着記事一覧等で使っているサムネイル(リサイズ後)の画像が引っかかっているようでした。

たしかにリサイズ後の画像は、WordPressが自動的にリサイズした画像なので圧縮してないわ。

このリサイズ後の画像の圧縮として、便利なプラグイン『Compress JPEG & PNG images』を紹介したいと思います。

圧縮と言えばパンダ『TinyPNG』

WordPressプラグインの『Compress JPEG & PNG images』はサイトスピードを意識している方なら必ず見たことがあるであろう、ブラウザ上で画像の圧縮を行えるTinyPNGが出しているプラグインです。

TinyPNG

TinyPNGのパンダ

無料版ですと月に500枚までと圧縮できる画像の枚数は制限がありますが、他にもある圧縮プラグイン『EWWW Image Optimizer』『WP Smush』と比べても圧縮率は高く、サイトに掛かる負荷もほとんどなく非常に優秀です。

月間圧縮枚数500枚を超えてしまっても、勝手に有料プランに移行する事もないので、安心して使えます。

TinyPNGで圧縮していないパンダ

TinyPNGで圧縮していないパンダ102KB

TinyPNGで圧縮したパンダ

TinyPNGで圧縮したパンダ28KB

圧縮前『102KB』圧縮後『28KB』と70%以上の圧縮ができているのに、違いが分かりません。

『Compress JPEG & PNG images』の使い方

『プラグイン』→『新規追加』→ 検索で『Compress JPEG & PNG images』で、プラグインをインストールして有効化しましょう。

Compress JPEG & PNG images

Compress JPEG & PNG images

次は『Compress JPEG & PNG images』のアカウント登録ですが、英語で万年『1』しか取った事ない私でもなんとなくやってればできるので、『画像圧縮の設定』を早く見たい方は飛ばしてください。

↓ 画像圧縮の設定まで飛ぶ

アカウントを登録する

有効化できたら『設定』の中に『Compress JPEG & PNG images』という項目が増えますので、クリック!

Compress JPEG & PNG imagesの設定

クリック!

まずは、会員登録が必要なので、『Your full name』と『Your email address』を入力して、『Register Account』を押しましょう。

名前とメールアドレスをよく分からない会社に渡せるかー!という方は、捨てアドレスでも作って登録しましょう。

会員登録

会員登録

登録が終わると、メールを確認してアカウントを有効化しようね!って文言が出てくるので、先ほど登録したメールアドレスに届いたメールを確認しましょう。

アクティベートしてね!

メール送ったからアカウントを有効化しようね!

メールを確認すると、『support@tinify.com』からメールが届いているので、その中の『Activate your account』をクリック!

『Activate your account』をクリック!

『Activate your account』をクリック!

ブラウザが立ち上がって自分の『tinyPNG』の会員ページに行ったかと思います。そこの『API Key』をコピーしておきましょう。

apikeyをコピー

apikeyをコピー

先ほどの、『Compress JPEG & PNG images』プラグインの設定画面に戻り、『Change API key』をクリックして、空欄に先ほどコピーした『API key』をペーストして保存しましょう。

APIkey保存

API keyの保存

下記画像の様になれば、アカウントが有効化されました。お疲れ様です。

アカウント有効化

アカウント有効化

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

画像の圧縮するタイミング

画像の圧縮するタイミング

3つの選択項目がありますが、初期の『Compress new images in the background (Recommended)』のままで良いと思います。

画像の圧縮するタイミングを設定しているのですが、上から
『バックグラウンドで圧縮』
『画像アップロード中に圧縮』
『新しい画像を圧縮しない』
になっています。

POINT

『画像アップロード中に圧縮』を選んでしまうと、画像のアップロードと同時に圧縮も併せて行う為、画像を挿入する度に待ち時間がかかるのでめんどくさいです。

『バックグラウンドで圧縮』を選んでおけば、後で勝手に圧縮しといてくれるのでオススメです。

【最重要】圧縮を行う画像サイズの選択

圧縮しとく画像のサイズ選んでね!

圧縮しとく画像のサイズ選んでね!

Select image sizes to be compressed』で分かると思いますが、圧縮をしたい画像サイズを選択してね!って事です。

私の場合だと、PNGooというツールを使って画像を圧縮してからアップロードするので、『Original image』(アップロードする画像)にチェックを入れていません。

画像を事前に圧縮してアップロードするのもメンドクサイ!という方はチェックしておきましょう。

後は、サイト上で使っている画像サイズにチェックしておきましょう。

POINT

画像にチェックを入れた数だけ圧縮枚数が増えるので、サイト上で使っていて圧縮をかけたいサイズのみをチェックしましょう。

仮に2つのサイズにチェックを入れているとすると、1枚画像をアップロードすると2枚分の圧縮画像枚数を使います。

月に500枚までしか無料で圧縮できないので、できればアップロードする画像位は圧縮しておきましょう。

画像の圧縮スタート!

全ての設定が完了したら、今までアップロードした画像の圧縮を行いましょう。

『メディア』→『Bulk Optimization』をクリック!

今までのアップロードした画像を圧縮しにいく

くりっく!くりっく!

『Start Bulk Optimization』をクリックすれば、過去にアップロードした画像全ての圧縮をスタートします。

画像の圧縮スタート!

画像の圧縮スタート!

枚数が月間圧縮可能枚数より多いと『有料プランにしない?』と言ってきますが、毎月500枚圧縮できる数は復活するので『No thanks continue anyway』を押して、その月の圧縮可能枚数だけ圧縮して残りは来月やりましょう。

有料プランにしない?

有料プランにしない?と誘ってくるがNO!

毎月にアップロードする画像の枚数が500枚なんて簡単に超えるよ!って方は、諦めてお金を払うか、FTPで /wp-content/upload/ の中にある画像をローカルに落として圧縮してからアップロードしましょう。

スポンサーリンク

リサイズ後の画像を圧縮した結果

GTmetrixA判定

GTmetrixA判定

無事、リサイズ後の画像も圧縮されGTmetrixでA判定になりました。

画像の圧縮は、サイトの表示スピードに直結するので、是非やりましょう!以上!

スポンサーリンク

コメント欄

コメントを書く

RELATED POST

関連記事

NEW POST

新着記事はこちら