- Advertisement -

EWWW Image Optimizerの設定方法と使い方【Webp対応】

ブログを継続しているとユーザービリティのために、わかりやすく解説するような画像の枚数が増えていきます。画像の枚数が増えていくと、ネットワーク ペイロードのサイズが増加してしまい、速度インデックスの低下を招きます。

ユーザビリティのために画像を増やしたはずが、サイトの表示速度の低下により、ユーザビリティが逆に下がってしまい、離脱率が増加してしまうことになります。

そこで使用する画像の枚数はそのままに、画像のサイズを圧縮する「EWWW Image Optimizer」がおすすめです。

Compress JPEG & PNG imagesとの比較

EWWW Image OptimizerCompress JPEG & PNG images
機能圧縮方式ロスレス・非可逆圧縮(JPEG)
ロスレス・非可逆圧縮(PNG)
ロスレス・非可逆圧縮(JPEG)
ロスレス・非可逆圧縮(PNG)
圧縮場所自サーバ外部サーバ
WebP変換対応非対応
無料プラン制限方法圧縮率の制限圧縮枚数の制限
圧縮率20%40~80%
枚数制限制限なし500枚
有料プラン圧縮率40~80%40~80%
コスト$0.003/枚$0.009/枚(無料含め10,000枚まで)
$0.002/枚(10,000枚を超えた分)

「EWWW Image Optimizer」とTinyPNGが提供する「Compress JPEG & PNG images」がよく比較に出されますが、普通に月20記事程度投稿されるような方の場合は「EWWW Image Optimizer」1択になるかと思います。

なぜなら「Compress JPEG & PNG images」は枚数で圧縮可能な枚数が制限されているため、月20記事×10画像/記事×4サイズ(サムネ、中、大、フル)で800枚となり、オーバーしてしまいます。

リサイズの画像枚数も圧縮枚数にカウントされるため、注意が必要です。圧縮枚数が少ない方は「Compress JPEG & PNG images」の方が無料の場合は圧縮率が高いのでおすすめです。

「EWWW Image Optimizer」のメリットとしては750枚以上使用する場合はコスト的に単価が安価なことと、WebPに対応しており、速度インデックス的に優位な点がポイントかと思います。

EWWW Image Optimizerのインストールと設定方法

ではさっそくEWWW Image Optimizerのインストールと設定方法について説明していきます。

導入前には「BackWPup」等でバックアップを取って不具合が発生した場合に戻せるようにして作業を行うことをおすすめします。(未だそのような事態に陥ったことはないが、おまじないみたいなものです。)

  • 「プラグイン」→「新規追加」から「EWWW Image Optimizer」を検索し、「今すぐインストール」をクリックします。さらに「有効化」も行います。
EWWW Image Optimizer インストール方法
  • 左の管理パネルの「設定」から「EWWW Image Optimizer」をクリックし、設定画面を開く。
  • 無料版の場合は「ベーシック」のタブにて「メタデータの削除」をOnにしてその他は元々の設定通り「ピクセルパーフェクト」と「無圧縮」とする。そして変更を保存する。
    メタデータの削除とピクセルパーフェクトの設定だけでも20%程度の圧縮削減が可能となります。
EWWW Image Optimizer 設定方法(無料版)
  • 有料版の場合は「ベーシック」のタブにて「メタデータの削除」をOnにしてその他は「プレミアム」と「ピクセルパーフェクト」とする。また必要があれば、元画像に戻せるように画像をバックアップするようにさせる。そして変更を保存する。
EWWW Image Optimizer 設定方法(有料版)
  • 「リサイズ」のタブにて「画像のリサイズ」で幅と高さの上限をアイキャッチの上限に設定しましょう。
EWWW Image Optimizer 設定方法4
  • 「変換」のタブにて「コンバージョンリンクの非表示」をOnにします。この設定をしないと、管理者以外のユーザーにも画像を「png->jpg」や「jpg->png」に変換するためのリンクが表示されてしまいます。

    画像フォーマットの変換は画質の劣化を伴う事もあるので、基本的に変換できない状態にします。
EWWW Image Optimizer 設定方法3
  • 「WebP」のタブにて「JPG,PNGからWebP」をOnにします。そして変更を保存します。
  • 設定をすると「WebP」タブのページ下部に.htaccessファイルに追記するためのコードが自動生成されます。
  • 「リライトルールを挿入する」をクリックすると右下の赤い「PNG」表示が緑の「WebP」表示に切り替わります。
EWWW Image Optimizer 設定方法5

※WebPとは
WebPの開発は、Googleが行なっています。 まずは、WikiPediaをみてみましょう。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。
引用:ideaman’s blog

EWWW Image Optimizerのインストールと設定は以上となります。

EWWW Image Optimizerの簡単な使用方法

続いて画像の圧縮方法について説明します。方法としては大きく3つあります。

  1. 画像のアップロード
  2. 一括最適化
  3. 個別再最適化

画像のアップロード

画像のアップロードは「メディア」→「新規追加」でも、投稿画面からの「画像アップロード」でもどちらでも画像の圧縮はされます。

普通に使用して貰えば、EWWW Image Optimizerでの圧縮とWebPの画像変換がされるようになります。

一括最適化

一括最適化は「メディア」→「一括最適化」から「最適化されていない画像をスキャンする」ですべての画像の最適化を行うことが可能です。

通常は最適化済みの画像は最適化されませんが、オプションで「再最適化を強制」したり、WebPの変換のみを行うことが可能です。

EWWW Image Optimizer 設定方法7

個別最適化

個別最適化は「ライブラリ」→「再最適化」にて1枚ずつ最適化を行うことが可能です。非常に重たい画像のみ圧縮設定を変える場合や有料プランで古い画像を一部だけ最適化したい場合に行ったりします。

EWWW Image Optimizer 設定方法6

まとめ

以上でEWWW Image Optimizerのインストール~使い方までの説明は終わりです。ユーザビリティ向上のためには画像のサイズを圧縮することは重要なため、40~80%程度圧縮可能なEWWW Image Optimizerは非常におすすめな選択肢かと思います。

ただサーバの負荷が普段からかかっている方や対象の画像が500枚以下の方はCompress JPEG & PNG imagesの方が選択しとして、優位かもしれませんのでそちらを試してみてもいいかもしれません。

ブログ高速化に関するまとめ記事を作成しましたので、他の高速化方法については以下を参照してしてください。

- Advertisement -
UMilCL
UMilCLhttps://umilcl.com
兼業ブロガー。大手製造業の企画・設計・プロジェクト管理で8年、受配電・電動機・システムの保全部門の課長1年目。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

  1. 初めまして、EWWW Image OptimizerのWebP設定が完了しましたが、ログアウトするとWebPにならなくなります。ログインしていないときはランダムにWebPになっています。殆どWebPにならないため悩んでいます。

    このような時はどうすればよいでしょうか?
    ネットで探しても放置する方にしか出会わず解決方法がわからない状況です。可能であればご相談したいのですが大丈夫でしょうか。いきなりで恐縮な話となりますがよろしくお願い致します。

    • ewwwの初期設定、webpのための.htaccessは完了済みという認識で回答します。
      webpにならない場合は以下のいくつかの可能性があります

      ①webpのランプが緑にならない、画像が記事によってwebpにならない場合は以下の問題が考えられます。

      ブラウザで表示した際に記事毎にwebpやpng,jpgになってる場合はブラウザキャッシュの影響で昔キャッシュされたpng,jpgが表示されている可能性があります。
      Chromeの場合は「メニューボタン>その他のツール>閲覧履歴の消去>キャッシュされた画像とファイル」からキャッシュデータを削除することができます。他のブラウザの場合は該当ブラウザとキャッシュ削除方法等で検索して削除してみてください。
      またIEやiphoneのsafariはwebpに対応していないので、注意してください。

      ②画像によりwebpになっていない。

      プラグインを入れる前の古い画像はwebpに変換されていません。メディアの一括最適化や個別でwebpに変換する必要があります。
      またwebpに変換しても容量が下がらない場合は変換されません。その場合はそのままで良いかと思います。

      他の理由も考えられるので、解決しないようでしたら、ここか問い合わせフォームからでももう少し状況を教えていただければと思います。

  2. UMILCLさん

    お世話になっております。本村です。
    ①ではありません。ブラウザーはクロームになります。またキャッシュは何度も消して確認しています。webpのランプは緑でエックスサーバーの「.htaccess」に書き込み済みです。多くのサイトで書かれていることを実行しています。

    また②の古い画像は全てwebp化できています。一括最適化で2時間くらいPCを稼働させました。よって設定はできていると思います。

    少し内容をまとめてお問い合わせからご連絡させて頂きます。長くなりそうなのでフリーアドレスにカラメールを頂けると助かります。お問い合わせの文字数が関係なければそのまま書き込みます。

    お返事などで費用が発生するようであれば頑張らせて頂きます。1ヶ月近く悩んでます。ウェブサイト非公開でお願いします。。。

  3. それと管理画面にログインした時だけ全てwebpになるので意味がわかりません。chromeとfirefoxどちらでログインしても同じです。

    ①chromeでログインしてfirefoxで確認するとwebpにならない。逆でも同じ
    ②chromeでログインしてchromeで確認するとwebpになっています。

    EWWW Image Optimizerを停止して再稼働させても同じです。すみません。早めにわかったほうが良いかと思い書き込みました。

本村 へ返信する 返事をキャンセル

コメントを入力してください!
ここに名前を入力してください

- Advertisement -

Follow US

1ファンいいね
19フォロワーフォロー
633フォロワーフォロー
3,383フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular