png,jpg画像を圧縮するWordPressプラグインCompress JPEG & PNG imagesの使い方

どうも。葉です。

この記事では、WordPressに画像をアップロードする際に自動的に画像を圧縮してくれるプラグイン「Compress JPEG & PNG images」の設定と使い方を解説していきまます。

1.なぜ画像を圧縮するの?

でも、そもそもの話ですが、なぜ画像ファイルを圧縮する必要があるのでしょうか?

それは、ブログの表示速度を早くすることが目的です。

もし、ブログに載せている画像サイズが大きいと画像を読み込むのに時間がかかってしまい、ブログが表示されるのに時間がかかってしまいます。

すると、

  • 表示速度が遅いことでユーザーが離脱してしまう
  • 表示速度が遅いことで検索結果の順位が下がる
  • サーバーへの負担が大きくなる

といった悪影響が出てしまいます。

これらの悪影響を除外するためにブログ等に載せる画像サイズはなるべく小さくしたいのです。

Compress JPEG & PNG imagesでできること

そこで、WordPressに画像をアップする際に自動的に画像圧縮をかけてくれるプラグイン「Compress JPEG & PNG images」を使用します。

Compress JPEG & PNG imagesの主な機能は、

  • メディアに画像をアップロードした際に画像を自動圧縮
  • 過去にブログにアップされた画像の一括圧縮
  • メディアより画像の個別圧縮

です。一度設定したらあとはほったらかしでもプラグインが勝手に画像を圧縮してくれるのでとても便利です。

補足解説:Compress JPEG & PNG imagesはTinyPngのプラグインバージョン

ちょっと補足的な説明として、「Compress JPEG & PNG images」についてお話しておきます。Compress JPEG & PNG imagesは、「TinyPNG」というウェブ上のサービスのプラグインバージョンです。

tinypng

「TinyPNG」とは、ネット上のサービスで、「TinyPNG」上に画像をドラッグ&ドロップすることで画像を圧縮してくれます。圧縮率は平均で70%程度です。

tinypng2

ただし、問題なのは、画像を圧縮する際に毎回ドラッグ&ドロップしなければならず、面倒なことです。

そんな面倒さを解決してくれたのが、プラグイン「Compress JPEG & PNG images」です。「Compress JPEG & PNG images」は、画像をWordPressにアップロードする際に自動で画像圧縮をしてくれます。

なので、いちいちウェブ上で「TinyPNG」に画像をドラッグ&ドロップする必要がなくなります。

記事作成において、かなり時間短縮につながるプラグインなのでぜひ導入してください。

2.Compress JPEG & PNG imagesのインストール手順

Compress JPEG & PNG images

WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックしてください。

Compress JPEG & PNG imagesのインストール手順1

プラグインの検索窓に「Compress JPEG & PNG images」と入力してください。すると、WordPressがプラグインを検索します。検索が終わったら「今すぐインストール」をクリックしてください。

Compress JPEG & PNG imagesのインストール手順2

「有効化」をクリックしてください。

Compress JPEG & PNG imagesのインストール手順3

インストール済みプラグインのページで「Compress JPEG & PNG images」の背景が青くなっていればインストール・有効化完了です。

Compress JPEG & PNG imagesのインストール手順4

3.Compress JPEG & PNG imagesの設定

次に、「Compress JPEG & PNG images」の設定を行っていきます。

WordPress管理画面で最上部に「Please register or provide an API key to start compressing images」とあるのでクリックしてください。

Compress JPEG & PNG imagesの設定1

名前とメールアドレスを入力し「Register Account」をクリックしてください。

Compress JPEG & PNG imagesの設定2

すると「TinyPNG」よりメールが届くので「Activate your account」をクリックしてください。

Compress JPEG & PNG imagesの設定3

これで、「Compress JPEG & PNG images」への登録がしました。「Return to plugin」をクリックしてください。

Compress JPEG & PNG imagesの設定4

「TinyPNG account」の欄に「Your account is connnected」と表示されていたら「Compress JPEG & PNG images」で画像圧縮ができるようになっています。

Compress JPEG & PNG imagesの設定5

無料で1ヶ月に圧縮できる画像枚数は500枚まで

Compress JPEG & PNG imagesの設定2-1

「Compress JPEG & PNG images」を使って圧縮できる画像の枚数は、1ヶ月あたり500枚です。500枚あれば十分だと思うかもしれませんが、注意点があります。それは、WordPressに画像をアップした際には、複数枚サイズの画像が一緒に生成されることです。

ここで、WordPress管理画面の左メニューより「設定→メディア」をクリックしてください。

Compress JPEG & PNG imagesの設定2-2

そこで、「File compression」の右側に複数の画像サイズが表示されているはずです。これが、1つの画像をアップした際にWordPress内で生成される画像数です。

例えばですが、下図のように3つにチェックを入れた場合、圧縮できる画像数は500/3の166枚になります。

チェックを入れれば入れるほど圧縮できる画像の枚数が減っていくので注意してください。

Compress JPEG & PNG imagesの設定2-3

よくわからない人は、「Original image(oberwritten by compressed image)」のみにチェックを入れておきましょう。

Original以外はもとの画像サイズの小さいので、圧縮しなくても特に問題にはならないでしょう。

Compress JPEG & PNG imagesの設定2-4

これで、「変更を保存」をクリックしてください。

Compress JPEG & PNG imagesの設定2-4

以上で、プラグイン「Compress JPEG & PNG images」の設定は完了です。

以降は、自動で画層圧縮してくれる

上記の設定が完了したら、あとは今まで通りに記事を書くだけです。

特に細かい設定をしなくても「Compress JPEG & PNG images」が自動で画像を圧縮してくれますよ。

4.Compress JPEG & PNG imagesの使い方

次に、「Compress JPEG & PNG images」の使い方を解説していきます。

基本的には、プラグイン「Compress JPEG & PNG images」を導入する前にアップしてしまった画像に対して行うことです。

過去にアップロードした画像を一括圧縮

過去にアップロードした画像を一括で圧縮したい場合は、まず、WordPress管理画面の左メニューより「メディア→Bulk Optimization」をクリックしてください。

Compress JPEG & PNG imagesの使い方1

「Start Bluk Optimization」をクリックしてください。

Compress JPEG & PNG imagesの使い方2

すると、次のように画像の圧縮が始まります。

Compress JPEG & PNG imagesの使い方2-2

個別で画像を圧縮する方法

また、個別で画像を圧縮することもできます。

下図の画像を参考に「Compress」をクリックしてください。

Compress JPEG & PNG imagesの使い方3

すると次のように選択した画像のみ圧縮されます。

Compress JPEG & PNG imagesの使い方4

これで、プラグイン「Compress JPEG & PNG images」の使い方の解説は終わりです。

5.まとめ

この記事では、プラグイン「Compress JPEG & PNG images」を使ってWordPressにアップされた画像を圧縮する方法を解説しました。

類似プラグインに「EWWWww Image Optimizer」がありますが、「Compress JPEG & PNG images」の方が圧縮率が高いのでこちらがおすすめです。

念のため関連記事として紹介しておきますね。

⇒ 画質の劣化なしに画像圧縮をするWordPressプラグインEWWW Image Optimizerの使い方

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします