Webサイトの画像をシームレスにWebPで配信するための、小規模なWebサーバー向けのオープンソースツールキットです。
Web制作者に負担なく、サイト全体を次世代画像フォーマットに移行するために開発されました。
- 従来フォーマット(JPEG・PNG・GIF)からのWebPへの定期的な自動変換。
- Apacheの
.htaccessやNginxの設定により、ブラウザに応じた適切なフォーマットでの配信。 - 元画像がWebPの場合は非対応ブラウザに向けて従来フォーマットに自動変換。
inotifywaitを利用したリアルタイム変換。
画像の軽量化には多くのメリットがあります。
- ユーザー体験の向上。インターネット環境は年々高速化しているが、常にユーザーが快適な通信経路で利用できるとは限らない。
- ユーザー負担の低減。モバイル通信の多くは従量課金なので画像データが軽量だと経済的負担を抑えられる。
- クラウドコストの低減。AWSをはじめとしたクラウドサービスの多くはデータ転送量に応じた従量課金なので、画像データの軽量化は運営コストを削減できる。
WebPに代表される次世代画像フォーマットは、従来のフォーマット(JPEG・PNG・GIF)に比べて、画像データを容易に軽量化できます。
しかし実用化には従来フォーマットとの併用が必要です。
- 旧ブラウザへの対応。古いブラウザだと画像がまったく見られない状況は避けたい。
- ツールチェインの対応。ツールやシステムの多くは従来フォーマットへの対応の方が充実している。
- 今後のトレンド。現在のところWebPへの対応ブラウザが多いが、このまま主要フォーマットになる保証はない。
webpkitは、その前提で従来フォーマットから次世代画像フォーマットへの移行に関する課題を解決します。
ここではLinux上のApache Webサーバーの画像をWebPで配信する例を紹介します。
Linux向けのwebpkitコマンドをダウンロードし、Webサーバーに設置してください(例 /usr/local/bin/webpkit)。
実行権限の設定を忘れずに行なってください(例 0755)。
設置したプログラムを実行します。ここではWebサイトのコンテンツが/var/www/htmlに存在するとします。
/usr/local/bin/webpkit sync /var/www/html /var/www/html/_webp
対象ディレクトリはできるだけ限定されている方が望ましいです。もし画像ファイルが/var/www/html/images以下にしか存在しない場合は次のように実行してください。
/usr/local/bin/webpkit sync /var/www/html/images /var/www/html/_webp/images
上記を実行すると、/var/www/html/_webpディレクトリ以下に次のような画像ファイルが作成されます。
# tree初回の実行はファイル数に応じて時間がかかります。
これらの画像をブラウザに応じて配信し分ける設定をします。
/var/www/html/.htaccessファイルに次の内容を記述してください。すでに.htaccessファイルがある場合は、既存の設定と競合しないように追記してください。
# htacccessブラウザからWebページにアクセスし、開発者ツールのNetworkタブで画像がWebPとして配信されているかを確認します。
WebP画像への変換プログラムを定期的に実行します。cronであれば次のように設定します。
*/5 * * * * /usr/local/bin/webpkit sync /var/www/html /var/www/html/_webpこれで5分に一度、新たな画像ファイルや更新された画像ファイルに対してもWebP画像が自動的に作成されます。
webpkitの問題点のひとつは、画像ファイルを上書きで変更しても即座には表示に反映されないことです。
現在はほぼすべてのブラウザがWebPに対応しているため、通常の閲覧時はWebP画像が表示されます。そのため5分に一度の変換プログラムの実行まで反映を待つ必要があります。
--reverseWebP画像があれば逆にPNG画像に変換します。--lossy非可逆(Lossy)のWebP画像はJPEG画像(ただし拡張子は.png)に変換します。
beside指定ディレクトリ内で画像の横にファイルを作成します。overwrite指定ディレクトリ内の画像を同名のファイルで上書きします。convert指定ファイルを個別に変換します。