悩む人
画像をWebP化する方法を教えてください。
画像をWebP化する方法を教えてください。今まで、JPEGやPNGの画像を使っていましたが、「WebP」にするとサイト高速ができると耳にしました。EWWW Image Optimizerを使えばいいのかな?サイト軽量化とセットで、マルっと教えてください。
こんなお悩みを解決します。
✔︎本記事の内容
- EWWW Image Optimizerの設定方法
- EWWW Image Optimizerで画像をWebP化する方法
この記事を書いている僕は、ブログ歴2年ほど。WordPress制作の案件も受注している僕が解説します。
本記事では、画像圧縮に最適な「EWWW Image Optimizer」の設定方法から画像のWebP化について解説します。
WebP化を行い
サイトを高速化とSEO対策を目指しましょう。
EWWW Image Optimizerの設定方法
画像を劣化さることなく自動圧縮。
さらに、WebP化もデキる万能プラグイン。
EWWW Image Optimizerのインストール方法
手順は、下記のとおり。
- 手順①：管理画面より、新規インストール
- 手順②：各種設定
- 手順③：専用コードをコピー
手順①：管理画面より、新規インストール
EWWW Image Optimizerのインストール手順①
上記のとおり。
WordPress管理画面→プラグイン→「EWWW」と入力すると、ヒットします。
「有効」をクリック。
手順②：各種設定
EWWW Image Optimizerのインストール手順②
- 今は無料モードのままにする：チェック
- メタデータの削除：チェック
- 画像のリサイズ：チェック←UP時、設定サイズに自動リサイズ
- 不足している寸法を追加：チェック←Core Web Vitalsに有効
- 画像の遅延読み込み：チェック←サイト高速化
- 自動スケーリング：チェック
- WebP 変換：チェック←対応ブラウザで、WebPで表示される
上記項目にチェックしましょう。
変更を保存しましょう。
手順③：専用コードをコピー
EWWW Image Optimizerのインストール手順③
「WebPの配信方法」より、コードをマルっとコピーします。こちらは「.htaccess」に記述しまして、画像をWebP化します。
※ 画像右下を見ると、赤い枠で「PNG」となってますが、WebP化すると緑の枠で「WEBP」になるよ。
質問：『画像の遅延読み込み』って、標準機能では?
WordPress5.5より「画像の遅延読み込み」が標準機能となりました。
チェックを入れると、重複するのでは?...と疑問に思うカモです。
しかし、少なくとも僕の環境だと
標準機能の遅延読み込みは動作してなかったです。
はい、はい… EWWW IOの遅延ローダーはネイティブ遅延読み込みと一緒に機能するように構築されていますが、ネイティブ遅延読み込みをサポートしないプラグイン/テーマの問題を防ぐために、デフォルトではネイティブ遅延読み込みが無効になります。引用元：EWWW IO – Lagy Load 日本語訳
つまり、標準の遅延読み込み機能は、EWWW-IOと一緒に機能するよう設計されている。
チェックを入れると、しっかり動作してるので
参考程度にしてもらえばと思います。
EWWW Image Optimizerで画像をWebP化する方法
さて、ここから本題。
画像のWebP化は、サイト高速で必須です。
手順は、下記のとおりです。
- 手順①：サーバーにアクセス
- 手順②：コピーしたコードを「.htaccess」に貼り付ける
- 手順③：画像を一括で「WebP化」する
手順①：サーバーにアクセス
本記事では、エックスサーバーで解説します。
「サーバーパネル」にアクセスしましょう。
WebP化する手順①：サーバーにアクセス
サーバーにアクセスしたら「.htaccess編集」をクリック。
手順②：コピーしたコードを『.htaccess』に貼り付ける
下記は、貼り付けるコードです。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp「.htaccess」の一番上に貼り付けます。
WebP化する手順②：.htaccessに貼り付ける
貼り付けたら、「確認画面へ進む」→「実行する」をクリックし、変更を保存しましょう。
注意点あり
.htaccessの注意点
上記のとおり。
これより下に記述すると、危ない。
記述をミスると、「500エラー」でアクセス不可になりますので、バックアップを取ってると安心です。
※ なお、EWWWの「リライトルールを挿入する」をクリックすると、コードが最下位に挿入されるので、押さないようにしましょう。
WebP化の設定に成功
設定画面に戻ると
緑の枠で「WEBP」となってます。
これにて、下準備は成功です。
手順③：画像を一括で「WebP化」する
ここから、画像を一括でWebP化していきます。
画像がメッチャ軽くなり、SEO対策も加速します。
「管理画面」→「メディア」→「一括最適化」をクリック。
チェックボックスにチェック後
「最適化されてない画像をスキャンする」をクリック。
スキャンする画像が大量にありますが
気にせず、クリックしましょう。
スキャンするのに、30〜60分くらいかかるかと。
終了後、WebP化は完了です。
お疲れ様でした〜
なぜ、スキャンする画像が多いのか?
一つの画像に対して、いろんな画像サイズが含まれてるから。
WordPressは、サイトにアップロードするすべての画像に対して、デフォルトで4〜6のサイズ変更を作成します。テーマまたはインストールした他のプラグインにより、アップロードごとに作成されるサイズが追加される場合があります。したがって、メディアライブラリを見て、画像が1,000枚しかないように思われるかもしれませんが、少なくとも5,000枚ある可能性があります。引用元：なぜ自分のサイトにこんなにたくさん画像があるのですか?
WebP化した画像の確認方法
WebPは完了したワケですが、、、
「ホントに出来たかな?…」と心配かと思います。
というわけで、確認方法もセットで解説します。
- 方法①：メディアライブラリから確認
- 方法②：検証機能から確認
方法①：メディアライブラリから確認
WebP化した画像の確認方法：メディアライブラリ
上記のとおり、「WebP：〇〇KB」となってたら、成功です。
方法②：検証機能から確認
「Command + Shift + C」から検証画面を開きます。
次に「Network」→「Img」を選択。
「Command + R」を押して、確認できます。
WebP化した画像の確認方法：検証機能
ちゃんと「WebP」になってますね。
これから、アップロードする画像について
今後、アップロードする画像は
さっき設定した大きさに自動で圧縮されます。
となると、大幅な時間短縮ですね!
WebP化すると、画像がメッチャ軽くなるので
SEO対策としても、かなり有効かと。
実際に、画像のWebP化は進んでいるので
JPEGやPNGがオワコンになる日が来るカモです。
というわけで、今回は以上。
楽しいウェッピーライフを送りましょう。
WordPressのプラグイン
【厳選】WordPressに必要なプラグインは7個だけ【初心者ブロガー向け】
サイト高速のテクニック&極意
【SEO】WordPressブログを高速化するテク9つ
WordPressブログをグーんと高速化させる極意3つ【紳士になりましょう】
