PageSpeed Insightsというサイトがあります。

これはGoogleが提供しているサービスで、Webページを解析し、改善点を提案してくれるツールです。

先日ポートフォリオサイトを作ったので試しにやってみたところ、、、

なんと98点という高得点をたたき出しました。

そもそもコンテンツが少ないからというのもありますが、さすがNuxtといったところかもしれません。

で、こうなってくると欲が出てきて100点を目指したくなるもの。ということで改善点を見てみたところこんなメッセージが。

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

簡単にいうと『画像のフォーマットを変えると良いよ！』とのメッセージが。

せっかくなのでこのアドバイスに従ってみようと思います。

...しかし恥ずかしながら『JPEG 2000、JPEG XR、WebP』というのを知らなかったのでまずは調べるところから始めました。

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

もう一度まとめますと、次世代フォーマットでの画像には下記３種類あります。

・JPEG 2000 (.jpf)

静止画像圧縮技術及び同技術を用いた画像フォーマットの呼称である．ISOとITUの共同組織であるJoint Photographic Experts Groupによって，国際標準化が進められており，ISO/IECの規格書15444およびITU-Tの勧告書Rec.T.800シリーズとして出版されている．

・JPG XR (.jxr)

JPEG XR（ジェイペグ エックスアール）とは、デジタルカメラやPC上などで画像情報を扱うための標準フォーマットの1つである。"JPEG"は"Joint Photographic Experts Group"を意味しており、"XR"は"eXtended Range"の略である。2009年6月19日に、「ISO/IECの最終国際規格案（FDIS）投票」を通過し、「国際規格 ISO/IEC 29199-2:2009」として最終承認された。
元となった規格は、2006年に米マイクロソフトが発表したWindows Media Photo（後のHD Photo）。

・WebP (.webp)

WebP（ウェッピー[2]）は、米Googleが開発しているオープンな静止画フォーマット。

どの画像フォーマットを選べば良いか。

結論、現時点ではWebPが良さそうです。

色々なサイトで検証されている結果を見たのですが、次世代フォーマットは対応したブラウザが限られており、WebPがもっとも多くのブラウザに対応しているからです。

※Can I useというサイトでサポート状況が確認できます。

それぞれの対応状況です。

・JPEG 2000 

JPEG 2000はSafariのみ対応しています。

・JPG XR

JPG XRはIE、Edgeが対応しています。

・WebP

WebPはEdge、Firefox、Chrome等一番多く対応しています。ただSafariが対応していません。

ということで今回はWebPを利用して見たいと思います。ちなみにSafariに対応していないので、その辺の対処方法も後ほど記述します。

Jpg画像をWebPに変換する

今回はこちらのサイトを利用し変換しました。

試しに6.3Mのファイルを変換して見たところ、733.6KBになりました。

サイトに反映するには、画像ファイルをアップして、imgタグで書き換えれば対応完了です。

<img src="/img/main.webp">

しかしこちらだとSafariでは表示されません。

次にSafariで見れるように変更します。

ブラウザに応じて画像を変更する方法

ブラウザにより画像を切り替えるため、pictureというタグを利用します。

先ほどのコードを下記のように変更します。

<picture>
    <source srcset="/img/main.webp" type="image/webp">
    <img src="/img/main.jpg">
</picture>  

こうすることで、
・webPに対応しているブラウザは.webpファイルを表示
・webPに対応していないブラウザは.jpgファイルを表示
という風になります。

こちらの対応でSafariでも表示が確認できました。

もう一度PageSpeed Insightsにて測定してみる

ということでWebPに対応したのでもう一度PageSpeed Insightsにて測定してみます。

ドキドキ

また98点。

なんと結果は変わらず。100点取るのは難しいのですね。。。とほほ。

まぁ98点でもすごいじゃん！ということで今回は終了。いつか100点取れるよう調整していきます。。。

まとめ：次世代フォーマット対策は必要か？

まぁまだ急いで対応する必要はないかな、と思っています。Safariにも対応していないですしね。

そのうち本格的に必要になる時がくると思うので、その時まで知識を蓄えておくのが大事かもしれません。