WebPに対応して画像サイズを最適化する方法

2020年5月13日

この記事の要約

Googleが提供する「Squoosh」でWebPへの変換が可能
WebPを実装するなら<picture>を使うか.htaccess側で制御するのが現実的
<picture>をIE11で使うにはpicturefill.jsを使う必要がある

Googleが主導となって開発している画像形式にWebPがあります。

ざっくり説明すると、PNGとJPGのいいとこ取りをしたような画像形式で、透過に対応しつつ圧縮率も高い夢のような画像形式です。

PNG：透過が使えてキレイ
JPG：圧縮率が高い

しかし、Google Chrome・Firefox・Edgeには対応しているものの、SafariやIEではまだ対応されていないのが問題です。
今回はウェブサイト上の画像をWebPに対応する手順についてまとめておきます。

ちなみにWordPressでウェブサイトを作成する場合は、EWWW Image OptimizerというプラグインでWebPに対応した方が手間もかからないのでそちらがオススメです。

Webrandum

「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法

https://webrandum.net/wordpress-webp

WebP(ウェッピー)はGoogleが開発した画像形式で、簡単に説明すると「JPEGのように軽く、PNGのようにアルファチャンネル（透過）に対応した画像」です。JPEGとPNGのいいとこ取りをしたような画像形式なのですが、対応ブラウザがまだまだ少ないのが問題です。また、WordPressではそもそもWebP形式の画像をアップロードできません。というわけで今回は、WordPressプラグインの「EWWW Image Optimizer」を使って、既にアップロードしている画像をWebPに変換して、WebPに対応しているブラウザにのみ表示させる方法をまとめておきます。EWWW ...

WebPの変換方法

公式サイトで変換

Googleが提供する「Squoosh」なら、画像をドラッグアンドドロップするだけでWebPに変換できます。

squoosh.app

Squoosh

https://squoosh.app

Compress and compare images with different codecs, right in your browser

Photoshopで変換

Photoshopはデフォルトだと未対応ですが、WebPに変換してくれるプラグインがあります。

GitHub

fnordware/AdobeWebM

https://github.com/fnordware/AdobeWebM#download

WebM plug-ins for Adobe programs. Contribute to fnordware/AdobeWebM development by creating an account on GitHub.

WebPの実装方法

普通に<img>タグを使って書いても表示されますが、それだと対応していないブラウザだと表示されなくなってしまうので、従来の画像形式と共存させる必要があります。

現時点で対応方法は下記2つのうちどちらかになります。

<picture>を使う
.htaccess側で制御する

<picture>を使う場合

<picture>タグを使って下記のように記述すると、WebPに対応しているブラウザではWebPが表示され、対応していないブラウザでは従来通りの画像が表示されます。

<picture>
  <!-- WebP画像 -->
  <source srcset="sample.webp" type="image/webp">
  <!-- 従来画像 -->
  <img src="sample.jpg">
<picture>

ただし、<picture>はIE11に対応していないため、picturefill.jsを使って使えるようにする必要があります。

picturefill.jsの設定方法

picturefill.jsを設定するためには下記のページからJavaScriptファイルをダウンロードします。

scottjehl.github.io

Picturefill

https://scottjehl.github.io/picturefill/

あとは下記のようにダウンロードしたJavaScriptファイルを読み込めばOKです。

<script src="./assets/js/picturefill.js"></script>

これでIE11でも<picture>タグを使えるようになります。

.htaccess側で制御する場合

下記の記述を.htaccessへ追加すると、WebP対応ブラウザでユーザーがアクセスした場合にWebP画像を表示してくれます。
（このコードはWordPressプラグインのEWWW Image Optimizerと同じコードになります）

<IfModule mod_rewrite.c>
  RewriteEngine On

  # ブラウザから送信されるAcceptリクエストヘッダがimage/webpを含む場合のみ後続のRewriteRuleを適用する
  RewriteCond %{HTTP_ACCEPT} image/webp

  # WebP版のファイルがある場合のみ後続のRewriteRuleを適用する
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # *.jpg、*.pngファイルを*.webpファイルに内部的にルーティングする
  # Content-Typeはimage/webpにして環境変数acceptを1にする
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  # 環境変数acceptが真の(上記RewriteRuleで1が設定された)場合、
  # CDNやキャッシュサーバーがWebPとJpeg/PNGをそれぞれキャッシュできるように
  # VaryレスポンスヘッダにAcceptを追加する
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
  # 拡張子.webpファイルはContent-Typeとしてimage/webpを返す
  AddType image/webp .webp
</IfModule>

あとは、各画像ファイルがある場所に.webpの拡張子の画像も用意すれば、対応しているブラウザではWebPが表示されるようになります。