Blare
avatar

ApacheでJPEGやPNGをWebPに変換(へんかん)する

WebPが普及(ふきゅう)して久(ひさ)しいですが、スマホで撮(と)る写真(しゃしん)はJPEG（iPhoneに関(かん)してはHEICとかいうフォーマット）だったり Windowsやmacに付属(ふぞく)の画像編集(がぞうへんしゅう)ソフトではWebPに変換(へんかん)できなかったりと何(なに)かと対応(たいおう)は面倒(めんどう)です。
そこでサーバ側(がわ)で自動変換(じどうへんかん)を、更(さら)にいうとアプリケーションではなくHTTPサーバ（今回(こんかい)はApache）で変換(へんかん)をやりたいというのが趣旨(しゅし)になります。

やりたいことをまとめると以下(いか)の通(とお)りです。

  • .jpg 、 .png にアクセスされたら .jpg.webp 、 .png.webp にそれぞれリダイレクトする。
  • .jpg.webp 、 .png.webp にアクセスされたら元(もと)の画像(がぞう)をWebPに変換(へんかん)してレスポンスを返(かえ)す。

今回(こんかい)用意(ようい)するもの

mod_ext_filter

Apacheモジュールの mod_ext_filter を使用(しよう)することで クライアントに返(かえ)そうとしているレスポンスボディに対(たい)しフィルタをかけることができます。
今回(こんかい)の場合(ばあい)でいうと、レスポンスとして返(かえ)そうとしているJPEGファイルやPNGファイルのバイナリを入力(にゅうりょく)としてWebPに変換(ちかん)するプログラムを実行(じっこう)し、 その出力(しゅつりょく)をレスポンスとして返(かえ)すようなことができます。
Apacheに同梱(どうこん)されているはずなので LoadMoodule すればすぐに使(つか)えるかと思(おも)います。

cwebp

cwebp はWebPの開発元(かいはつもと)であるGoogleが公開(こうかい)している画像変換(がぞうへんかん)ツールです。
たいていのLinuxディストリビューションでパッケージとして提供(ていきょう)されていますが、バージョンが古(ふる)いとうまく変換(へんかん)できなかったりするので なるべく公式(こうしき)サイトから最新版(さいしんばん)をダウンロードしてきたほうが良(よ)いかと思(おも)います。

設定(せってい)ファイルの例(れい)

# モジュールの読み込み
LoadModule ext_filter_module modules/mod_ext_filter.so
LoadModule rewrite_module modules/mod_rewrite.so

# MIMEを追加
AddType image/webp .webp
AddType image/webp .jpg
AddType image/webp .png

# .jpg 、 .png をそれぞれ .jpg.webp 、 .png.webp にリダイレクトする
RedirectMatch permanent ^(.*)\.jpg$ $1.jpg.webp
RedirectMatch permanent ^(.*)\.png $1.png.webp

RewriteEngine On

# .jpg.webp 、 .png.webp へのアクセスはそれぞれもとのファイルの内容を返す
RewriteRule ^(.*)\.jpg\.webp$ $1.jpg [L]
RewriteRule ^(.*)\.png\.webp$ $1.png [L]

# フィルタ定義
# `-o -` で標準出力への出力を指定し、 `-- -` で標準入力からの入力を指定している
ExtFilterDefine png_to_webp mode=output intype=image/webp cmd="/usr/local/libwebp/bin/cwebp -o - -- -"
ExtFilterDefine jpg_to_webp mode=output intype=image/webp cmd="/usr/local/libwebp/bin/cwebp -o - -- -"

# フィルタを適用する
<LocationMatch ^(.*)\.jpg\.webp$>
    SetOutputFilter jpg_to_webp
</LocationMatch>

<LocationMatch ^(.*)\.png\.webp$>
    SetOutputFilter png_to_webp
</LocationMatch>