この記事ではEWWW Image Optimizerというワードプレスのプラグインを使ってJPG画像やPNG画像をWebP(うぇっぴー)に自動変換する方法を画像10枚でわかりやすく解説します。
作業時間は5分。
画像形式をWebP(うぇっぴー)に切り替えてサイト表示スピードを爆速にしましょう!
WebPはJPGやPNGより軽い画像拡張子です!
サイト表示速度は近年のGoogle評価の軸になっています。できるだけ画像データを軽くすることをお勧めします。(※ちなみにGoogle PageSpeed Insights(ページスピードインサイト)であなたのサイトの表示スピードが確認可能)
では解説していきますね。
【ステップ1】EWWW Image Optimizerで「WebP変換」にチェックを入れる
まだEWWW Image Optimizerをインストールしていない人はダッシュボートメニューから「プラグイン」→「新規追加」と進んで、EWWW Image Optimizerを検索しインストールしてください。
はい、では解説を続けます。
上図のようにEWWW Image Optimizerを開き「WebP変換」にチェックしましょう。
チェックすると下画の赤枠部分が表示されます。
このコードを.htaccessに追記していきます。
.htaccessはあなたが現在利用しているレンタルサーバーからファイルマネージャーを開けば確認できます。ブログのバックアップデータを毎日取得している人は前日のバックアップデータから.htaccessを引っ張り出してきてもOKです。
ブログの定期バックアップデータの取得方法については別記事で紹介しています。かなり便利なので興味があったら参考にどうぞ。
はい、そしたら下図のように.htaccess内にコードをコピペしましょう。(一番上にコピペするだけでOK)
コピペしたら.htaccessは下図のようになりますね。
コピペするだけの単純作業ですが、コピペ以外の作業をしないようには注意してください。
これでOKです。
コピペが終わったら.htaccessを保存してレンタルサーバーのファイルマネージャーにアップロードしましょう。アップロード方法はファイルマネージャーを利用して実行してもOKですし、FTPを利用してアップロードしてもOKです。
.htaccessのアップロードが完了したら下図のように「WWW Image Optimizer側で「変更を保存」をクリックしましょう。
これで半分以上の作業が終わってますよ。
もう少しなのでサクッと進めましょう。
上図を見てください。青図形で説明していますが、「PNG」となっている箇所を「WEBP」にしていく作業に進んでいきます。
【ステップ2】メディアの「一括最適化」をおこなう
ということで下図のようにワードプレスのダッシュボードから「メディア」→「一括最適化」をクリックしてください。
切り替わった画面は下図のようになっているはずです。
上図のように赤図形で説明している箇所の「最適化されていない画像をスキャンする」をクリックしましょう。
すると上図のように「最適化ボタン」が表示されますのでクリックして下さい。
上図のように「一括最適化」の進捗確認画面が表示されるので、「完了」になるまで待ちましょう。「完了」になったらOKです。
【ステップ3】EWWW Image Optimizerで「WEBP」表示になっているか確認する
最後にEWWW Image Optimizer側でWEBPと表示されているかを確認しましょう。
上図のように「WEBP」と表示されていれば作業は正しく完了しています。
これで、今後ワードプレスにアップロードする画像はすべてWebPデータとして自動変換され利用することが可能となりました。
WebPデータになったことでサイト表示スピードも上がるのでGoogle評価が高くなりライバルサイトと差をつけられましたね。
【Q&A】WebPの疑問に関する回答まとめ
ワードプレスで記事作成する際にWebP画像を利用したいがおすすめの方法は?
今回紹介した「EWWW Image Optimizerを利用したWebP自動変換」が1番おすすめな方法です。
この方法だとJPG、PNG画像を今まで通りワードプレスのメディアに登録するだけで自動変換されるので手間がかかりません。
さらにユーザー(読者)のネット環境を見て自動変換するかJPG、PNGのまま表示するか判断するのでGoogleが求めるユーザーファーストを実現できます。
他にはWebP expressというプラグインを利用して画像をWebPデータに変換する方法もあるので興味がある人はWebP expressもチェックしてみて下さい。(当サイトはEWWW Image OptimizerでのWebP自動変換をおすすめします。)
WebP画像が表示されない環境ってどんな環境?
Internet ExplorerとSafari(Ver 13まで)はWebP画像が表示されません。
とはいえ現在は新しいバージョンがリリースされWebPが表示できる環境の方が増えました。
特にSafariがWebPに対応したことは大きかったです。これで問題がほぼなくなりました。
つまり、WebPが表示できなかった時代はもう終わったと思ってくれてOKです。
積極的な画像のWebP化を推奨します。
WebP画像をJPG画像に変換して保存したい!おすすめフリーソフト教えて!
以下2つのフリーソフトがおすすめです。
逆にJPGやPNGをWebPに変換できるおすすめツール教えて!
おすすめはGoogleが開発しているSquooshというWebツールです。Google開発のツールなので安心感があります。ブックマークをお勧めします。
画像の見た目を確認しながら圧縮サイズが調整でき最高なツールですね。WebP以外の拡張子へも変更できるのでチェックしてみて下さい。
Squooshの特徴をまとめると以下の通りです。
Chome拡張機能でスムーズにWebP画像をJPG画像にできると聞いたけど?
Chomeの「Save image as Type」という拡張機能を利用すればWebPの画像データをすぐにJPGまたはPNGで保存することが可能です。
特にWikipediaがWebP化しているのでWikipediaヘビーユーザーはこの拡張機能の利用はおすすめです。
WebPでサイト運用して困ることってある?
画像ダウンロードのサービスサイトを運営していたとすると、WebP拡張子画像だと読者(ユーザー)が画像ダウンロード後にJPGに変換する必要があります。
Web知識のあるユーザーなら自分でChromeを拡張して快適に利用してくれますが、Web知識の少ない人からすると不親切なサイトになってしまいます。「手間がかかるサイトだ」と認識されるとリピーターが継続訪問してくれなくなる可能性もあるので注意しましょう。
お疲れ様でした。