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

ブログに限らずサイトのスピード・パフォーマンスはPVに直結する要素の一つです。

testmysiteという有名なサイトでサイトの速度を簡単に計測ができます。

参考 testmysitehttps://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/

ここでサイトスピードを計測すると必ずといっていいほど下のアドバイスが出てきます。

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

https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/

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

JPG/PNGなんか辞めて次世代フォーマット使えとのこと

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.

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

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

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

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

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 2000 JPG XR WebP
Chrome × ×
FireFox × ×
safari × ×
Edge ×
IE11 × ×

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

言い換えるなら

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

といったところ。

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

各画像形式のデモ

これがオリジナルの画像(.png)

こちらが今現在広く使われるPNG形式です。

この画像をそれぞれの形式に変換しています。ChromeではWebPが、SafariではJPEG2000が、EDGEやIEではJPG XRが表示されます。

この画像はjpeg2000です
↑これはjpeg2000画像(.jp2)なのでsafariでしか表示されない
この画像はWebPです
↑これはwebp画像(.webp)なのでGoogle系ブラウザでしか表示されない
この画像はJPG_XRです
↑これはjpg xr画像(.jxr)なのでMicroSoft系ブラウザでしか表示されない

参考:当サイト訪問者のブラウザ割合

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

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

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

青がjp2、赤がjxr、黄色がwebpです。webp圧勝

結論:WebP導入しましょう

WebPの導入方法

まず、前提として、

ChromeやFireFoxなど以外のブラウザでは対応していないため、訪問ユーザーの使用ブラウザに合わせて形式を切り替える(=プログレッシブエンハンスメント)

する必要があるので一括で拡張子を変えたりしないようにする必要があります。

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

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

参考 ページ丸ごとWebP変換https://sim.lightfile.net/webp

当サイトの場合はこんな感じ。

軽量化は44%なので半分ほど圧縮される模様。

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

  1. pictureタグを使う
  2. .htaccessを編集する
  3. プラグイン『WebP Express』を導入する
<picture>
  <source srcset="xxx.webp" type="image/webp"><!--ここでwebp表示-->
  <img src="xxx.jpg"><!--webp非対応ブラウザではこちらが表示される-->
</picture>

pictureタグでWebP用のコードと通常のimgタグを囲むという方法です。

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

ただ、こちらの方法だといちいちhtml編集しなければならないのでブログでは面倒臭いですね

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

# 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

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

コメントを残す

メールアドレスが公開されることはありません。