testmysiteの『次世代フォーマットの画像(JPEG2000/JPG XR/WebP)』について

8

目次

ブログに限らずサイトのスピード・パフォーマンスは PV に直結する要素の一つです。testmysiteという有名なサイトでサイトの速度を簡単に計測ができます。

ここでサイトスピードを計測するとたいていのサイトでは必ずといっていいほど下のアドバイスが出てきます。頭を抱えた開発者も多いのではないでしょうか。

JPEG 2000、JPEG XR、WebP で画像をエンコードすると、表示時間が短くなり、 モバイルデータの消費量も減少します。他のブラウザ サポート については、代替の PNG 画像または JPEG 画像を配信してください。

あるいは Chrome のデベロッパーツール内の Audits でもいいかもしれません。

lighthouseの結果

Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. 👆 JPG/PNG なんか辞めて次世代フォーマット使えとのこと。

というわけで今回は testmysite や Audits で表示されるアドバイスである『次世代フォーマットで画像を配信する』について良く分からない記述が多いから調べてみました。

思いのほか長い記事になってしまったので結論だけ知りたい方は下にある目次から『結局どうすればいいのか』の箇所まで飛ぶと幸せになります。

各フォーマットの特徴やメリットなど

JPEG 2000(.jp2)について

JPG の後継規格。画像を綺麗に表示する形式として 2001 年頃に登場しました。ただ、MicroSoft が同時期に JPEG XR を開発したこともあって Windows に採用されず、その結果うまく普及されませんでした。

JPEG XR(.jxr)について

JPG の後継規格。前述の通り MicroSoft により開発され、優れた圧縮と広範囲色調が特徴です。

デジカメ界隈で人気なそうな……。

WebP(.webp)について

Google 尊師の開発する形式で、主流の画像形式(jpg/png/gif など)はほぼ全て WebP に置き換え可能。WebP については下記の引用が参考になるかと。

Web 以外にも広く使われている Jpeg に対し、Web での配信に特化して軽量化されたフォーマットという理解がしっくりきます。https://qiita.com/miyanaga/items/1c8d0f8c2f44d8c3b5b5

各フォーマットの対応ブラウザ

-JPEG 2000JPG XRWebP
Chrome××
FireFox××
safari××
Edge×
IE11××

ChromeとFireFoxはWebP推し、 safariはJPEG2000推し、 MicrosoftのブラウザはJPG XR推し、

言い換えるなら

  • Google系はWebP
  • AppleはJPEG2000
  • MicroSoft系はJPG XR

といったところ。当然ですが、対応されていないブラウザでは画像が表示されません。実際に確認してみます。

各画像形式のデモ

こちらはpng形式の画像です

こちらが今現在広く使われるPNG形式です。この画像をそれぞれの形式に変換しています。

こちらはjp2形式の画像です 👈これはjpeg2000画像(.jp2)なのでsafariでしか表示されない

こちらはwebp形式の画像です 👈これはwebp画像(.webp)なのでGoogle系ブラウザでしか表示されない

こちらはjxr形式の画像です 👈これはjpg xr画像(.jxr)なのでMicroSoft系ブラウザでしか表示されない

当サイト訪問者のブラウザ割合(参考資料)

参考になるかは分かりませんが、当ブログの移行前旧サイトへアクセスしてくるユーザーの各ブラウザ比率はこんな感じ。

各ブラウザの使用割合

Chrome圧倒!!!!!!!!

とはいえ、他のブラウザを無視するわけにはいかない模様。

結局どうするのがいいのか

各次世代画像形式の展望

結論:WebP導入しましょう

WebPの導入方法

まず、前提として、ChromeやFireFoxなど以外のブラウザでは対応していないため、訪問ユーザーの使用ブラウザに合わせて形式を切り替える(=プログレッシブエンハンスメント)必要があります。そのためには一括で拡張子を変えたりしないようにしてはいけません。

また、あくまで切り替えであるため、jpg/pngなどと同時にwebp形式も用意しなければなりません。同じ画像を2つの形式で用意する必要があるということです。

また、それなりに面倒な作業ですので、下記サイトでWebP導入でどれくらいの圧縮効果が得られるか見てみましょう。

https://sim.lightfile.net/webp

当サイトの旧バージョンの場合はこんな感じ。

webpを導入したらどれくらいのページスピード向上を期待できるか

WordPressであれば導入方法は以下の3通り。

  1. pictureタグを使う
  2. .htaccessを編集する
  3. プラグイン『WebP Express』を導入する

方法1 pictureタグを使う

記事ページ
<picture>
  <source srcset="xxx.webp" type="image/webp"><!--ここでwebp表示-->
  <img src="xxx.jpg"><!--webp非対応ブラウザではこちらが表示される-->
</picture>

pictureタグでWebP用のコードと通常のimgタグを囲むという方法です。ただ、こちらの方法だといちいちhtml編集しなければならないので記事数の多いブログでは改修も今後の更新も面倒臭いですね。

方法2 .htaccessを編集する

注意

.htaccessファイルはWPにおいて重要なファイルです。ダウンロードしてコピーをローカルのPC内に控えておいたりするなどバックアップしておきましょう。

.htaccess
# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
  # Rewriteモジュールを有効にする
  RewriteEngine On

  # WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例
  # その場合のみ後続のRewriteRuleを適用する
  RewriteCond %{HTTP_ACCEPT} image/webp

  # 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
  RewriteCond %{SCRIPT_FILENAME}.webp -f

  # *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可)
  # Content-Typeはimage/webpにする
  RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=_image_request
</IfModule>

参考: https://blog.ideamans.com/2019/02/webphtaccess.html

方法3 プラグインを使う

【WordPress】プラグイン「WebP Express」でWebP画像へ対応

こちらの記事を参照すると幸せ

  • SNSでシェアしよう
  • Twitterでシェア
  • FaceBookでシェア
  • Lineでシェア
  • 記事タイトルとURLをコピー
トップへ戻るボタン

\ HOME /

トップへ戻る