> 時を生みだすテーマSWELLを徹底レビュー!口コミ評判・比較付き

EWWW Image Optimizer でWebP変換!【設定・使い方】

EWWW Image Optimizer WebP変換

EWWW Image Optimizerの設定方法と使い方【次世代フォーマットWebP変換方法も】を解説!

  • 画像の圧縮を自動でしてくれる
  • 過去画像の圧縮をまとめて行える
  • 次世代画像フォーマットWebPに変換できる
  • サイトの表示スピードがアップする

こんなことが出来るプラグイン「EWWW Image Optimizer」。

この記事では、EWWW Image Optimizerの設定から使い方までまるっと紹介していきます。

それでは、どうぞっ!

稼ぎたい方向けのブログサービスはWordPress一択。開設方法についてはWordPressブログの開設手順をやさしく解説の記事からご覧ください。

見たいところに飛べる目次

【次世代フォーマット対応】EWWW Image Optimizer とは

EWWW Image Optimizer設定方法・使い方

EWWW Image Optimizer とは、ワードプレスに画像をアップロードしたときに自動で画像サイズを圧縮してくれるプラグインです。

画像サイズというのは、画像の見た目の大きさではなく、ファイルサイズ(キロバイト「KB」、メガバイト「MB」など)のこと。

画像サイズが大きいと読み込みが遅くなって、ユーザーの離脱率や直帰率が上がるので注意です。

また、EWWW Image Optimizerは画像をアップロードするときに自動でサイズを圧縮してくれるだけでなく、すでにアップしている画像も一括で圧縮することができるという優れもの。

さらに、EWWW Image Optimizerは次世代画像フォーマット「WebP」に変換できる機能まであります。

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

EWWW Image Optimizerのインストール方法は、下記のとおりにやれば簡単です。

STEP
プラグインの新規追加
EWWW Image Optimizerのプラグインインストール

ワードプレス管理画面より「プラグイン」→「新規追加」をタップします。

STEP
EWWW Image Optimizerのインストール
EWWW Image Optimizer が出たら「今すぐインストール」

検索窓に「EWWW Image Optimizer」と入力し、EWWW Image Optimizer が出たら「今すぐインストール」をタップ。

STEP
プラグイン「EWWW Image Optimizer」の有効化
EWWW Image Optimizer の「有効化」をタップ

EWWW Image Optimizer の「有効化」をタップして、インストール完了。

「有効化」した時点で、画像のアップロード時に自動で圧縮されるようになります。

 EWWW Image Optimizer の設定方法

では、EWWW Image Optimizer の設定方法について解説していきます。

STEP
EWWW Image Optimizer 設定画面へ
EWWW Image Optimizer の設定方法

ワードプレス管理画面より「設定」 → 「EWWW Image Optimizer」をタップ。

STEP
「Enable Ludicrous Mode」をタップして詳細設定へ
EWWW Image Optimizer の詳細設定へ移動

上記のように、「Enable Ludicrous Mode」をタップして、より詳細な設定画面に移動しましょう。

STEP
メタデータを削除
「EWWW Image Optimizer」基本の設定でメタデータ削除にチェック

「メタデータの削除」にチェックを入れると、画像のメタデータ(カメラ機種や位置情報など)を削除してくれます。

そうすると、画像のファイルサイズをさらに小さくすることができるというわけですね。

STEP
画像サイズをリサイズ
「EWWW Image Optimizer」基本の設定で画像をリサイズ

①「基本」タブより、「画像をリサイズ」の幅と高さの上限を設定する。(ここでは、幅800に設定しています。)

幅の設定は好みの幅にしましょう。高さは上限なしの「0」で。

「EWWW Image Optimizer」設定で画像をリサイズ(リサイズタブ)

②「リサイズ」タブより、上記の2か所にチェックを入れる。

③「変更を保存」をタップして、設定完了。

この設定を行うと、新規画像アップロードや過去にアップロードした画像が幅800ピクセル以下にリサイズされ、大幅なサイズ削減が期待できます。

EWWW Image Optimizer の使い方

では、EWWW Image Optimizerの基本的な使い方について解説します。

基本的に、押さえておくべきなのは下記の2点だけ。

  • 新規画像の圧縮
  • 既にアップしてある画像を一括で圧縮

一つずつ解説しますね。

新規画像の圧縮

まず、新規画像をアップロードしたときの圧縮ですが、何もしなくてオッケーです。

何もしなくても、画像をアップロードするたびに自動的に圧縮してくれるようになっているので。

なので、EWWW Image Optimizerをインストールしたあとにアップした画像については、勝手に圧縮されてますので、ご安心を。

既にアップしてある画像を一括で圧縮

EWWW Image Optimizerのインストール後にアップロードした画像は自動で圧縮されますが、インストールする前にアップロードしてあった画像については、手動でまとめて圧縮します。

では、過去の画像をまとめて圧縮する方法を解説していきます。

STEP
「メディア」→「一括最適化」をタップ
「EWWW Image Optimizer」設定で画像を一括最適化
STEP
「最適化されていない画像をスキャンする」をタップ
「EWWW Image Optimizer」最適化されていない画像をスキャン
STEP
「〇点の画像を最適化」をタップ
「EWWW Image Optimizer」画像を最適化
STEP
自動で最適化されて圧縮完了

次世代画像フォーマット「WebP」に変換

「WebP」とは、次世代の画像フォーマットで、PNGやJPGよりもサイズの削減ができるとされています。

WebPは、米Googleが開発しているオープンな静止画像フォーマット。ファイルの拡張子は「webp」。

2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。

Wikipedia

EWWW Image Optimizerは、画像を次世代フォーマット「WebP」に変換することができます。

さらにEWWW Image Optimizerでは、画像を自動的に「WebP」に変換した上で、表示するブラウザの対応状況に合わせて画像形式を出し分けできます。(IEは非対応)

では、「WebP」を利用するための設定について解説します。

STEP
「WebP変換」にチェックを入れる
「EWWW Image Optimizer」「WebP」設定

「基本」タブより「WebP変換」にチェックを入れる。

STEP
「WeaPの配信方法」のコードを全コピー
「EWWW Image Optimizer」「WebP」の配信方法をコピー

上記の枠内のコードを全てコピー。

STEP
コピーしたコードをサーバーの「 .htaccess」に貼り付ける
「EWWW Image Optimizer」「WebP」の配信方法のコードを貼り付け

ステップ2でコピーしたコードを、サーバーにある「.htaccess」の一番上に書き込む。

ほとんどのサーバーでは、管理画面から編集が可能です。(上記はロリポップの画面です)

STEP
WebPルールが正常に検証されましたとなって設定完了
「EWWW Image Optimizer」「WebP」の設定完了

設定が正常に完了すると、上記のように緑色のWEBPマークが出現。

STEP
アップロード済みの画像を「WebP」に変換する
「EWWW Image Optimizer」設定で画像を一括最適化

①「メディア」→「一括最適化」をタップ。

「EWWW Image Optimizer」最適化されていない画像をスキャン

②「最適化されていない画像をスキャンする」をタップ。

「EWWW Image Optimizer」画像を最適化

③「〇点の画像を最適化」をタップ。

④自動的に変換されて、完了。

さらに画像を圧縮する方法

さらに画像を圧縮する方法(tinypng)

もっと圧縮したい!という場合には、Wordpressに画像をアップする前にひと手間加えることをオススメします。

そのひと手間とは、オンライン画像圧縮サイト「tinypng」などで画像を圧縮しておく。というもの。

このひと手間を行うことで、さらに画像サイズを小さくできるのでオススメです。

【WebP変換】EWWW Image Optimizerの設定方法と使い方|まとめ

EWWW Image Optimizer

EWWW Image Optimizerを使えば、自動で新規画像を圧縮でき、過去画像を一括圧縮でき、次世代フォーマット「WebP変換」もできちゃいます。

そして、EWWW Image Optimizerを使えば、サイトの表示スピード向上につなげることができます。

サイトのスピードを改善したい!という方は、必須のプラグインなので、導入をオススメします。

ちなみにですが、僕はこのEWWW Image Optimizerを使うことで、サイト表示スピードが速くなりました!

ただ、実際にはこれだけでなく、他にも色んな対策を行っています。

僕が実際にサイトの表示スピードを上げた方法については、WordPress高速化!表示速度を劇的改善させた方法を完全解説をご覧下さい。

では、またねっ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次