WebP（ウェッピー）画像変換「Google開発の軽量フォーマット」

WordPressで画像の読み込みが遅いと、読者はすぐに離脱してしまいます。

WebP（ウェッピー）で画像を変換して軽くし、Wordpressの読み込みスピードをあげましょう。

WebP（ウェッピー）画像変換「Google開発の軽量フォーマット」

WebP（ウェッピー）はGoogleが開発した、次世代の軽量画像フォーマットです。

JPEGやPNGと言った画像フォーマットと比べると、WebP（ウェッピー）は約25％～35％前後くらいの画像容量を減らすことができ、ワードプレスのページ読み込みにかかる時間も減りますので、読者のページ遅延によるブログ離脱が減ります。

WebP（ウェッピー）による画像変換による画質の劣化も少なく、まさに次世代の軽量画像フォーマットと言えます。

WebP（ウェッピー）の設定には「EWWW Image Optimizer」のプラグインが必要ですので、EWWW Image Optimizerのプラグインをインストールしていない方は先にインストールして設定をして下さい。

EWWW Image Optimizerの設定は、下記の「EWWW Image Optimizer 劣化させずに画像圧縮 最新版」のリンクカードで詳しく説明をしています。

「EWWW Image Optimizer」のプラグインをインストールしたくない方は別の方法がありますので、「オンラインWEBで画像サイズを縮小する」の項目まで読み飛ばしてくださいます様、お願いします。

WebP（ウェッピー）の設定は、初心者には面倒な設定がありますので面倒な作業はイヤという方も、「オンラインWEBで画像サイズを縮小する」の項目まで飛ばしていただいて構いません。

WebP（ウェッピー）設定方法

「EWWW Image Optimizer」プラグインの設定画面の、「設定」タブを開きます。

画面下の方に「WebP 変換」という項目がありますので、「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックを入れます。

チェックを入れると、下記のようなコードが表示されます。

画面右下緑枠の部分が、「PNG」と表示されているのを確認してください。

次に、水色枠内のコードをコピーします。

コピーしたら、ご自分の契約されているレンタルサーバーにログインします。
管理人はエックスサーバーですので、エックスサーバーの画面で説明します。

レンタルサーバーの「.htaccess設定」の画面を編集します。
（各レンタルサーバーの社の.htaccess設定への手順です）

エックスサーバーだと、こちらから.htaccessの編集画面に入れます。

.htaccessの編集画面が表示されましたら、一番上に先程コピーしたコードを貼り付けます。

コードをペーストしたら、設定を保存します。

先程のEWWW Image Optimizerの「WebP の配信方法」の右下が「WEBP」と表示されていれば、正しく設定されていますので「設定を保存」をクリックして下さい。

これで、WebP（ウェッピー）の設定は終了です。

WebP（ウェッピー）の設定が終了しましたら、これ以降の画像の読み込みは全て画像のフォーマットは「WebP」となります。

変換率も見ても、かなり画像サイズが小さくなっていることが見てわかります。

以前に取り込まれたメディアライブラリにある画像も全てWebPフォーマットにしたい場合は、「一括操作」の処理が必要となります。
その際は、ダッシュボード→メディア→ライブラリへと進みます。

メディアライブラリの画面が表示されましたら、①赤丸部分をクリック②緑枠を「一括操作」にセット③水色をクリックすると、メディアライブラリに取り込まれている画像が全て「WebP」フォーマットに変換されます。

一度変換された画像は、以前の形式の画像には戻せませんのでご注意下さい。

オンラインWEBで画像サイズを縮小する

WebP（ウェッピー）の設定は、コードや.htaccess編集もよくわからなくて設定するのは怖い、という方には別の方法があります。

WordPress（ワードプレス）に画像を読み込ませる前に、画像を圧縮しておく方法です。

オンライン上で画像を圧縮してくれるサイトは幾つかあるので、ご自分で気に入ったサイトを利用するのがいいでしょう。

サンプルとして、こちらのネコの画像を使用します（画像ファイルは7.04MBです）
参考までに、この状態でメディアライブラリに登録された段階で、WebPによる変換は下記のとおりです。

約94％も縮小されて、7.04MB→89.9KBに変換されています。

①Image Resizer

赤枠内に縮小したい画像をドロップして、緑枠の「縮小する！！」をクリックすると、画像の圧縮が始まります。
先程のネコの画像は圧縮されて、510KBになりました。

縮小されても、パッと見た目の画像の粗さなどはわかりません。

②ILOVEIMG

こちらも縮小したい画像を枠内にドロップするか、ファイルを選択すると圧縮が始まります。

ネコは圧縮されて、2.35MBまで圧縮されました。
コチラの画像も、パッと見は画像の粗さはわからないレベルです。

なお、圧縮サイトを組み合わせて使うことにより、より圧縮した画像サイズまで縮小することが可能です。

下の画像は、①Image Resizerで圧縮した後、②ILOVEIMGで圧縮で縮小したネコです（画像サイズは135KB）

ブログの画像紹介で使用するレベルでは、画像の粗さはまったく気にならないくらいです。

他にもWEB上で画像を圧縮するサイトはたくさんありますので、ご自分の利用方法に合ったサイトを探すのも面白いですね。

WebP（ウェッピー）の設定に抵抗がある方は、Wordpress（ワードプレス）に画像を読み込ます前に、画像の縮小をしておく方法がおススメです。

WebP（ウェッピー）画像変換とオンライン画像圧縮サイトのまとめ

WebP（ウェッピー）はGoogleが開発した、次世代の軽量画像フォーマットです。

WebPで画像圧縮の設定後、サイトスピードの計測を行った結果は数値が5程上昇していました（携帯電話）

もちろん、WebPの設定だけがサイトスピードを上昇させる項目ではありませんが、画像の読み込みが遅くて読者が離脱することはありますので、サイトのスピードを上げることは大事なことです。

ただ、WebP（ウェッピー）には少しコードの設定やレンタルサーバーの.htaccess編集など、間違えれば大変な作業もありますので気軽にお試しください、とは言いにくいことも事実です。

そういう方はワードプレスに画像を取り込む前に、オンライン画像圧縮サイトで前もって画像を縮小しておいて画像を取り込むことをおススメしますので、ご自分に合ったスタイルでワードプレスの画像遅延対策に、取り組んでいただければと思います。