CloudFront Functionsで画像のリクエストをWebPに書き換える

CloudFront Functions

同じS3ディレクトリに .jpg.webpや.png.webpなどの拡張子のWebPがある前提で

Viewer Requestに対して以下の関数を設定

function handler(event) {
    var request = event.request;    
    var uri = request.uri;
    var ua = request.headers["user-agent"].value
    if ( ua.match(/Version\/13\./) || ua.match(/Version\/12\./) || ua.match(/Version\/11\./) || ua.match(/Version\/10\./)){
        return request
    }
    else if (uri.match(/\/images\//) && (uri.match(/\.(jpe?g|png)$/)) ) {
        
        request.uri += ".webp";
    }
    return request;
}

古いブラウザなのでUserAgentを使用しても良いので
ua.match(/Version\/13\./)　|| ...の部分でWebP未対応のSafariを分岐させる。

終わりに

ちょっとしたことはLambda@Edge使わなくても実装可能