WordPress

Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】

更新日 :

Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】
WordPressブログの画像をまとめて圧縮したい!なにか良いプラグインは無いかな?
Compress JPEG & PNG imagesというプラグインの設定方法や使い方を教えて欲しい!

今回はこういった悩みを解決していきます。

ウェブサイトでは画像サイズが大きいと、ページの読み込みに時間がかかってしまい、ユーザーがサイトから離脱する可能性が高くなります。

そうした離脱を防ぐためにも、ブログ内の画像はしっかりと圧縮処理する必要があるのです。

そこで今回はWordPressブログの画像を一括最適化・圧縮できる「Compress JPEG & PNG images」というプラグインの導入手順や設定方法について詳しく解説していきます。

WordPressの読み込みスピードが遅くて悩んでいる方は必見です。

この記事でわかること

  • Compress JPEG & PNG imagesとは
  • Compress JPEG & PNG imagesの導入方法
  • Compress JPEG & PNG imagesの設定方法

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせてご覧ください。

Compress JPEG & PNG imagesとは

Compress JPEG & PNG imagesとは

まずはCompress JPEG & PNG imagesの特徴について簡単にご説明します。

WordPressにアップした画像を自動圧縮してくれるプラグイン

Compress JPEG & PNG imagesとはWordPressにアップロードした画像ファイルを自動で圧縮してくれるプラグインです。

上画像のパンダのイラストからもわかるように、あの有名な画像圧縮サービスサイト「TinyPNG」のプラグイン版になります。

Compress JPEG & PNG imagesはTinyPNGと同様、高画質を維持しながらファイルサイズをしっかりと圧縮してくれます。

平均で50~60%程度、ファイルサイズを小さくすることが可能です

そして何より「アップロードするたびに自動で圧縮してくれる」ので効率性が非常に高く、多くのWordPressユーザーに愛用されています。

画像ファイルを圧縮してサイズを小さくすると、サイト読み込み時間を大幅に短縮できるので、ユーザービリティの高いウェブサイトを実装できるのです。

サイトスピードが遅くて困っている方、読み込み時間の長さが気になる方は必須のプラグインといって良いでしょう。

ウェブページのサイトスピードを測定するにはGoogleの「PageSpeed Insights」がオススメです。

詳しい使い方はこちらの記事をご覧ください。

PageSpeed Insightsの使い方や分析方法をご紹介
PageSpeed Insightsの使い方や分析方法をご紹介

「自分が運営するウェブサイトがなんだか重い」 「サイトの表示速度が遅い原因を知りたい」 そんな方にオススメなのが、Googleが提供しているウェブサイトの読み込み速度計測ツール「PageSpeed I ...

更新日:2023年12月16日

Compress JPEG & PNG imagesを使う際の注意点

ただし1つだけ注意点があります。

それは「圧縮可能枚数は1ヶ月500枚まで」ということ。

一見少ないようにも見えますが平均すると1日16~17枚ですので、大抵の方は特に問題ないかと思います。

ただしサイトの規模によっては500枚という制限では足りない方もいるかもしれません。

この枚数制限を無くすには「有料版に課金する」or「ウェブ版のTinyPNGを利用する」or 「別のプラグインを利用する」ことをオススメします。

有料版に課金する

Compress JPEG & PNG imagesで、1ヶ月あたり500枚以上の画像を圧縮したい時は課金する必要があります。

料金プランとしてはこんな感じ。

500枚目以降の料金

  • ~ 500枚・・・・・・無料
  •  500~10000枚・・・1枚あたり0.009ドル
  • 10000枚~・・・・・1枚あたり0.002ドル

ドル円相場の状況によって変わってきますが、大体1枚0.2円~1円ということがわかります。

低価格ではありますが、わざわざ費用をかけなくても画像を圧縮する方法はたくさんありますので、課金することはオススメできません。

ウェブ版のTinyPNGを利用する

ウェブ版のTinyPNGなら枚数無制限で画像圧縮が可能です。

ただし一度に圧縮できる枚数は20枚までとなっており、それ以上の枚数を圧縮させたい場合は複数回手順を繰り返す必要があるので注意しましょう。

TinyPNGの使い方【画像を超圧縮できる無料サービス】
TinyPNGの使い方【画像を超圧縮できる無料サービス】

「ウェブサイトに掲載する画像を圧縮したい!」 「画像ファイルが重くてサイトスピードが遅い...」 ウェブサイトの読み込みファイルの中で、画像ファイルはかなりの割合を占めています。 そのため画像ファイル ...

更新日:2022年11月28日

別のプラグインを利用する

Compress JPEG & PNG imagesと似た機能をもつ画像圧縮プラグインとしてEWWW Image Optimizerが有名です。

>> EWWW Image Optimizer – WordPress プラグイン | WordPress.org 日本語

EWWW Image Optimizerは圧縮枚数が無制限ですのでおすすめです。

まとめ:Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】
画像を圧縮・最適化するEWWW Image Optimizerの設定方法・使い方

WordPressブログの画像を圧縮したい!なにか良いプラグインは無いかな? EWWW Image Optimizerというプラグインの設定方法や使い方を教えて欲しい! 今回はこういった悩みを解決して ...

更新日:2023年12月16日

Compress JPEG & PNG imagesとEWWW Image Optimizerを併用すると競合が起きてしまうので、どちらか片方のみを使用するようにしましょう。

Compress JPEG & PNG imagesの導入方法

Compress JPEG & PNG imagesの導入方法

まずはCompress JPEG & PNG imagesの導入手順からご紹介していきます。

基本的にWordPressプラグインのインストール手順はとってもカンタンです。

手順は以下の通りです。

Compress JPEG & PNG imagesの導入手順

  1. WordPress管理画面からプラグインページへ
  2. プラグイン名「Compress JPEG & PNG images」を検索
  3. プラグインをインストール&有効化

それでは詳しく見ていきましょう。

>> Compress JPEG & PNG images公式ページ

step
1
WordPress管理画面からプラグインページへ

まずはWordPress管理画面からプラグイン専用ページに移動します。

プラグインページ

左側のメニューから「プラグイン」→「新規追加」を選択しましょう。

step
2
プラグインを検索

プラグインの新規追加画面に移動したら、インストールしたいプラグイン名を検索します。

入力欄から「Compress JPEG & PNG images」と検索しましょう。

「Compress JPEG & PNG images」と検索

すると笑ったパンダのアイコンが特徴の「Compress JPEG & PNG images」というプラグインが見つかるはずです。

step
3
プラグインをインストール&有効化

プラグインが見つかったら、「今すぐインストール」を押してインストールを開始しましょう。

プラグインをインストール&有効化

インストールが終わると「有効化」と書かれたボタンに切り替わります。

プラグインをインストール&有効化

同様に有効化ボタンもクリックしましょう。

これでCompress JPEG & PNG imagesの導入は完了です!

こうしてみると超カンタンですね!

Compress JPEG & PNG imagesと同様にサイトスピードを高速化させるプラグインに「Autoptimize」があります。
2つのプラグインを合わせて使うことでサイトの表示速度を最大限に改善することができます。

Autoptimizeの設定方法や使い方についてはこちらの記事をご覧ください。

Autoptimizeの設定方法と使い方をご紹介【サイトスピード高速化プラグイン】
Autoptimizeの設定方法と使い方を解説【サイトスピード高速化プラグイン】

Autoptimizeってどんなアプリなの?設定方法や使い方を知りたい! 今回はこんな疑問にお答えしていきます。 WordPressをご使用の皆さん「Autoptimize」は使ってますか? 「Aut ...

更新日:2023年2月18日

Compress JPEG & PNG imagesのAPIを取得しよう

Compress JPEG & PNG imagesの設定方法

さて続いてはCompress JPEG & PNG imagesの設定方法について解説していきます。

設定手順は大まかに2つのステップに分けられます。

Compress JPEG & PNG imagesの設定方法

  1. APIを取得して反映させる
  2. Compress JPEG & PNG imagesの設定

ここではまずAPIの取得方法について解説していきます。

設定方法1. TinyPNGでAPIを取得

プラグインの設定の前に、まずはCompress JPEG & PNG imagesのアカウントを作成してAPIを取得する必要があります。

まずは「TinyPNG - Developer API」にアクセスしましょう。

ご覧のように「名前」と「メールアドレス」の入力欄がありますので、それぞれ入力したら「Get your API key」をクリックしましょう。

無事会員登録が完了するとTinifyからメールが届き、APIを取得できるダッシュボードリンクを教えてくれます。

メール中央部にある水色のボタン「Visit your dashboard」をクリックして、TinyPNGのダッシュボードページに移動しましょう。

API Dashboardに移動すると「Available API keys」という項目に、複雑な文字が並んだAPIが表示されているはずです。

このAPIはCompress JPEG & PNG imagesの初期設定で使用しますので、コピーして取っておきましょう。

設定方法2. APIを設定画面から反映させる

続いてはWordPress管理画面のCompress JPEG & PNG images設定画面に移動して、取得したAPIキーを反映させます。

Compress JPEG & PNG imagesの設定

WordPress管理画面から「設定」→「Compress JPEG & PNG images」に移動します。

すると「Tinify account」という項目の右側に「Already have an account?」と書かれたAPIキーの入力欄がありますので、先程取得したAPIキーをペーストして、保存ボタンを押しましょう。

ちなみに左側の「Register new account」と書かれた入力欄は新規でTinify accountを作る際の項目ですので、特に触れる必要はありません。

apiの反映

APIキーが無事に反映されたら、こんな風に「Your account is connected」と表示されているはずです。

APIの反映が終わったら続いてはCompress JPEG & PNG imagesの設定に進みましょう!

Compress JPEG & PNG imagesの設定

Compress JPEG & PNG imagesの設定

Compress JPEG & PNG imagesの設定画面は以下の4項目に分かれています。

Compress JPEG & PNG imagesの設定項目

  1. Tinify account
  2. New image uploads
  3. Image sizes
  4. Original image

それでは順番に見ていきましょう。

設定1. Tinify account

apiの反映

先程も触れましたように「Tinify account」はTinifyアカウントとの連携設定の項目です。

アカウントの新規登録やAPIキーの連携の他にも、今月圧縮可能な画像の残り枚数も表示されます。

設定2. New image uploads

2. New image uploads

ここでは新しい画像をどのタイミングで圧縮するかを選択できます。

各項目の意味は以下の通りです。

項目概要
Compress new images in the background (Recommended)バックグラウンドで自動的に圧縮してくれます。
一番推奨されている方法ですが、他の画像関連プラグインと競合する可能性があります。
Compress new images during uploadアップロード中に圧縮してくれます。
アップロード時間が長くなりますが他のプラグインとの互換性が高くなります。
Do not compress new images automatically手動でしか圧縮できないようにします。

他に画像圧縮系のプラグインを入れていなければ、一番上の「Compress new images in the background」で問題ないでしょう。

設定3. Image sizes

3. Image sizes

ここではどの画像を圧縮させるか選択できます。

デフォルトではすべての項目にチェックが入っていますが、最低限として一番上の「Original image」にチェックが入っていれば問題ありません

Original imageとは自分でアップロードする画像のこと

ちなみにOriginal imageより下の部分は、使用しているWordPressテーマによって表示が異なります。
これはWordPressテーマによってレイアウトの設定や種類数が異なるためです。

それぞれ名前やサイズを参考にしながら、圧縮させたい画像にチェックを入れましょう。

不安な方はOriginal imageだけでも十分効果がありますので、一番上だけにチェックを入れておくことをオススメします。

設定4. Original image

4. Original image

Original imageでは画像の最大幅を指定して自動でリサイズさせることも可能です。

「Resize the original image」にチェックを入れると、上限の横幅と高さを指定できるのでお好みのサイズを指定しましょう。

ただリサイズされた画像も枚数制限に1カウントされるので、無料利用を考えている方はチェックを入れないほうが良いかもしれません。

下の3項目の概要は以下の通りです。

項目概要
Preserve creation date and time in the original image画像の作成日時情報を保存しておくことができます。
Preserve copyright information in the original image画像の著作権情報を保存しておくことができます。
Preserve GPS location in the original image (JPEG only)画像の拡張子がJPEGの場合のみ、GPS(位置情報)を保存しておくことができます。

一見便利な設定にも見えますが、こうしたプライバシーに関わる情報はどこで悪用されるか分かりません。

セキュリティ面のことも考えてチェックを入れないでおくのがオススメです。

すべて設定が終わったら画面下部の「変更を保存」ボタンを押して設定を反映させましょう。

これで新しくアップロードする画像はすべて自動で圧縮されることになります。

すでにアップロードされた画像を圧縮する方法

新規でアップロードする画像については設定が完了しましたが、すでにアップロードされている画像を一括で圧縮するにはどうしたら良いのでしょうか?

もちろんCompress JPEG & PNG imagesの機能で圧縮可能です。

まずはWordPress管理画面から「メディア」→「Bulk Optimization」に移動しましょう。

一括圧縮画面へ

すると下画像のように「アップ済み画像枚数」「圧縮可能画像枚数」「圧縮費用」が確認できます。

一括圧縮画面

枚数を確認したら「Start Bulk Optimization」をクリックして、一括圧縮を開始しましょう。

圧縮可能画像数が500枚以上の場合、費用は有料になりますのでご注意ください。

圧縮が完了すると右側のTotal Savigという項目に、圧縮によってどのくらいファイルを削減できたかが確認できます。

圧縮完了画面上画像の場合65枚の画像で21.85MBから19.06MB、つまり13.3%削減できたことが分かります。

まとめ:Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】

まとめ:Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】

まとめ:Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】

  • Compress JPEG & PNG imagesを使うにはAPIが必要
  • Compress JPEG & PNG imagesなら新規画像も既存画像も圧縮できる
  • 無料版では1ヶ月あたり500枚しか圧縮できない

今回は画像を圧縮するWordPressプラグイン「Compress JPEG & PNG images」の設定方法をご紹介しました。

ウェブサイトのユーザービリティを意識するにあたって欠かせないのがサイトの表示速度です。

特に画像ファイルはウェブサイト読み込みの中でもかなりの容量を占めています。

今回紹介したCompress JPEG & PNG imagesを使って、よりユーザービリティの優れた良いサイトを作っていきましょう!

>> Compress JPEG & PNG images公式ページ

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。
今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきますので応援よろしくお願いします!

ウェブサイトの表示速度を改善するならこちらの記事もオススメです。合わせてお読みください。

オフスクリーン画像の遅延読み込みの改善方法【PageSpeed Insights】
オフスクリーン画像の遅延読み込みの改善方法【PageSpeed Insights】

PageSpeed Insightsのオフスクリーン画像の遅延読み込みってなに? オフスクリーン画像の遅延読み込みの改善方法を知りたい! そんな方に向けて、今回は「オフスクリーン画像の遅延読み込み」の ...

更新日:2022年11月28日

画像をリサイズする簡単な方法をご紹介
画像をリサイズするシンプルな方法を解説

画像ファイルを小さくしたいのでリサイズしたい! 今回はこんな疑問にお答えしていきます! 画像ファイルのサイズが大きいとサイトの読み込みに時間がかかって直帰率が上がってしまい、読まれるはずの記事も読まれ ...

更新日:2023年12月16日

TinyPNGの使い方【画像を超圧縮できる無料サービス】
TinyPNGの使い方【画像を超圧縮できる無料サービス】

「ウェブサイトに掲載する画像を圧縮したい!」 「画像ファイルが重くてサイトスピードが遅い...」 ウェブサイトの読み込みファイルの中で、画像ファイルはかなりの割合を占めています。 そのため画像ファイル ...

更新日:2022年11月28日

サイトスピードを改善・高速化する7つの方法をご紹介!
サイトスピードを改善・高速化する7つの方法を徹底解説

ウェブサイト運営やSEO対策の関係者の皆さん、サイトスピードの高速化は出来ていますか? サイトスピードはサイトのユーザービリティを大きく左右する重要な項目です。 私はインターン先のウェブ広告会社で、1 ...

更新日:2023年12月16日

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-WordPress

Copyright © wagtechblog All Rights Reserved.