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

2019年11月20日 HTML&CSS

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

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

ページスピードインサイトでは以下のように【次世代フォーマットの画像を使え】と勧められる.
「JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。」

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

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

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

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

ドラッグアンドドロップで簡単に確かめられるので,自分のサイトの画像で試してみると良い.

Squoosh での 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 や nginx のようなアパッチ系のウェブサーバーの設定ファイル.
サーバー自体の管理者なら,httpd.conf に書けばよい.

(なお,コメントは削除しました.)

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

  RewriteCond %{HTTP_ACCEPT} !image/webp
  RewriteCond %{HTTP_USER_AGENT} Edge/(18|19|[2-9][0-9])
  RewriteCond %{SCRIPT_FILENAME}.webp -f
  RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.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>

背景画像について

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にそろそろ対応したほうが良さそうなので現時点で最適方法の考察のページを参考にされると良いと思います.分かりやすいです.

 

Contact

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

 
お問い合わせはお気軽に
ノウハウを書籍化!
Pagetop