モチベーション
当サービスでは BaaS に Supabase を採用していますが、Storage 間でのファイル転送にかかる帯域消費が大きくなってきており、できれば改善したいと思っています
Supabase の Pro プラン (有償プランで最小の tier) では 20GB/月 の帯域が認められており、これを超えると 0.09USD/GB で従量課金されます。次の戦略で Storage 間でのファイル転送にかかる帯域を抑えようと思っています
もともと期待していたこと
ちょっと前に見かけた情報だったのですが、supabase では supabase API で Storage にイメージファイルをアップロードする際にイメージファイルをリサイズする機能を 2022年度の第３四半期にリリースするとアナウンスしていたはずです。この機能を期待して、現状ではイメージファイルのリサイズについては何も考慮していませんでした。2022 年 11 月 4 日現在、この機能に関するアナウンスは無いようなので、別の方式でリサイズを検討してみようと思いました
イメージのアップロード時にリサイズする
以下の方式で実装してみようと思います
ハマりポイントその１
const compressOption = {
maxSizeMB: 1,
maxWidthOrHeight: 400,
};
このパラメータを変更してもアップロードしたファイルのサイズが変わらない、という問題が発生しました。開発サーバを再起動してもダメで、新規ブラウザ (新しいタブでOK) でアクセスするとファイルサイズが変わりました
ハマりポイントその２
ハマりポイントというほどではありませんが、maxSizeMB を 0.2 のように小数点付きの値を指定したところ無視されました。整数のみ指定できるようです
Image Component を使う
いろいろな記事で「Image Component 使えよ」と言われ続けてきましたが、img タグを使っています。こちらの記事を見かけて「これならいけるかも」と思っているところです
結果発表
Image Component で img タグと同等の表示をさせたくて、いろいろと試行錯誤してみたのですが、うまくいきませんでした。Browser Image Compression でイメージファイルは充分リサイズできているので、ここは imgタグ のままで様子見することにしました