WordPressの画像をWebPにしたいけど、画像も大量にあるし、どうしよう。そもそもブラウザは対応しているのかな？方法もわからないし、中々踏み出せない…
こんな疑問を解决します。
実はIEが終わった今、WebPは既にほとんどのブラウザで利用可能であり、もうWebP対応しても問題ありません。
また、今回の「EWWW Image Optimizer」を用いた方法はpicture要素を用いるので、WebPに変換しても、未対応ブラウザでは従来のpng、jpgなどで表示されますので安心です。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
WebPとはそもそも何？
WebPとは、GoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットのことです。
画像の画質を担保したまま軽量化することができ、今後徐々にメインとなるフォーマットになります。
要はjpg,pngの上位互換と考えてもらって差し支えありません。
EWWW Image Optimizerとは？
今回はWordPress画像のWebP化をEWWW Image Optimizerというプラグインを利用して進めます。
これはWordPressメディアを運営する上で必須のプラグインになるので、この記事をご覧になっている方の大半が入れていると思います。
- 自動画像最適化
- 簡単で楽な操作
- 一括最適化機能
- Exif情報の削除
- WebP変換
- SEO対策
WebP対応すべきなのか、問題を明確化する
画像をWebP化してどれぐらい恩恵があるんだろ？
こういう疑問があると思います。
自分のサイトをPageSpeed Insightsで診断すると分かりやすいです。
私のサイトでは明確に「次世代フォーマットでの画像の配信」がネックになっていました。
具体的にネックとなっている部分が可視化されており、WebPにできるとどれぐらいデータ削減できるかが分かります。
ここからWordPressでWebP化する方法を解説します。
EWWW Image OptimizerのWebP設定方法
WebPの基本設定を行う
まずはEWWW Image Optimizerをインストールしていない人はインストールしておいてください。
また、「メタデータを削除」がオンになっているのも確認してください。これは最低限度の設定です。
その後、「WebP変換」をオンにします。
すると以下にコードが出現するので、コピーします。
これを.htaccessに追記します。
.htaccessでは# BEGIN WordPressの上にコピペします。
弊ブログおすすめサーバーの「エックスサーバー
」や「シン・レンタルサーバー 
」の場合を解説します。
まずはサーバーパネルに入って、設定したいサイトドメインを指定し、.htaccess編集をクリック。
その後、編集できるようになるので、# BEGIN WordPressの上にコピペしましょう。
その後プラグイン設定ページに戻ります。「Picture WebP Rewrighting」をオンにして、「変更を保存」をクリック。
その後、「WEBP」に表示が変わっていれば成功です。
WebPへの手動変換方法
pictureタグが自動挿入されるので、たまに表示崩れが起きることがあるようです。なので、手動で部分的にまずは適用されることをおすすめします。
手動でWebPにする場合は「メディア→一覧表モード→再最適化」をクリック。
成功すると、WebPという表示に変わっていると思います。
WebPへの自動変換方法
もちろん全自動でWebPにすることも可能です。
右側の「再最適化を強制」「WebPのみ」をオンにしてから、「最適化されていない画像をスキャンする」をクリック。
私の場合、55,155点もありました…
多分数時間かかると思われるので、一旦ファーストビューや共通パーツのみをWebPにしました。
これでPageSpeed Insightsで次世代フォーマットの指摘は出なくなったので、効果あったと思います。
画像がどんどん増える前に、早めにWebPに対応しよう
改めて自分のおびただしい画像数を見て、もう少し早めにWebP対応すべきだったと反省です。
もしこれをご覧の方でまだ後回しにしようとしている人がいれば、今がベストタイミングであると強く言いたいです。
とりあえずいろんなページで使われていたり、サイズ大きめの画像に対しては最低限WebP対応しておくといいかなと！
一回設定すれば、今後の投稿画像は自動でWebP対応されるので、早めに動きましょう！
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
