「次世代フォーマットでの画像の配信」の改善

最終更新日:2022年07月14日公開日:2019年11月20日 2019年11月

※2022/07/14 追記
IE が 2022/06/16 を持ってサポート終了したので主要なブラウザはほぼ WebP 対応となった．「WebP がどこまで使えるか」を確認すると分かる．従って，今後は WebP だけで画像を作成してもほぼ問題はないだろう．

最近，勉強会でフォーカスがここに当たっているので，集中して対策方法を考えているところ．

今回は画像のサイズを画質はなるべく落とさずに少しでも小さくしようという話である．

製造業の企業ページでも写真を多用している会社は多いが，画像のサイズにはあまり気を配っていないところも結構ある．

PageSpeed Insights の「改善できる項目」の中の「次世代フォーマットでの画像配信」で
「JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。」
と警告される場合の対策について書く．

なお，今回の記事は wordpress を使っていても使っていなくてもどっちにも効果があります．

現時点で次世代画像フォーマットは WebP でほぼ決まりなので，画像が重くて困っている方は WebP 対応されるとよいでしょう．safari も最新版では WebP に対応しています．(2020/11/13 追記)

1. 次世代フォーマットでの画像の配信について
2. WebP を使うと確かに軽くなる
- 2.1. 次世代画像フォーマットの本命 WebP
- 2.2. Squoosh での WebP 変換で気を付ける点
3. .htaccess の書き方
- 3.1. 背景画像に WebP を使用する場合
4. PageSpeed Insights 対策

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

少しでも画像を軽くするときに画質を下げる努力をしていることも多いかと思うが，WebP を使うと画質を気にせず，ファイルサイズを下げることが大抵の場合において可能になるので，一度試してみると良い．

Squoosh (Google の WebP 変換サイト) で画像フォーマットの変換が出来る．
このサイトは WebP 以外にも JPG や PNG にも変換可能．

注意点としては「次世代フォーマットでの画像」に全てのブラウザが対応していないこと．

HTML を変更する場合

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.png">
</picture>

のように picture タグを使って代替案を示す必要がある．

しかし，画像変換だけでも面倒なところを，HTML のソースまで WebP ファイルのために書き加えていくのはとても手間がかかって大変だ．

そこで，なるべく手間をかけずに「次世代フォーマットでの画像の配信」を出来る方法を紹介する．
つまり，HTML には手を加えず，ウェブサーバーの設定だけで対応する．

WebP を使うと確かに軽くなる

ページスピードインサイトでは以下のように【次世代フォーマットの画像を使え】と勧められる．

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

次世代画像フォーマットの本命 WebP

WebP で「ウェッピー」と呼ぶらしい．
WebP は Google が開発しているオープンな静止画像フォーマットである．

これが次世代画像フォーマットの本命のようだ．

※)以下のページを参考にさせていただきました．ありがとうございます．補足と追加をしています．
【画像軽量化】WebPにそろそろ対応したほうが良さそうなので現時点で最適方法の考察
 .htaccessによるWebPの選択的レスポンスとその問題点と改善案
 vincentorback/WebP-images-with-htaccess

WebP がどこまで使えるか
 JPEG2000, JPEG XR がどこまで使えるか
を見てもらえば分かるように WebP が次世代画像フォーマットの主流になりそうだ．
(JPEG XR は IE のみ．JPEG 2000 は Safari のみ．)

マイクロソフトもアップルも独自仕様を作成したようだが，次世代画像フォーマットに関しては google に軍配が上がりそうな気配が読み取れる．
規格の世界は古くはビデオの VHS vs ベータ戦争のようにシェアを先に奪ったものが勝ち残る．そろそろ対応しておいてもよいのではないか．

Squoosh (Google の WebP 変換サイト) で適当な画像を入れてみるとなかなか圧縮される．

このサイトは試したい画像をドラッグアンドドロップでページに放り込めば簡単に確かめられるので，自分のサイトの画像で試してみると良い．

右下の Compress の下にある画像種別には気をつけましょう．
(初期状態では，MozJPEG が選ばれているので，WebP に変更)

また，Photoshop では標準では対応しておらず，プラグインを入れることによって WebP での出力が出来るようだ．

Squoosh での WebP 変換で気を付ける点

画像の面積が小さいものは気を付けた方がよい．左下にオリジナルサイズ，右下にWebP変換サイズが表示されているので，サイズを比較しながら，画質(Quality)を動かす．
真ん中に棒があるが，これの左側がオリジナル，右側が WebP変換後の画像なので，粗さが目立たないかを確認しながら，これも画質を変えていく．

出来たファイルは xxx.webp と名前を変える．
例えば，xxx.jpg だったら，xxx.jpg.webp として同じディレクトリに置いておく．

xxx.gif と xxx.jpg が存在した場合に， xxx.webp だと混じってしまうという単純な理由から．

.htaccess の書き方

~~ただし，今の Edge (18.17763) では Accept リクエストヘッダに image/webp を含まないようなので上記のものをそのまま使うと Edge では webp にならなかった．~~

苦肉の策で .htaccess を以下のように追加した．(要は18以上とやりたかっただけ．バージョン99まではいける．)
(後に追記．2022/4)

.htaccess は apache (ウェブサーバー)の設定ファイル．
サーバー自体の管理者なら，httpd.conf に書けばよい．

.htaccess ファイルは間違うとページが表示されなくなったりするので，慎重に変更しましょう．
もちろん，バックアップは取っておいて，何かあったらすぐに元に戻せる状態にしておく．

(なお，参考にしたページにあったコメントは削除しました．)

# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_USER_AGENT} Trident
  RewriteRule ^(.*)$ - [END]
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{SCRIPT_FILENAME}.webp -f
  RewriteRule (.*).(jpe?g|png|gif)$ $1.$2.webp [T=image/webp]
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>
<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>

(※2022/4/15追記)
Edge で Accept リクエストヘッダに image/webp を含むように仕様変更されたことに気づいたので上記設定から Egde 関連の設定を削除した．

(※2021/1/19追記)
Windows 環境の場合に動作しない部分があったので修正．$1.$2.webp の部分
apache のエラーログでは以下のようなエラーが出たり，

(20023)The given path was above the root path: [client 127.0.0.1:56254] AH00127: Cannot map GET /xxxx.jpg

ブラウザ上では

Forbidden
You don't have permission to access /C:/xxxx.jpg.webp on this server.

のようなエラーが出たので上記の修正を行った．
%{SCRIPT_FILENAME} を使って置き換えるとなぜか，C: の前に / が入ってしまう．

(※2020/2/4追記)
xserver では元々の設定では動作しないようだ．(上の設定にも追加している．)
下のようにIEの時は強制的に変換しないような設定を入れると動作した．
xserver で webp の設定をする際は要注意
xserver は nginx だが，.htaccess が動作するようになっている．
nginxについてを参照．

RewriteCond %{HTTP_USER_AGENT} Trident
RewriteRule ^(.*)$ - [END]

WordPress を使っている場合，WordPress が自動で .htaccess の設定を書き換える箇所があるが，そこが悪さをしているケースがある．
RewriteBase が存在しているが，それをコメントアウトすれば動くケースがある．
ただし，コメントアウトしてしまうと WordPress 自体が動かなくなる恐れがあるので，十分注意してほしい．

#RewriteBase /

RewriteBase は RewriteRule を適用する際にどこのパスをルートにするかを設定するものなので，この RewriteBase で使っている RewriteRule の変換後のパスが絶対パスで指定されていれば，RewriteBase の設定自体が不要となる．
上記の WebP ファイルにリネームするルールでは相対パスで指定しているため，これに引っかかっている可能性がある．

いずれにしても，さくらインターネットの apache では特に問題はなく動作していたので，nginx は微妙に仕様が違う可能性がある．
(RewriteBase の効くスコープの違いか？)

背景画像に WebP を使用する場合

background に使っているイメージは上記の .htaccess の追加だけでは対応できない．
javascript を使う必要がある．しかし，この javascript は 3kb ちょっとなので入れてもそれほど重くならないので，背景画像が重い場合は対応したほうがよい．

Modernizr という javascript ライブラリを使う．
WebP に対応していない IE に対応するようにスクリプトを作成する．

メニューのダウンロードを押して，「WebP」を押して，「BUILD」を押す．
出てきたダイアログで Build の右にある「Download」を押してダウンロードする．
これを modernizr-webp.js などと適当に名前を変更するとよい．

<script src="/js/modernizr-webp.js" type="text/javascript"></script>

あとは背景画像を指定している css をコピーして，.webp をつけると良いです．
一つの設定例です．下の設定が WebP の設定です．

// 元からあった設定
.title {
  background: #ededed url(/images/xxxxxx.jpg) no-repeat left top;
}
// 新しく追加する設定
.webp .title {
  background: #ededed url(/images/xxxxxx.jpg.webp) no-repeat left top;
}

【画像軽量化】WebPにそろそろ対応したほうが良さそうなので現時点で最適方法の考察のページを参考にされると良いと思います．分かりやすいです．

新しもの好きは WebP の軽快さに触れてみましょう．
複数のブラウザでの動作確認を忘れずに．
その際は，必ず各ブラウザでキャッシュを消してから確認しましょう．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．