EWWW Image Optimizerで画像をWebP変換ってどうやるのか知りたい
今回は、こんな悩みに答えたいと思います。
本記事の内容
- WebPとは？
- EWWW Image Optimizerの設定方法
- WebPへの変換方法
この記事を書いている人
はやちゃん Twitter：@s_hayachan1357
この記事ではWord Pressのプラグイン「EWWW Image Optimizer」の設定と画像ファイルをWebP（ウエッピー）変換する設定方法を画像つきで解説していきます。
みなさんは、「PageSpeed Insights」でご自身のブログやホームページのスピードを測った時にこのような結果表示が出ませんか？
この「次世代フォーマットでの画像の配信」という項目がWebPでの画像を使ってくださいってことなんです。
サイトスピードはSEO的にも無視は出来なくなってきていますので、この機会に対策しておきましょう。
WebP（ウエッピー）とは？
WebPとは.jpgや.pngと同じ画像ファイルの形式の一種で、Googleによって開発されました。
WebPに変換することによって.jpgや.pngよりファイルの軽量化ができるため、Googleが推奨していましたが最近までMicrosoft Edgeなどのブラウザに対応しておらず、iPadやMacBookでも使えなかったため普及しなかったようです。
2021年現在では主要なほとんどのブラウザに対応しているので、WebP変換できるようにしておきましょう。
それではこのプラグインをまだ使っていない人の為にも、インストールや設定方法から説明していきますね。
EWWW Image Optimizerのインストール・設定方法
それではインストールからしていきましょう。
EWWW Image Optimizerのインストール方法
step
1EWWW Image Optimizerをインストールして有効化
ダッシュボードから「プラグイン」の「新規追加」をクリックし検索窓に「EWWW Image Optimizer」を入力し「今すぐインストール」をクリックして「有効化」をクリックし「有効」の表示が出ればOK
EWWW Image Optimizerの設定
step
2各種の設定をしていきます
ダッシュボードの「設定」から「EWWW Image Optimizer」をクリック
「Speed up your site」と「Stick with free mode for now」にチェック入れて次に進みます。
ちなみに上の2行はサイトスピード重視かストレージ重視かで、下は有料版か無料版の違いになります。
step
3メタデータを削除にチェックを入れておきます
あとから変更は出来ますが、ここでは「メタデータを削除」にチェックが入っていれば問題ないです。
「遅延読み込み」については「a3 Lazy Load」などのプラグインを使っているならチェックを外してもいいです。
画像サイズですが僕は横幅を1000、高さを0に設定しています。横幅を決めておけばそれに合わせた高さになるので0にしておけばいいです。
またポップアップ表示などをさせるのであれば、1200から1500がいいと思います。
ご自身の記事画面の幅や、ポップアップ表示についてはこちらの記事を参考にしてみてください。
【Easy FancyBox】を使って画像を拡大表示させる方法
【Word Press】ブログの画像を適切なサイズに編集する方法
step
4そのまま「Done」をクリックでOK
ここはそのまま「Done」をクリックでOKです。
WebPの変換の設定をする前に1つだけチェックを入れときたいところがあるのでチェックを入れときましょう。
step
5変換リンクを非表示にチェックをいれます
「Enable Ludicrous Mode」をクリックし「変換」タブから「変換リンクを非表示」にクリックすれば完了です。
それでは次にWebP変換できるように設定をしていきましょう。
EWWW Image Optimizerで画像をWebP変換させる設定方法
それではここからは、WebP変換させるための設定に入ります。
設定には2通りあるのですが1つは、ご自身のレンタルサーバーのダッシュボードの「.htaccess」にコードをコピーする必要があります。
この記事では、【ConoHa WING】のサーバー管理画面を例として説明していきます。
設定に移る前に念の為にもバックアップをしておきましょう。
WebP変換方法１：プラグインの中で設定
- プラグインの基本設定から少し下にスクロールすると上の画面になります。
- 「WebP変換」にチェックを入れ一度設定を保存します。
- 画像のようにコードが表示されれば「リライトルールを挿入する」をクリックでOK。
画像のように緑色でWebPの表示に変われば設定完了です。
次に、手動の方法を解説していきます。
WebP変換方法２：手動で設定する方法【ConoHa WING】
step
1コードをコピーします
先ほどと同じようにまずは「WebP変換」にチェックを入れて保存したあとコードをコピーします。
step
2サーバーの「.htaccess設定」にアクセスします。
「サイト管理」から設定したいドメインになっているか確認したら「応用設定」から「.htaccess設定」をクリックします。
step
3コードを貼り付けます
枠の中に貼り付けるだけでOKです。
プラグインに戻って画像のように「WEBP」の表示がでていればOKです。
既存の画像をWebP化する方法
ダッシュボードから「メディア」の「一括最適化」に進み、「再最適化を強制」と「WebPのみ」の両方にチェックを入れ「最適化されていない画像をスキャンする」をクリックして最適化しましょう。
ファイルがWebPになっているか確認しよう
「メディア」の「ライブラリ」からWebPになっているか確認できます。
もし、WebPになっていなかったら一枚づつ「再最適化」をしていくしかないようです。
まとめ：SEOにもWebP化はオススメ
今回はプラグイン「EWWW Image Optimizer」で画像ファイルをWebPかする方法を解説しました。
最初にもお伝えしたように、GoogleがWebPを推奨しているしサイトスピードにも関わっているということは、SEOにも重要な意味を持っていると思われます。
今では、ほとんどの主要ブラウザに対応しているので是非、対策しておきましょう。
今回は以上になります。
