ブログの表示スピードを改善するWebP変換の方法【画像軽量化】

ブログ運営に慣れてくると、ユーザーの使いやすさを求めて、ブログの表示スピードを改善する必要がでてきます。

表示スピードは「PageSpeed Insights」に確認したいURLを入力するだけで簡単にチェックが可能です。

実際にブログの表示スピードを計測してみると、ほとんどのブログが「次世代フォーマットでの画像の配信」を改善するように警告が出て不安になるでしょう。

でも、ご安心ください！

この記事では、ブログの表示スピードを改善するための「次世代フォーマット」であるWebPについて解説します。

WebP変換をすることで、あなたのブログの表示スピードが上がり、よりユーザーが使いやすいブログ運営ができるようになります。

また、すでにWordPressにアップロードしている画像をWebPへ変換する方法もあわせて紹介するので、ぜひ参考にしてください。

ちなみに、画像フォーマットが従来のままだと、ユーザーがブログから離れていくので、しっかり改善しましょう。

ブログの表示スピードを改善するWebPとは？

ブログの表示スピードを改善するために使用するWebPの基本情報を紹介します。

WebPとはGoogleが開発した画像フォーマット

WebPとは、2010年にGoogleから発表・開発された画像フォーマットです。

これまでインターネットで使われていたJPEGやPNGに置き換わる、次世代フォーマットとして注目されています。

Googleは次世代の画像フォーマットの使用を推奨しているので、これからはWebPを使用しましょう。

WebPとは画像サイズが小さくて軽量

WebPの画像サイズは、他の画像フォーマットと比較すると軽量です。

たとえば、JPEGと比較すると25％〜34%小さくなり、PNGと比較すると28%軽量になります。

画像サイズを小さくすると処理速度が上がります。ブログの表示スピードも早くなります。

ツールやプラグインでWebPへ変換

ブログの表示スピードを改善するWebPへの変換は、ツールやプラグインを使えば簡単です。

具体的には「Syncer」というWebP変換ツールを使うか、WordPressのプラグイン「EWWW Image Optimizer」の設定が必要です。

「Syncer」は画像を1枚ずつ変換する手間がかかりますが、プラグインを使用しないので安心です。

「EWWW Image Optimizer」はプラグインの数が増えるので、若干セキュリティ面が気になりますが、大量の画像を一括でWebPへ変換できるのでかなり便利です。

どちらでWebPへの変換を行うかは、あなたのブログの状況にあわせて選択すると良いでしょう。

ブログ画像のWebP変換で表示スピードを検証

WebPへの変換がどのような効果があるのかを、実際のブログを用いて検証してみました。

WebP変換の検証をしたブログ情報

WebP変換の検証に使用したブログは、以前運営していた「JIJIJIWEB」です。

検証時のブログ情報は上記のとおりです。

運営歴はかなり短いですが、画像が90枚アップロード済みのため、プラグインによるWebP変換を行いました。

WebP変換する前のブログ表示スピード

WebP変換する前のブログ表示スピードの結果です。

使用していた画像はすべて「Tinypng」で圧縮したJPEGを使用していたので、すでに軽量化をしていました。

軽量化をしていても改善点の項目に「次世代フォーマットでの画像の配信」と表示されていたので、WebP変換を行いました。

WebP変換した後のブログ表示スピード

WebP変換後のブログ表示スピードです。

プラグイン「EWWW Image Optimizer」で一括でWebP変換をしました。

PC版もスマホ版も表示スピードが3上がっており、画像フォーマットに関する改善点がクリアできたことがわかります。

ちなみに「JIJIJIWEB」はすでに圧縮をしていたので3しか改善していませんが、圧縮をしていないブログだともっとスピードが改善します。

個別でWebP変換した後の表示スピード

ブログ内の画像を「Syncer」で1枚ずつWebP変換した後の表示スピードです。

プラグインでの一括変換と比べると、表示スピードは少しだけ下がったようですが、画像関連の改善点が見当たりません。

つまり、WebP変換ツールとプラグインで表示スピードは同等だけど、ブログの運営上はWebP変換ツールを使った方がいいです。

とはいえ1枚ずつ変換するのはかなりの手間なので、時間をかけられない人はプラグインで一括で変換しましょう。

EWWW Image Optimizer のWebP変換方法

WordPressのプラグイン「EWWW Image Optimizer」を使ったWebP変換方法を紹介します。

プラグインでのWebP変換方法① プラグインの有効化

WordPressで「EWWW Image Optimizer」のプラグインをインストールして有効化します。

プラグインでのWebP変換方法② 詳細設定をする

「基本」タブの左上に表示されている「Enable Ludicrous Mode」を選択すると、詳細設定画面に切り替わります。

画像の不要な情報（位置情報など）を削除するために「メタデータの削除」にチェックを入れてください。

プラグインでのWebP変換方法③ WebP変換の設定をする

すでに開いている詳細設定画面の「WebP 変換」の項目にチェックを入れてください。

すると「WebPの配信方法」というコードが表示されるので、すべてコピーします。

プラグインでのWebP変換方法④ コードを貼り付ける

レンタルサーバーの「.htaccess」に、コピーしたコードを貼り付けます。

今回は利用しているConoHa WINGだと、画像のように

「サイト設定」＞「応用設定」＞「.htaccess設定」と進んで、コードを貼り付けてください。

他社のレンタルサーバーだと画面の進み方は異なりますが、「.htaccess」にコードを貼り付けるのは同じです。

プラグインでのWebP変換方法⑤ WebPの検証を確認する

レンタルサーバーにコードを貼り付けたら、「EWWW Image Optimizer」の設定状況を確認してください。

すると、先ほどまでは「PNG」と表示されていた箇所が「WEBP」に変換されています。

プラグインでのWebP変換方法⑥ WebPに一括変換する

WordPressのダッシュボードで「メディア」＞「一括最適化」を選択して、画像をスキャンしたら、一括最適化を行ってください。

読み込みと変換に少し時間がかかりますが、アップロードされている画像を一括でWebPに変換できます。

これでWebPへの変換は完了です。

WebP変換ツールの使い方【写真付き】

WebP変換ツールである「Syncer」の使い方を解説します。

Syncerの使い方① 「Syncer」にアクセス

WebP変換ツール「Syncer」にアクセスします。

無料で利用できるので安心です。

Syncerの使い方② 変換したい画像のアップロード

画面の左側にWebPへ変換したい画像をドラッグ&ドロップ（画像をスライドさせて載せる）します。

すると、右側にWebP変換された画像が表示されます。

画面上部にはどれくらい軽量化ができたのかを数値で表示されるので確認してください。

Syncerの使い方③ 変換された画像のダウンロード

右側に表示されたWebP画像をクリックするとダウンロードが始まります。

ダウンロードが完了したら、画像の拡張子がWebPになっていることを確認してください。

WebPに変換されていることが確認できたら、変換の手続きは完了です。

ブログの表示スピード改善にはWebP変換をしよう

この記事では、ブログの表示スピードを改善するために必要な、画像のWebP変換の方法を紹介しました。

WebPとはGoogleが推奨している画像フォーマットなので、今後はますます重要度が増します。

画像を大量にアップロードしているならプラグイン「EWWW Image Optimizer」で一括変換ができますが、改善点が出るので、可能であれば変換ツールを使いましょう。

とはいえ、どちらで変換してもブログの表示スピードそのものは変わらないので、無理に変換ツールを使う必要はありません。

ブログを運営していくうえで表示スピードは重要なので、なるべく早いうちからWebP画像を使うようにしてくださいね。