【図解】画像フォーマットWebP(ウェッピー)に対応する手順!WordPressのプラグイン「EWWW Image Optimizer」を使って画像を最適化

WordPressおすすめのプラグイン

ページ速度をチェックできる「PageSpeed Insights」で「次世代フォーマットでの画像の配信」という項目で指摘されたため、サイトの表示速度を改善させるため「WebP(ウェッピー)」に対応してみました。

今回はWordPressのプラグイン「EWWW Image Optimizer」を利用して画像を最適化(WebP対応)していく手順を紹介します。

次世代フォーマットWebP(ウェッピー)とは?

WebP(ウェッピー)はGoogleが開発している画像形式でJPEG画像やPNG画像と比べて容量が20~30%ほど削減できると言われています。

サイトやブログの表示速度を上げたい時に画像の最適化は非常に有効なのでWebPへの対応はやっておくべき。

実際にページ速度をチェックできる「PageSpeed Insights」でチェックをしてみるとWebP未対応のサイトでは以下のように改善できる項目として指摘されます。

webp不合格

■改善できる項目

次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

WebPのデメリットは?

WebPはSafariやIEのブラウザには対応していません。そのため、サイト上の画像の表示をブラウザ別に差し替える必要があります。

ただ、今回は自動で差し替えする所までプラグインでやってしまうので一度設定が済めば面倒なことはありません。

WebPへの変換と設定の手順

WebPの変換はやり方は色々ありますが、今回は「EWWW Image Optimizer」というプラグインで一括変換と自動差し替えの設定をしていきます。

手順的には

  1. EWWW Image Optimizerのインストールと有効化
  2. WebPの設定
  3. .htaccessへの記述
  4. 一括最適化

という流れになります。順番に図解で解説していきます。

1.EWWW Image Optimizerのインストールと有効化

管理画面から「プラグイン」⇒「新規追加」。検索窓にEWWW Image Optimizerと入力して検索し、インストールと有効化。

Ewwwプラグイン

EWWW Image Optimizerの設定はデフォルト(初期状態)のままでも良いのですが、1点だけ変更しておきます。

「設定」⇒「EWWW Image Optimizer」で、ベーシックタブの「メタデータを削除」にチェックを入れて保存しておきます。

Ewwwプラグイン設定1

2.WebPの設定

WebPへの変換手順14

「設定」⇒「EWWW Image Optimizer」をクリック。

WebPへの変換手順2

WebPのタブを選択して一番上の「WebP Conversion」の項目にチェックを入れたら「保存」。

WebPへの変換手順4

一旦保存すると同じページに以下のようなコードが出てくるのでコピー。

WebPへの変換手順7
※「リライトルールを挿入」を押すと自動的にタグが「.htaccess」へ記述されるようになっていますが、エラーが出てしまうので手動で行います。

コピーしたコードは.htaccessというファイルにコピペしていきます。

MEMO

.htaccessの記述を追記することで「WebP」に対応していないブラウザだった場合にアップロードした元画像(jpgやpngなど)を表示することができるようになります。

3.リライトルールを.htaccessに追記

.htaccessファイルへはファイルマネージャーから行けます(ロリポップならロリポップFTP)。

エックスサーバーの場合は

WordPressの入っているドメインのフォルダ。

WebPへの変換手順8

public_htmlをクリック。

WebPへの変換手順9

「.htaccess」のファイルにチェックを入れて「編集」。

WebPへの変換手順10

.htaccessの一番上(先頭)に先程のコードを貼り付けて保存。

WebPへの変換手順11

以上で.htaccessの設定は完了です。

4.一括最適化

WordPress管理画面から「メディア」⇒「一括最適化」をクリック。

WebPへの変換手順1

右側の「再最適化を強制」にチェックを入れてから「最適化されていない画像をスキャンする」をクリック。

WebPへの変換手順12

「○○点の画像を最適化」をクリックしたら最適化がスタートします。

WebPへの変換手順13

完了が出たら一括変換は終了です。

WebPへの変換手順15

再度「設定」⇒「EWWW Image Optimizer」⇒WebPのタブを選択して下の方にスクロールしてWebPマークが表示されていればOKです。

WebPへの変換完了

今後メディアにアップロードされる画像は自動的にWebPに変換されます。

PageSpeed Insightでチェックしてみると「次世代フォーマットでの画像の配信」の項目が合格になってました!

webp合格

以上でWebPへの変換は完了です。

WordPressブログの始め方と使い方まとめ!【初心者向け】
独自ドメインの取得方法、WordPressを始めるためのおすすめのレンタルサーバ...

コメント

タイトルとURLをコピーしました