Nginx+Lua+libwebpによるサーバー画像の自動WebP変換の実現

サーバーのトラフィックと読み込み速度は常に最適化の重点です。画像のクリアさを保証しつつ、トラフィックを節約し、読み込み速度を向上させることが優れたウェブページの目標です。

Google は WebP という画像形式を導入しました（Google 公式ウェブサイト）。同じ品質で、ファイルサイズが 40％小さくなり、他の同様の画像形式よりも高い圧縮率を実現しています。さらに、主要なブラウザのサポート率はすでに 80％に達しています。

サポート率を確認する

ng1

元の画像の読み込みスクリーンショット：（12.61 秒）

ng2

WebP の読み込みスクリーンショット：（4.72 秒）

ng3

WebP の読み込みは読み込み速度を大幅に向上させることができます。

Nginx の Lua モジュールのインストール#

省略

サーバーに libwebp をインストールする#

libwebp は WebP 形式に画像を変換するツールです。

yum install libwebp-tools

テスト：

cwebp -q 100 1.jpg -o 1.webp

ng4

上記の情報が表示された場合、インストールが成功しています。

nginx.conf#

設定：

.png.webp、.jpg.webp、.gif.webpのリクエストを WebP に変換する Lua ファイルで処理する。

location /img {
    expires               365d;
    autoindex             on;
    autoindex_exact_size  on;
    try_files             $uri $uri/ @webp;
}
    
location @webp {    
    if ($uri ~ \.(png|jpg|gif)\.webp) {
        content_by_lua_file  lua/imgProcess.lua;
    }
}

ng5

`imgProcess.lua`#

function file_exists(name) --ファイルが存在するかどうかを判断する関数
    local f=io.open(name,"r");
    if f~=nil then io.close(f) return true else return false end
 end
 
 local newFile = ngx.var.request_filename;
 local originalFile = newFile:sub(1, #newFile - 5); --リクエストされたWebP画像から.webp拡張子を削除

 if not file_exists(originalFile) then
   ngx.exit(404);
   return;
 end
 
 os.execute("cwebp -q 75 " .. originalFile  .. " -o " .. newFile);  --libwebpを使用して画像を変換

 if file_exists(newFile) then
     ngx.exec(ngx.var.uri); --変換されたWebP画像にリダイレクト
 else
     ngx.exit(404); --変換に失敗：404
 end

ng6

結果を確認する#

画像にアクセスする前に、サーバーに WebP ファイルはありません。

ng7

.jpg.webp のリクエストがサーバーに送信されると、自動的に WebP ファイルが生成されます。

ng8