WordPressテーマ『十二単』リリース 🎉

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

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

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

📚参考 https://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でもいいかもしれません。

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.

👆 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形式です。

この画像をそれぞれの形式に変換しています。

この画像はjpeg2000です
↑これはjpeg2000画像(.jp2)なのでsafariでしか表示されない

この画像はWebPです
↑これはwebp画像(.webp)なのでGoogle系ブラウザでしか表示されない

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

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

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

Chrome圧倒

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

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

新フォーマットの画像形式トレンド

結論:WebP導入しましょう

WebPの導入方法

まず、前提として、

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

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

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

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

https://sim.lightfile.net/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内に控えておいたりするなどバックアップしておきましょう。

# 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 プラグインを使う

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

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。