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

2017年09月05日 (更新: 2018年11月01日) WordPress / プラグイン

Compress JPEG & PNG images プラグインの使い方

Pocket

WordPressにアップロードした画像を圧縮してくれるオススメのプラグインをご紹介します。パンダ画像で有名な TinyPNG のWordPressのプラグインです。

画像によっては50%以上の容量を圧縮してくれて、しかも画質の劣化が見た目でほとんど分からないという優れものです。これはWEBサイトの表示速度を改善するために欠かせないプラグインです。月500枚までは無料で利用できます。

まず初めに「Compress JPEG & PNG images」プラグインをWordPressにインストールします。

[管理画面]>[プラグイン]>[新規追加]を開き、右上のプラグイン検索窓に「Compress JPEG & PNG images」と入力します。

下記のように Compress JPEG & PNG images が表示されたら「今すぐインストール」ボタンをクリックしてください。

Compress JPEG & PNG images インストール

インストールが終了すると「有効化」ボタンが表示されるので、ボタンをクリックしてプラグインを有効化しましょう。これでインストールは完了です。

次はプラグインの設定を行います。[管理画面]>[設定]>[メディア]を開きます。すると次のような設定画面が表示されます。

Compress JPEG & PNG images 設定画面

設定項目が3カ所ありますので、それぞれの項目ごとに設定して行きましょう。

まず最初にTinyPNGのアカウントを作成します。下記の『Register new account』に「名前」と「メールアドレス」を入力して、「Register account」ボタンをクリックします。

Compress JPEG & PNG images > TinyPNG account

すると次のような画面が表示され、登録したメールアドレスにアカウントを有効化するリンクが送信されるので、指示に従いメールを確認してください。

Compress JPEG & PNG images アカウント登録メール

TinyPNGから届いたメールを開き、指示に従ってアカウントを有効化してください。有効化の作業が終わると、下記のようにアカウントが有効化されたことを示すメッセージが表示されます。

Compress JPEG & PNG images アカウント登録完了

これでアカウントの登録は完了です。
ちなみに、他にもアカウントの登録方法がありますので、下記を参考にしてください。

別のアカウント設定方法

TinyPNG accountの設定は、事前に Developer API でアカウントを作成し、取得したAPIキーを『Already have an account?』の入力欄に記入・保存する方法でも設定できます。

ここではファイル圧縮に関する設定を行います。圧縮する項目にすべてチェックを入れてください。

Compress JPEG & PNG images > File compression

一番上の「Original image (overwritten by compressed image)」はフルサイズ画像です。容量が最も大きいため、WEBサイトの表示速度を改善するには、圧縮が必須です。

Largeサイズも通常は容量が大きいので圧縮した方がよいでしょう。その他のサイズについては、必要に応じてチェックを入れてください。

「Medium large – 768x?」という見慣れぬ項目がありますが、これはver4.4で追加された機能で、768pxサイズが自動で生成されます。この画像サイズが不要な場合は、functionsに「update_option( ‘medium_large_size_w’, 0 );」と記載すれば、自動生成を停止できます。

月に500枚まで無料なので、5項目にチェックを入れた場合は、理論値として1ヵ月あたり100個の画像が無料で圧縮できます。利用頻度も考慮して適用する画像サイズを決めましょう。

Compress JPEG & PNG images には、オリジナルサイズの画像を1つ追加する機能があります。利用する場合はチェックを入れて、画像サイズを入力します。

Compress JPEG & PNG images > Original image

便利な機能ですが、もしもプラグインの利用を止めてしまうと作成されなくなるため、個人的にはfunctionsにadd_image_size()を追記して、必要な画像サイズを生成する方がよいと思います。

以上で Compress JPEG & PNG images の設定は完了です。この設定以降は、新規にアップロードされた画像が、自動的に設定通り圧縮されます。

設定が終われば、次はアップロード済みの画像をまとめて圧縮しましょう。
[管理画面]>[メディア]>[Bulk Optimization]を開きます。

Compress JPEG & PNG images 画像をまとめて圧縮

左側に並んでいる数字は「アップロードされた画像数」「圧縮されていない画像数」「見積もり金額(コスト)」です。確認して問題がなければ「Start Bulk Optimization」ボタンをクリックし、すべての画像を一括して圧縮します。

コストが0円を超えている場合には、画像を個別に選択して圧縮する方法も用意されています。

[管理画面]>[メディア]>[ライブラリ]を開き、圧縮する画像のチェックボックスを選択します。次に左上にあるプルダウンで「Compress Images」を選択し、適用ボタンをクリックすれば、任意画像をまとめて圧縮できます。

また、画像を1つずつ個別に圧縮することも可能なので、必要に応じて適切な圧縮方法を選択しましょう。

画像圧縮のプラグインといえば、以前は「EWWW Image Optimizer」が定番でしたが、今回ご紹介した「Compress JPEG & PNG images」の圧縮率の高さは驚きのレベルです。私としては自信を持ってこちらをオススメします。

WEBページの読み込み時間を調べるGoogle提供ツール PageSpeed Insights で、画像圧縮後のパフォーマンスを比べてみると、画像が多いページの数値が改善していることが分かります。

圧縮後の画質もほとんど見た目が変わらないレベルなので、WEBサイトの表示スピードを向上させるツールとしてお勧めのプラグインです。

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

Pocket