さくらのレンタルサーバーでWebP対応

さくらインターネットのレンタルサーバーで画像ファイル(jpgとpng)をWebPへ変換し、画像ファイル(jpgとpng)へのリクエストがあったら、.htaccessでWebPを送るようにしてみました。

WebP対応のお知らせ | さくらインターネット (sakura.ad.jp)
このお知らせにあるように、さくらのレンタルサーバーにcwebpコマンドがインストールされていますので、ユーザー側でcwebpコマンドをインストールする必要はありません。

今回の対応に当たっては、3ファイルでできるサイト全体の自動的なWebP対応 - Qiitaを参考にして実施しました。

WebPへの一括変換スクリプト

下記の内容を記述したスクリプト(例:webp_conv.sh)を作成。さくらのレンタルサーバーに対応する為、スクリプトの一部を改変しています。

#!/bin/bash
DIR="/home/www/image" # 対象ディレクトリパス(要変更)
JPEG_CWEBP_OPTS="-q 75 -m 4" # Jpeg向け非可逆cwebpオプション
PNG_CWEBP_OPTS="-lossless" # PNG向け可逆cwebpオプション
CWEBP="/usr/local/bin/cwebp" # cwebpコマンドの場所
cd $(dirname $0)
shopt -s nocasematch
find -E . -type f -regex ".*\.(png|jpg|jpeg)" -print0 | \
while IFS= read -r -d '' SRC; do
  WEBP="$SRC.webp"
  if [[ ! -e $WEBP || $SRC -nt $WEBP ]]; then
    if [[ $SRC =~ \.jpe?g$ ]]; then
      echo "Convert to lossy WebP: $SRC"
      "$CWEBP" $JPEG_CWEBP_OPTS "$SRC" -o "$WEBP"
    elif [[ $SRC =~ \.png$ ]]; then
      echo "Convert to lossless WebP: $SRC"
      "$CWEBP" $PNG_CWEBP_OPTS "$SRC" -o "$WEBP"
    fi
  fi
done

このスクリプトの場合、既にWebPへの変換がされている画像ファイルは、何もせずに処理をスキップします。

Webpファイルを返す為の.htaccess

.htaccessによるWebPの選択的レスポンスとその問題点と改善案 - Qiitaの下部にある改善版.htaccessをそのまま利用させていただきました。

<IfModule mod_setenvif.c>
  # WebP版があるかもしれない画像へのリクエストは全てVaryレスポンスヘッダを返す
  SetEnvIf Request_URI "\.(jpe?g|png)$" _image_request
</IfModule>

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

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

  # WebP版のファイルがある場合のみ後続のRewriteRuleを適用する
  # SCRIPT_FILENAMEを使うことでサブディレクトリの補完が不要に
  RewriteCond %{SCRIPT_FILENAME}.webp -f

  # *.jpg、*.pngファイルを*.webpファイルに内部的にルーティングする
  # Content-Typeはimage/webpにする
  # リダイレクト先は $0.webp でも可
  RewriteRule .(jpe?g|png)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  # 環境変数_image_requestが真の(上記SetEnvIfが設定された)場合、
  # VaryレスポンスヘッダにAcceptを追加する
  Header append Vary Accept env=_image_request
</IfModule>

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

CRON設定への登録

さくらのレンタルサーバーのコントロールパネルにあるCRON設定に一括変換スクリプトを登録します。

cd /home/[ユーザー名]/www/[スクリプトを設置したディレクトリ名]/; /usr/local/bin/bash ./webp_conv.sh 1> /dev/null

bashと記述した場合、コマンドが見つかりませんというエラーが発生した為、/usr/local/bin/bashとフルパスで記述しています。

実行スケジュールは、WebPへの変換が全ての画像ファイルで完了してれば、cwebpコマンドが実行されずに終了する為、サーバーへ大きな負荷は掛からないだろうという予測から、30分おきにしています。

この方法は、Movable TypeやWordPressどちらでもプラグインに頼らずにWebPへの対応が可能です。

ti-web.net blog