リクエストごとに、画像(png/gif/jpg)をwebpフォーマットに切り替える

webpをご存知でしょうか。webpは、Googleが開発した新しい画像フォーマットになります。軽量で画質も担保されているフォーマットになっており、今秋、AppleのiOS14からSafariでも正式サポート予定です。Safariでも導入されるとなると、今後活用が進むと思うので、本記事でも紹介していきたいと思います。

webpとは

軽量で画質も担保されているので、今利用しているjpg, png, gifからwebpに変換するだけでもかなりの効果を得ることができます。大きな特徴としては、非可逆圧縮でもアルファチャンネルを扱えることが挙げられます。これまで、gifやpngのように、透過した画像を作ったとしても、webpで書き出すことが可能になります。今秋に、Safariで対応予定になっていますが、サポートブラウザについては、下記をご確認ください。

https://caniuse.com/?search=webp
本日時点では、Safari、IEが未対応です。ただ、Safariは対応される予定のため、実質、IEだけが使えない画像フォーマットになっています。

前提

画像サーバには、大元の画像（gif, png, jpgなど）が格納されており、新しくwebpフォーマットの画像も格納されていることを前提に記載しています、

例）
img/sample.png
img/sample.webp

リクエストごとに、画像(png/gif/jpg)をwebpフォーマットに切り替える

今回は、2つのパターンで確認したいと思います。

パターン1: htaccess で切り分ける

まずは、htaccess で切り分けるケースです。webサーバは、apacheを使っていることを前提に考えてみます。イメージとしては、アクセスがあったタイミングで、webサーバ側で、rewriteするようにします。そのため、下記の流れで処理を進めます。

＋＋＋＋＋＋＋＋＋＋＋＋＋
・ページにアクセス
↓
・htaccessで、下記条件に当てはまっていた場合、画像フォーマットをwebpに差し替え
requestヘッダー情報に、webpが含まれている
＋＋＋＋＋＋＋＋＋＋＋＋＋

.htaccess

<IfModule mod_rewrite.c>
  # Rewriteモジュールを有効にする
  RewriteEngine On

  # Acceptリクエストヘッダが、image/webpを含む場合、RewriteRuleを適用する
  RewriteCond %{HTTP_ACCEPT} image/webp

  # webpフォーマットのファイルがあるか確認する
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # jpg, png, gifファイルを、webpファイルにrewriteする
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

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

上記のように設定することで、画像(png/gif/jpg)をwebpフォーマットに切り替えることができます。これならアプリケーションを触らなくても、対応ができます。簡単ですね。

パターン2: アプリケーションの処理の中で切り分ける

2つ目は、アプリケーションの処理の中で切り分ける方法です。今回は、phpで検証してみます。下記にサンプルコードを記載しました。

<?php
$httpAccept = $_SERVER['HTTP_ACCEPT'];
$imgName = 'sample.png';

if (xxxxxxxxxx) { // 条件が必要な場合、入れてください
    $imgName = str_replace(['.png', '.gif', '.jpg'], '.webp', $imgName);    
}
echo $imgName;
?>

上記のように実装することができます。アプリケーションの中で切り分ける場合、条件を入れることができるので、ここはうまく使いましょう。例えば、サービスで使っているIDやユーザで切り分けたい場合などが想定できます。

まとめ

webpフォーマットは、今後導入が進んでくると思いますので、サービス要件に合った実装を進めていきましょう！