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

最終更新日:2020年10月02日 公開日:2019年11月20日

Page Speed Insights 対策の一環.他の対策は以下を見てください.

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

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

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

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

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

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

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

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

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

HTML を変更する場合

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

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

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

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

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

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

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

WebP で「ウェッピー」と呼ぶらしい.これが次世代画像フォーマットの本命のようだ.

※)以下のページを参考にさせていただきました.ありがとうございます.補足と追加をしています.
【画像軽量化】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まではいける.)

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

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

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

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

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

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 などと適当に名前を変更するとよい.

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

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

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

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop