次世代画像フォーマットWebP(ウェッピー)ってどうなの?

自分のサイトスピードチェックやってますか?
ブログが充足してくると画像が増えたり、コードが増えたりして、
重くなってないか?って心配にすることがあります。

そんな時にチェックしときたいツールがこれです。

Google PageSpeed Insights

Googleが提供しているサービスでたまにチェックすることをお勧めします。

チェックすると、

改善できる項目に次世代フォーマットでの画像配信が
赤字で表示される方が多いのではないでしょうか。

risblog初めて間もないのに、
21って悪すぎません?!
ちょっと改善したいなーー。
サエコさん
サエコさん

この次世代フォーマットって何なの?
読み込みCSSがなんだかとか、コードのことを言われてもよくわからない。
だけど、画像が重いだけなら簡単に直せそうって思いますよね。

今日は、この次世代フォーマットについて解説します。

次世代フォーマットでの画像配信とは

PageSpeed Insightsの「次世代フォーマットでの画像の配信」には、次のように表示されます。

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

PNGやJPEG形式の画像は、古いフォーマットだということですね。
これに変換して、ブログでは画像として使用すると軽くなるというものです。

ではこの3つの画像形式はどのような特徴があるのか。メリット、デメリットを見ていきましょう。

次世代フォーマットの特長、メリット、デメリット

JPEG 2000とは

アップルが開発したやつ。
メリット;高圧縮
デメリット;それを表示させるのにjpgよりパワーが必要、対応ブラウザはsafariだけ。
ChromeやFirefox、Microsoft Edgeは、標準でJPEG 2000に対応していない。

サエコさん
サエコさん
…Chromeを作ってるGoogleがこれをなぜ進めるのかよくわかんないですね。

JPEG XRとは

マイクロソフトが開発したやつ。
メリット;マイクロソフトのブラウザで使える(IE、Edgeなど)
デメリット;それ以外では使えない。

サエコさん
サエコさん
。。これもGoogleのソンタクなのでしょうか。なぜ推奨されているのか、、。

WebPとは

WebP(ウェッピー)、Googleが開発したやつ。
メリット;現時点では、Chromeでしか対応していないが、ゆくゆくは、FireFox,Edgeでも対応予定。
デメリット;今のところChromだけでしか使えない。

結局各社乱立。
どれが市場を制するかなんですね。

サエコさん
サエコさん
そういえば、chrome上でしか表示できない写真ファイルがあるよねーー。
サエコさん
サエコさん
それか。!!

WebPが一番有力なのはわかりました。
でも、Photoshopで変換できないって、、、、、ダメじゃないか。!?

え?プラグインを入れればOK?

 

WebPファイル作成方法は?

・プラグインを利用して書き出す。
・GulpやGruntでコンパイルする
・オンライン上で変換する

のような方法があります。

サエコさん
サエコさん
まだ、むちゃくちゃめんどくさいとこになってるんですね。

WebPをサイトに導入するために

現時点で対応ブラウザが限定されるため、
ユーザーエージェント判定のためのコードを埋め込む必要がある。

サエコさん
サエコさん
追加コードを埋め込むってことですね。
ちょっとまだまだ、次世代画像フォーマットを取り入れるには、早いかもしれません。
ポンタ先生
ポンタ先生
サエコさん
サエコさん
あ、ポンタ先生!
今日はいないのかと思ってました
(;^ω^)

現時点での結論

ネットショッピングすると、大手海外のサイトでこのWebPフォーマットはよく見かけました。でも最近はどこもjpgに戻していることがあります。
farfetch、Nordstromのようなファッションサイトでは、膨大な写真を使いますが、最近はまったくこの次世代フォーマット使っていません。画像自体を低圧縮にするよりも、サーバー環境を整えるですとか、jsですとか別の方法を採用しているようです。

このメガサイトのプロたちがそうなんですから、一般のブログでは、画像形式はjpg、png今までのものを使い、大きくなるようなら、小さく切り取るとか、解像度を下げるとか、そういった対応で良いと思います。

5Gなど通信速度が次世代に移行しつつあるので、画像フォーマットの重さが問題ではないかもしれません。