「次世代フォーマットでの画像の配信」について

使い方高速化

サイトの速度解析ツールであるGoogle提供の「Page Speed」で、ある時から急にモバイルのスコアが下がったので調べてみると分析ツールが「Lignhthouse」に変わったせいのようです。

 

 

と言っても、分析方法や内容まではよくわからないのですが、今までこの「PageSpeed」で解析した当サイトはPCでは１００点（または９０点台）、モバイルでは悪くても８０点台だったのが、最近は４０点台になっています。

 

 

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

そこで今回は、改善できる項目の一番最初に出てくる「次世代フォーマットでの画像の配信」についてですが！

先に結論を書くと

WordPressは、次世代フォーマットに対応しておらず、ワードプレスユーザーは特に、まだ対応する必要はなさそうです。

 

ですが、今後、いずれかのフォーマットに変更していった方がよくなる可能性もあるので、一応フォーマットの特徴やら調べましたので参考までに。

 

次世代フォーマットとは

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

参考：次世代フォーマットで画像を提供する

 

現在のところ３種類のフォーマットが推奨されています。

  • JPEG 2000
  • JPEG XR
  • WebP（ウェッピー）

 

それぞれ、従来のJPEGやPNGフォーマットに比べ、サイズを縮小できますが、各社が独自で開発・推奨するフォーマットになっていて統一されていない為、対応ブラウザがバラバラで、それぞれ表示できないブラウザが存在します。

対応ブラウザが多く、圧縮率も高いのはGoogle開発のWebP。

 

以下、各詳細と対応ブラウザです。

 

WebP（Google）

米Googleが開発しているオープンな静止画フォーマット。

拡張子　　.webp

対応ブラウザ

  • Chrome
  • Edge
  • Firefox
  • Opera

 

オンラインコンバーター

JPEGからWebpへのコンバーター

※Cromeの拡張機能に追加可能

 

 

JPEG 2000（Apple）

JPEG 2000（ジェイペグにせん）は、静止画像圧縮技術及び同技術を用いた画像フォーマットです。単純にJPEGからJPEG 2000に変換するだけでは却ってサイズが大きくなってしまったりするのである程度、劣化させて変換する必要があります。

拡張子　　.jp2

対応ブラウザ　　Safari

 

オンラインコンバーター

JPEGからJP2へのコンバーター

※Cromeの拡張機能に追加可能

 

 

JPEG XR（マイクロソフト）

デジタルカメラやPC上などで画像情報を扱うための標準フォーマットの1つ。

拡張子　　.hdp,.wdp,.jxr

対応ブラウザ　　Edge、IE

 

 

WordPress非対応

WordPressでは現時点で、いずれのフォーマットも対応しておらず、

メディア追加から画像ファイルをアップロードしようとすると「セキュリティ上の理由によりこのファイル形式は許可されていません。」とエラーメッセージが表示されます。

セキュリティ上の理由によりこのファイル形式は許可されていません。 セキュリティ上の理由によりこのファイル形式は許可されていません。

 

もちろん直接サーバーへ手動アップロードし、その画像ファイルを読み込むHTMLも手入力すれば使えますが、

対応されていない中、わざわざFTPツールなどを使ってサーバーへアップロードする手間に加え、未だ統一規格ではない（全ブラウザで表示できない）フォーマットという事なので対応する必要はなさそうです。

 

WebPとJPEG 2000を併用する方法

何度も書いている通り、それぞれのフォーマットは表示できるブラウザが異なり、表示できないブラウザが存在するので、２種類以上の画像を用意し、ブラウザによって表示するファイルを変えるよう設定する必要があります。

HTMLタグに書くか、.htaccessに記述するかの２通りの方法で可能です。

 

方法１：HTML対応

WebP　と　JPEG 2000　を併用する例

PICTUREタグを使って切り分ける。

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

 

方法２：.htaccessに記述

WebP　と　JPEG 　を併用する例

こちらの場合のWebPファイル名には注意

JPEGファイルの名称＋拡張子（.jpg）までをWebPファイルの名称にする

xxx.jpg　→　xxx.jpg.webp

 

.htaccessに記述するコード

とりあえず当サイトはまだ対応しない事にした為、実際に記述しておらず動作確認できていませんので具体的なコードを書くのは避けておきます。

たくさんの記事でコードが公開されていますので、「WebP htaccess」などで検索してみて下さい。

参考：WebP-images-with-htaccess

 

参考にさせて頂いたサイト。以下にも説明とコードがあります。

 

以上です。

使い方高速化

Posted by 綾糸