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

どうも。葉です。

ブログの運営では、画像を有効的に活用することで見栄えやわかりやすさがぐっと増しますよね。

ただ、ブログに画像をたくさん貼ると、表示速度が遅くなるという問題が発生します。

今は、サーバーの性能が良くなってきたため高画質の画像でも素早く表示されるようになりましたが、それでも可能な限りの対策はしておくべきです。

そこで、この記事では、画質の劣化を抑えて画像の自動圧縮し、ブログ表示速度の向上を手助けしてくれるWordPressプラグイン「EWWW Image Optimizer」のインストール~使い方までを丁寧に解説していきます。

「EWWW Image Optimizer」でできること

WordPressプラグイン「EWWW Image Optimizer」の主な機能は、次の3つです。

  • 投稿する記事内の画像を自動圧縮してくれる
  • 過去に投稿した記事内の画像を1クリックですべて一括圧縮してくれる
  • テンプレート内の画像を一括で圧縮してくれる

「EWWW Image Optimizer」の素晴らしいところは、一度設定さえしてしまえばあとはほったらかしでいいことです。

ブログを書く上で記事作成時間を短縮できるので、面倒な作業に時間を取られません。

WordPressをインストールしたら必ず入れておきたい必須プラグインの一つなので是非で導入していってくださいね。

「EWWW Image Optimizer」のインストール手順

では、ここからは実際に「EWWW Image Optimizer Cloud」のインストール手順を紹介していきます。

まず、WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

EWWW Image Optimizerのインストール手順1

WordPressのプラグイン検索窓に「EWWW Image Optimizer」を入力し、キーボードのエンターボタンを押します。

EWWW Image Optimizerのインストール手順2

「EWWW Image Optimizer」の今すぐインストールをクリックします。

EWWW Image Optimizerのインストール手順3

「プラグインを有効化」をクリックします。

EWWW Image Optimizerのインストール手順4

「EWWW Image Optimizer」が有効化されていることを確認したら、インストール作業は完了です。

EWWW Image Optimizerのインストール手順5

「EWWW Image Optimizer」の設定

「EWWW Image Optimizer」の設定方法を紹介していきます。といっても、ほとんどいじるところはないので、身構えずに読み進めてください。あっという間に設定が完了するはずです。

まず、WordPress管理画面の左メニューより「設定→EWWW Image Optimizer」をクリックします。

EWWW Image Optimizerの設定1

Basic Settings

Basic Settingsでは、「Remove metadata」にチェックを入れましょう。

EWWW Image Optimizerの設定2

「Remove metadata」にチェックを入れることで画像ファイルに入っている「いつ取得した画像なのか?画像の所有者は誰なのか?」といったウェブ上で不要な情報を除去してくれます。

これは、画像データを小さくするという効果と、プライバシーを守るといった点で有効です。

また、他の項目の解説もしておきます。

  • Cloud optimization API Key
    有料サービスを使用する場合に必要となります。
  • Debugging
    不具合情報をサポートに提供します。
  • JPG/PNG/GIF/PDF Optimization Level
    画像形式の圧縮の程度を設定します。デフォルトのままでの問題ありません。
  • Bulk Delay
    複数枚の画像を圧縮する際に、1枚の画像を圧縮後、次の画像を圧縮するまでの時間を設定します。0のままで問題ありません。

Advanced Settings

次に、Advanced Settingsについてです。ただ、実際のところ、ここでは、特に変更の必要はありません。

  • optipng optimization levelが「Level 2:trials」になっていること
  • disable pngoutにチェックが入っていること

の2点を確認し、次に進んでください。

EWWW Image Optimizerの設定3

EWWW Image Optimizerの設定4

pngout optimization levelの設定はしなくてもいいの?と気になった方もいると思いますが、disable pngoutにチェックを入れることで、pngoutが使えなくなるので特に気にする必要はありません。

補足:OptiPNGとPNGOUTについて

「EWWW Image Optimizer」で使用しているOptiPNGとPNGOUTは、どちらも画像を圧縮するためのツールです。どちらを使っても良いのですが、今回は、デフォルトで設定されているOptiPNGのみを使う設定にしてあります。

ちなみに、OptiPNGとPNGOUTはどちらもGoogleが紹介しているので安心して使うことができます。

PNG では OptiPNG または PNGOUT をおすすめします。

参照:画像を最適化する  |  PageSpeed Insights  |  Google Developers

Conversion Settings

次に、Conversion Settingsです。ここも、特に変更の必要はありません。

  • Hide Conversion Linksにチェックが入っていること

を確認しましょう。

EWWW Image Optimizerの設定5

  • Delete originals
    画像圧縮後にオリジナルの画像を削除する場合にチェックを入れます。
  • JPG/PNG to WebP
    JPGやPNGの画像をWebPに変換する場合にチェックを入れます。WebPとは、Googleが開発している静止画フォーマットです。
  • Alternative WebP Rewriting
  • enable JPG to PNG conversion
    JPG画像をPNG画像に変換する場合にチェックを入れます。
  • enable PNG to JPG conversion
    PNG画像をJPG画像に変換する場合にチェックを入れます。
  • enable GIF to PNG conversion
    GIF画像をPNG画像に変換する場合にチェックを入れます。

最後に「Save Changes」をクリックしたら「EWWW Image Optimizer」の設定は完了です。

    「EWWW Image Optimizer」の使い方

    次に、「EWWW Image Optimizer」の使い方を紹介していきます。

    この記事の冒頭でも紹介しましたが、「EWWW Image Optimizer」の使い方は主に以下の3つです。それぞれの使い方を紹介していきます。

    • 投稿する記事内の画像を自動圧縮してくれる
    • 過去に投稿した記事内の画像を1クリックですべて一括圧縮してくれる
    • テンプレート内の画像を一括で圧縮してくれる

    今後、投稿する記事内の画像を自動圧縮する方法

    今後、投稿する画像を圧縮する場合は特に設定は必要ありません。「EWWW Image Optimizer」をインストールしただけで自動的に使うことができます。なので、画像のことは気にせずがんがん記事を量産しちゃってください。

    なお、画像の圧縮率を確認したい場合は、「メディア→ライブラリ」をクリックします。

    EWWW Image Optimizerの使い方1-1

    すると次のような画面になります。(画像が一覧で表示される人は、左上にある横棒に見えるボタンをクリックしてください。)

    そこで、画像ごとに、圧縮率と圧縮サイズを確認できます。

    EWWW Image Optimizerの使い方1-2

    過去に投稿した記事内の画像を1クリックですべて一括圧縮する方法

    WordPress管理画面の左メニューより「メディア→Bulk Optimize」をクリックします。

    EWWW Image Optimizerの使い方2-1

    Sptimize Media Libraryのところにある「Start optimizing」をクリックします。

    EWWW Image Optimizerの使い方2-2

    すると、次のように画像の圧縮が始まります。
    ※途中で画像圧縮を中止したければ「Stop Optimizing」をクリックしてください。

    EWWW Image Optimizerの使い方2-3

    全部の画像が圧縮し終わるまで待てばオッケーです。

    EWWW Image Optimizerの使い方2-4

    テンプレート(WordPressテーマ)内の画像を一括圧縮する方法

    「EWWW Image Optimizer」では、WordPressのメディアライブラリ内の画像だけでなく、テンプレート(WordPressテーマ)内の画像も圧縮することができます。

    まず、先ほどと同様にWordPress管理画面の左メニューより「メディア→Bulk Optimize」をクリックします。

    EWWW Image Optimizerの使い方3-1

    Optimize Everything Elseのところにある「Scan and optimize」をクリックします。

    EWWW Image Optimizerの使い方3-2

    するとテンプレート内の画像スキャンと圧縮が始まります。
    ※途中で画像圧縮を中止したければ「Stop Optimizing」をクリックしてください。

    EWWW Image Optimizerの使い方3-3

    全部の画像が圧縮し終わるまで待てばオッケーです。

    EWWW Image Optimizerの使い方3-4

    まとめ

    以上で、WordPressプラグイン「EWWW Image Optimizer」の設定と使い方の解説は終わりです。

    「EWWW Image Optimizer」を導入し、画像の表示速度を向上させることで

    • サイト表示速度の向上によるSEOの上昇
    • サイト表示時間により待ち時間が減り、ユーザーの離脱率を下げる

    といった効果が見込めます。

    簡単に導入できるプラグインなのでこの機会に是非導入してください。

     

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

    最新情報をお届けします