「次世代フォーマットでの画像の配信」ってどうすればいいの?

Google PageSpeed InsightsでWebサイトのスピードを計測した際「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されることがあります。
そもそも「次世代フォーマットでの画像」とは具体的にどんなものかご存知でしょうか。
この記事では「次世代フォーマットでの画像」の概要と、実際の対応方法をご紹介していきます。

「次世代フォーマットでの画像」とは

現在、Webサイトで使用されている画像はJPG、GIF、PNGなどが一般的です。
しかしGoogle PageSpeed Insightsでは、JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用が、ページの表示速度向上に繋がると推奨されます。
たしかに、Webサイトを見ているときページが早く表示されればイライラしませんし、快適に閲覧できますよね。
では、具体的に「次世代フォーマットでの画像」がどんなものなのかご紹介します。

1)WebP(ウェッピー)

WebPは、Googleが開発している静止画フォーマットです。ファイルの拡張子は「.webp」。JPEGやPNGをそれぞれ30%程度圧縮できるといわれています。アニメーションの表現もでき、PNGのような透過表現にも対応しています。

 

-ブラウザごとの対応状況

WebP(ウェッピー)

※2019年11月19日現在
参照:https://caniuse.com/#search=WebP

上の表の赤色部分が未対応のブラウザ、緑色が対応しているブラウザです。
WebPは、IE、Safariが未対応のため、iPhoneユーザーの多い日本ではWebPを閲覧できるユーザーは35%程度です。閲覧できないブラウザでは、JPGやPNGなど別の画像を表示させる対応が必要となります。

2)JPEG 2000

JPEG 2000は、JPEGの進化版のような位置づけで2000年ごろに公開されました。JPEGよりも高性能で、表現力も高いです。拡張子は「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」。
従来のJPEGでネックとなっていた可逆圧縮ができるようになっています。

 

-ブラウザごとの対応状況

JPEG 2000

※2019年11月19日現在
参照:https://caniuse.com/#search=JPEG%202000

現在のカバー率はおよそ14%、Safariのみ対応しているためWindowsやAndroidのユーザーを想定すると導入は好ましくありません。またその表現力の高さゆえ、画像処理の負担が大きく、画像点数の多いサイトには向きません。
Webp同様、閲覧できないブラウザへの対応が必要になります。

3)JPEG XR

JPEG XRはJPEGに替わる規格として Mircorosftが開発した画像フォーマットです。拡張子は「.hdp」「.wdp」「.jxr」。JPEGと比べてノイズが少なくキレイな画像表現が特徴で、圧縮率が高いです。半透明の表現もでき、可逆圧縮・不可逆圧縮の双方に対応しています。

 

-ブラウザごとの対応状況

JPEG XR

※2019年11月19日現在
参照:https://caniuse.com/#search=JPG%20XR

IE、Edge のみ対応しているため、macやiPhoneのユーザーを想定すると導入は好ましくありません。
導入する場合は、WebpとJPG2000同様、閲覧できないブラウザへの対応が必要になります。

「次世代フォーマットでの画像の配信」への対応策

ここまで各画像フォーマットの概要を説明してきましたが、現時点では対応ブラウザがそれぞれ異なるため JPEG 2000、JPEG XR、WebP などの「次世代フォーマットでの画像の配信」は難しい状況です。
そこで、ページの表示速度を上げるための代替案を2つご紹介します。

代替案1)画像の数を減らす

不必要な画像がないか、Webサイトを見直してみましょう。
例えば文字を画像で表示したり、背景の装飾に大きな画像を使用したりしていないでしょうか。文字はできるだけテキストで表示させたり、過剰な装飾は避けるなど、ダウンロードに時間がかかりそうなコンテンツは画像以外の手段で表現できないか検討してみてください。
そしてユーザー目線に立って、その画像はユーザーにとって必要か、サイト運営側の自己満足で安易に画像化していないかをチェックし、不要なものを選別しましょう。

代替案2)画像のファイルサイズを最適化する

下記のサイトなどで画像を圧縮し、ファイル容量を小さくするとダウンロードにかかる時間を短縮できます。
https://tinypng.com/
https://www.iloveimg.com/ja/compress-image

 

また、JPEG・GIF・PNGなど画像ファイル形式によって得意・不得意な表現があるので、画像の内容によって適切なファイル形式を選ぶことも有効です。

 

  • JPEG:圧縮率が高くフルカラーでの表現ができるため、写真向き。
    画像データを小さくできるが、圧縮のたびに画質が劣化。
  • GIF:色数が256色しかなくデータ容量が小さい。風景写真などは向かないが、単色のイラスト、ロゴ、ボタンなどに適している。透過やアニメーションの表現も可能。
  • PNG:8bitは256色でイラストやロゴ向き。24bitならフルカラー表現やアルファチャンネルにも対応できる。圧縮しても画質は劣化しない。比較的新しい形式のため、古い端末、ブラウザには対応外のものがある。

まとめ

「次世代フォーマットでの画像の配信」を行えば、ページの表示速度を改善することはできるでしょう。
Webp は Safari と iOS 以外の主要なブラウザで対応されているので、今後主流の画像フォーマットの一つになってくる可能性はあります。しかし、現時点では非対応ブラウザへの対応によって、開発側やサイト運営者の負担が大きいなどの理由から現実的な選択肢ではありません。
現時点では「次世代フォーマットでの画像の配信」にこだわらず、ページの表示速度を改善する方法を試してみてはいかがでしょうか。

  • このページを共有する