blog ブログの設定方法

【WebPでサイト表示スピードUP】JPGやPNGをWebPに自動変換する方法

この記事ではEWWW Image Optimizerというワードプレスのプラグインを使ってJPG画像やPNG画像をWebP(うぇっぴー)に自動変換する方法を画像10枚でわかりやすく解説します。

作業時間は5分。

画像形式をWebP(うぇっぴー)に切り替えてサイト表示スピードを爆速にしましょう!
WebPはJPGやPNGより軽い画像拡張子です!

サイト表示速度は近年のGoogle評価の軸になっています。できるだけ画像データを軽くすることをお勧めします。(※ちなみにGoogle PageSpeed Insights(ページスピードインサイト)であなたのサイトの表示スピードが確認可能)

では解説していきますね。

【ステップ1】EWWW Image Optimizerで「WebP変換」にチェックを入れる

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】WebP変換にチェックする

まだEWWW Image Optimizerをインストールしていない人はダッシュボートメニューから「プラグイン」→「新規追加」と進んで、EWWW Image Optimizerを検索しインストールしてください。

はい、では解説を続けます。
上図のようにEWWW Image Optimizerを開き「WebP変換」にチェックしましょう。

チェックすると下画の赤枠部分が表示されます。

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】WebPの配信方法にコードが表示される

このコードを.htaccessに追記していきます。

.htaccessはあなたが現在利用しているレンタルサーバーからファイルマネージャーを開けば確認できます。ブログのバックアップデータを毎日取得している人は前日のバックアップデータから.htaccessを引っ張り出してきてもOKです。
ブログの定期バックアップデータの取得方法については別記事で紹介しています。かなり便利なので興味があったら参考にどうぞ。

はい、そしたら下図のように.htaccess内にコードをコピペしましょう。(一番上にコピペするだけでOK)

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】コードを一番上に貼り付ける

コピペしたら.htaccessは下図のようになりますね。
コピペするだけの単純作業ですが、コピペ以外の作業をしないようには注意してください。
【EWWW Image Optimizerで画像をWEBPに自動変換する方法】終わったらFTPでアップロードする

これでOKです。
コピペが終わったら.htaccessを保存してレンタルサーバーのファイルマネージャーにアップロードしましょう。アップロード方法はファイルマネージャーを利用して実行してもOKですし、FTPを利用してアップロードしてもOKです。

.htaccessのアップロードが完了したら下図のように「WWW Image Optimizer側で「変更を保存」をクリックしましょう。

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】PNG表示をWEBP表示に切り替えよう

これで半分以上の作業が終わってますよ。
もう少しなのでサクッと進めましょう。
上図を見てください。青図形で説明していますが、「PNG」となっている箇所を「WEBP」にしていく作業に進んでいきます。

【ステップ2】メディアの「一括最適化」をおこなう

ということで下図のようにワードプレスのダッシュボードから「メディア」→「一括最適化」をクリックしてください。
【EWWW Image Optimizerで画像をWEBPに自動変換する方法】「メディア」→「一括最適化」をクリック

切り替わった画面は下図のようになっているはずです。

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】最適化されていない画像をスキャンする
上図のように赤図形で説明している箇所の「最適化されていない画像をスキャンする」をクリックしましょう。

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】最適化ボタンをクリックしよう

すると上図のように「最適化ボタン」が表示されますのでクリックして下さい。

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】一括最適化の完了を確認しよう

上図のように「一括最適化」の進捗確認画面が表示されるので、「完了」になるまで待ちましょう。「完了」になったらOKです。

【ステップ3】EWWW Image Optimizerで「WEBP」表示になっているか確認する

【EWWW Image Optimizerで画像をWEBPに自動変換する方法】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化を推奨します。

しょうだい
バージョンUPでWebPが対応されたということは各OSでWebPのメリットが認知されたということ。

WebP画像をJPG画像に変換して保存したい!おすすめフリーソフト教えて!

以下2つのフリーソフトがおすすめです。

iLoveIMG
convertio

しょうだい
好きなソフトを利用すればOK!

逆にJPGやPNGをWebPに変換できるおすすめツール教えて!

おすすめはGoogleが開発しているSquooshというWebツールです。Google開発のツールなので安心感があります。ブックマークをお勧めします。

画像の見た目を確認しながら圧縮サイズが調整でき最高なツールですね。WebP以外の拡張子へも変更できるのでチェックしてみて下さい。

Squooshの特徴をまとめると以下の通りです。

Squooshの特徴

●見た目を確認しつつ圧縮サイズ調整できる
●WebP以外の変換フォーマットが豊富
●色彩情報を調整できる
●画像の大きさをリサイズできる
●スマホやタブレットでも利用できる

しょうだい
Squooshはブックマーク推奨だ!

Chome拡張機能でスムーズにWebP画像をJPG画像にできると聞いたけど?

Chomeの「Save image as Type」という拡張機能を利用すればWebPの画像データをすぐにJPGまたはPNGで保存することが可能です。

特にWikipediaがWebP化しているのでWikipediaヘビーユーザーはこの拡張機能の利用はおすすめです。

しょうだい
右クリックで簡単にWebP画像をJPG画像として保存できますよ!

WebPでサイト運用して困ることってある?

画像ダウンロードのサービスサイトを運営していたとすると、WebP拡張子画像だと読者(ユーザー)が画像ダウンロード後にJPGに変換する必要があります。

Web知識のあるユーザーなら自分でChromeを拡張して快適に利用してくれますが、Web知識の少ない人からすると不親切なサイトになってしまいます。「手間がかかるサイトだ」と認識されるとリピーターが継続訪問してくれなくなる可能性もあるので注意しましょう。

しょうだい
この記事はこれにて終了!
お疲れ様でした。
  • この記事を書いた人
  • 最新記事

矢野翔大

WordPressブログが得意なWEBマーケター。今日からここを我の本拠地とする!【経歴】イギリス、オーストラリアで海外生活→株式会社ユニバーサルエンターテインメント→Webマーケ会社→東京から福岡に移住、2児のパパ。

-blog, ブログの設定方法