【挑戦】画像をWebPに変換しよう

当ブログは弱小サーバーを使っていますので画像のサイズには気を付けたいところです。

そこで今回は今までアップロードしてきた画像データをWebPに変換しようというものです。

始めはネイティブで（コードを書き換えて）やろうかとも思いましたけど、プラグイン使ってやったほうがいいかなと思ったので有名なやつを使っていきます。

WebPとは

googleが推奨する次世代画像フォーマットの１つです。

これから標準の画像フォーマットになりますのでワードプレスでの標準対応も時間の問題です。

今はまだ対応していないのでプラグインを使用してWebPに変換します。

これでサイトの読み込み速度の改善を図ります。

EWWW Image Optimizer

有名なプラグインです。

こちらを利用してWebPへの変換をしていきます。

設定記事を書こうかと思いましたが、ブロガーのヒトデさんがものすご～くわかりやすく書いてくださっていますのでリンク貼っておきます（笑）

WebPにする説明はなかったので一応書きますが、基本設定でWebP変換にチェックして

WebP Delivery Methodのリライトルールを挿入してください。

画像はリライトルール挿入後の状態で緑の表示にWEBPとあるので設定が終わっています。

一括最適化

それでは一括最適化をしていきますが、僕は基本的に画像をアップロードする際はjpegやPNGに適宜圧縮していたのでWebPへの変換のみ行っていきます。

一括最適化の設定でWebPのみにチェックします。
最適化されていない画像をスキャンします。

422点もありました。正直びっくりです。
ワードプレスのメディア設定のおかげで3つも4つもデータが存在するから膨れ上がってます。

それでもWebP変換をしたいので最適化を実行します。

待つこと7分少々、すべての画像が最適化されました。

もう感動です。アイキャッチの画像の圧縮具合がハンパないです！

アイキャッチがどうしても200KBを超えてしまっていたのですが、WebPに圧縮したらご覧の通りです！

見た目も全然気にならないです！（WebP品質デフォルトの75）

これからはプラグインを有効にしている限り、メディアアップロード時に自動で元データの圧縮とWebP変換を行ってくれます。

１つ気になるのは、メディア設定画像と元画像と最適化画像とWebP画像がサーバーに存在することになる点かな・・・

まとめ

予想以上にWebPへの変換は強力でした。

ほとんどのブラウザが対応した今、WebPを導入しない選択肢はないでしょう。

再圧縮や圧縮率の調整を行って見た目の確認を行うことを忘れずにしたいですね。