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

URL: https://webrandum.net/webp/
公開日: 2020-05-13
更新日: 2020-05-13
カテゴリー: コーディング
タグ: WebP
出典: Webrandum（著者: サイトウ マサカズ）

## この記事の要約

- Googleが提供する「[Squoosh](https://squoosh.app/)」でWebPへの変換が可能

- WebPを実装するなら`<picture>`を使うか`.htaccess側`で制御するのが現実的

- `<picture>`をIE11で使うには[picturefill.js](https://scottjehl.github.io/picturefill/)を使う必要がある

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

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

- PNG：透過が使えてキレイ

- JPG：圧縮率が高い

しかし、Google Chrome・Firefox・Edgeには対応しているものの、SafariやIEではまだ対応されていないのが問題です。

今回はウェブサイト上の画像をWebPに対応する手順についてまとめておきます。

ちなみにWordPressでウェブサイトを作成する場合は、[EWWW Image Optimizer](https://webrandum.net/wordpress-webp/)というプラグインでWebPに対応した方が手間もかからないのでそちらがオススメです。

[「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法](https://webrandum.net/wordpress-webp)

## WebPの変換方法

### 公式サイトで変換

Googleが提供する「[Squoosh](https://squoosh.app/)」なら、画像をドラッグアンドドロップするだけでWebPに変換できます。

[Squoosh](https://squoosh.app)

### Photoshopで変換

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

[fnordware/AdobeWebM](https://github.com/fnordware/AdobeWebM#download)

## 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ファイルをダウンロードします。

[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](https://webrandum.net/wordpress-webp/)と同じコードになります）

```
<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が表示されるようになります。

## まとめ

まだ対応していないブラウザが多いため、WebPに対応するには今回紹介したような従来の画像形式との振り分け処理が必要になります。

ただ、それでもWebPにするとサイトの表示速度で1番の問題になる画像サイズの問題を大幅に改善できます。