ブログ/YouTube

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法
本ページにはプロモーションが含まれています。
まさひろくん

WordPressの画像をWebPにしたいけど、画像も大量にあるし、どうしよう。そもそもブラウザは対応しているのかな?方法もわからないし、中々踏み出せない…

こんな疑問を解决します。

実はIEが終わった今、WebPは既にほとんどのブラウザで利用可能であり、もうWebP対応しても問題ありません。

https://caniuse.com/webp

また、今回の「EWWW Image Optimizer」を用いた方法はpicture要素を用いるので、WebPに変換しても、未対応ブラウザでは従来のpngjpgなどで表示されますので安心です。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法
しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

WebPとはそもそも何?

WebPとは、GoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットのことです。

画像の画質を担保したまま軽量化することができ、今後徐々にメインとなるフォーマットになります。

要はjpg,pngの上位互換と考えてもらって差し支えありません。

EWWW Image Optimizerとは?

https://ja.wordpress.org/plugins/ewww-image-optimizer/

今回はWordPress画像のWebP化をEWWW Image Optimizerというプラグインを利用して進めます。

これはWordPressメディアを運営する上で必須のプラグインになるので、この記事をご覧になっている方の大半が入れていると思います。

EWWW Image Optimizerの機能
  • 自動画像最適化
  • 簡単で楽な操作
  • 一括最適化機能
  • Exif情報の削除
  • WebP変換
  • SEO対策

WebP対応すべきなのか、問題を明確化する

メディア運営者

画像をWebP化してどれぐらい恩恵があるんだろ?

こういう疑問があると思います。

自分のサイトをPageSpeed Insightsで診断すると分かりやすいです。

私のサイトでは明確に「次世代フォーマットでの画像の配信」がネックになっていました。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

具体的にネックとなっている部分が可視化されており、WebPにできるとどれぐらいデータ削減できるかが分かります。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法
しょーご

ここからWordPressでWebP化する方法を解説します。

EWWW Image OptimizerのWebP設定方法

WebPの基本設定を行う

まずはEWWW Image Optimizerをインストールしていない人はインストールしておいてください。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

また、「メタデータを削除」がオンになっているのも確認してください。これは最低限度の設定です。

その後、「WebP変換」をオンにします。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

すると以下にコードが出現するので、コピーします。

これを.htaccessに追記します。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

.htaccessでは# BEGIN WordPressの上にコピペします。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

弊ブログおすすめサーバーの「エックスサーバー」や「シン・レンタルサーバー 」の場合を解説します。

まずはサーバーパネルに入って、設定したいサイトドメインを指定し、.htaccess編集をクリック。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

その後、編集できるようになるので、# BEGIN WordPressの上にコピペしましょう。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

その後プラグイン設定ページに戻ります。「Picture WebP Rewrighting」をオンにして、「変更を保存」をクリック。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

その後、「WEBP」に表示が変わっていれば成功です。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

WebPへの手動変換方法

pictureタグが自動挿入されるので、たまに表示崩れが起きることがあるようです。なので、手動で部分的にまずは適用されることをおすすめします。

手動でWebPにする場合は「メディア→一覧表モード→再最適化」をクリック。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

成功すると、WebPという表示に変わっていると思います。

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法

WebPへの自動変換方法

もちろん全自動でWebPにすることも可能です。

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

私の場合、55,155点もありました…

WordPressのWebP対応をEWWW Image Optimizerで自動化する設定方法
しょーご

多分数時間かかると思われるので、一旦ファーストビューや共通パーツのみをWebPにしました。

これでPageSpeed Insightsで次世代フォーマットの指摘は出なくなったので、効果あったと思います。

画像がどんどん増える前に、早めにWebPに対応しよう

改めて自分のおびただしい画像数を見て、もう少し早めにWebP対応すべきだったと反省です。

もしこれをご覧の方でまだ後回しにしようとしている人がいれば、今がベストタイミングであると強く言いたいです。

とりあえずいろんなページ使われていたりサイズ大きめの画像に対しては最低限WebP対応しておくといいかなと!

しょーご

一回設定すれば、今後の投稿画像は自動でWebP対応されるので、早めに動きましょう!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!