PageSpeed Insightsの「次世代フォーマットでの画像の配信」対策方法

情報通信技術

Google PageSpeed Insightsで自分のブログのスピードを計測したら速度スコアが低くて、「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されませんか?

ブログなどのWebサイトを高速化するには、次世代フォーマットでの画像の配信が効果的です。

この記事では次世代フォーマットでの画像の配信とは何か、その対応方法を解説します。

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

PageSpeed Insightsの「次世代フォーマットでの画像の配信」対策方法

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

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

PNGやJPEG形式の画像をブログで使っていると、もっと画像サイズを小さくできる画像フォーマットを使いましょうというアドバイスです。

次世代フォーマットでの画像

JPEG 2000、JPEG XR、WebPは、古いJPEGやPNGファイルと比較して優れた圧縮および品質特性を持つ画像フォーマットです。 画像をJPEGやPNGではなく、これらの形式でエンコードすると、読み込み速度が向上し、スマホのデータ量が少なくなります。

JPEG 2000

JPEGは静止画圧縮技術を用いた画像フォーマットで、インターネットやデジタルカメラの分野で広く普及しました。

JPEGは圧縮時の処理負荷が少ないように作られましたが、JPEGの規格が策定された1990年台と異なり、現在はコンピュータの処理性能が大幅に向上しています。

JPEG 2000とは、JPEGより画質と圧縮率を向上させるために規格化された次世代画像フォーマットです。

一般的に、同じ画質ならJPEGの半分程度に圧縮できますが、計算処理に100倍かかります。

JPEG 2000のデメリットとして、WebブラウザでJPEG 2000に対応しているのがアップルのSafariだけという問題点があります。ChromeやFirefox、Microsoft Edgeは、標準でJPEG 2000に対応していません。

Webブラウザを開発している各社は、画像が高速に表示できることを売りにしたいので、処理が重いJPEG 2000に対応したくないという思惑があります。

JPEG XR

JPEG XRとは、JPEG 2000を効率的な変換方式に改善した画像フォーマットで、マイクロソフトが開発しました。

JPEG XRのデメリットとして、WebブラウザでJPEG XRに対応しているのがマイクロソフトのEdgeとIEだけという問題点があります。Chrome、Firefox、Safariは標準でJPEG XRに対応していません。

事実上、JPEG XRはマイクロソフトの独自規格という位置づけになっています。

WebP

WebPとは、Googleが開発した静止画像フォーマットです。非可逆圧縮やアニメーション、透明度などをサポートしています。

次のWebブラウザがWebPに対応しています。

  • Chrome
  • Edge
  • Firefox
  • Opera

1社しかサポートしていないJPEG 2000やJPEG XRと違い、WebPを表示できるWebブラウザは多いです。

WebPのデメリットは、Safariが対応していないことです。アップルは意地でもグーグルの規格を採用したくないのでしょう。

アップルが独自路線をやめてくれれば皆がハッピーになれるですが、アドビのFlashを徹底的に排除したアップルなので楽観視はできません。

次世代フォーマットでの画像の配信をするには

ひとつの次世代フォーマットですべてのWebブラウザに対応することができない以上、次世代フォーマットでの画像の配信をするには、Webブラウザによって画像の出し分けをするしかありません。

Webブラウザによって画像の出し分けをするには、HTMLのpicture要素を使います。

HTMLのpicture要素では、WebブラウザがWebP画像フォーマットに対応していればWebP画像を表示して、WebブラウザがWebP画像フォーマットに対応していなければJPEG 2000画像を表示するようにできます。

具体的には、次のようにします。

<picture>
  <!-- WebPに対応しているブラウザではWebP画像を表示する -->
  <source srcset="/images/image.webp" type="image/webp">
  <!-- WebPに対応していないブラウザではJPEG 2000画像を表示する -->
  <img src="/images/jpeg2000.jpg">
</picture>

WordPressの問題

多くのブログでは、CMS(コンテンツ管理システム)としてWordPressを使っています。

WordPress固有の問題として、メディアを追加するときのファイルを選択する画面でWebPの画像ファイル(拡張子.webp)が候補に表示されません。

ファイル名を直接入力して、WebPをアップロードしようとすると「セキュリティ上の理由によりこのファイル形式は許可されていません。」とエラーメッセージが表示されます。

これはWordPressがWebPに対応してくれるのを待つしかありません。早くWordPressがWebP画像フォーマットに対応してくれることを願います。

スポンサーリンク
スポンサーリンク
情報通信技術
tsukaをフォローする
関連記事
資産運用のすゝめ

コメント