Eco-Astro Image Squeezer：ブラウザー画像処理の設計ノート

WebAssemblyコーデックとWeb Workerを使う画像変換の流れで、画質、メモリ、並列処理数の上限を併せて扱う設計です。

1. 画質の条件を先に決める

この文書は、ブラウザーで画像を変換するツールの設計ノートです。AVIFとWebPは、設定によって非可逆圧縮と可逆圧縮を使い分けられます。ファイルサイズが減ったというだけで、元のピクセルが完全に保持されていると判断してはいけません。画像形式のガイドを参考に、出力形式と画質条件を決めます。

2. 処理の流れ

• 入力ファイルの実際の形式、サイズ、解像度を確認し、処理可能な上限を設定します。
• WebAssemblyコーデックの読み込みと初期化が完了してから変換を開始します。
• 重い処理はWeb Workerへ渡し、Worker数と同時実行数を制限します。
• 進行状況、キャンセル、失敗、メモリ不足をUIへ伝え、使用済みのバッファーとオブジェクトURLを解放します。

WorkerはDOMに直接アクセスできません。計算結果はメッセージで受け渡し、画面の更新はメインスレッドで行います。Web Workerの利用ガイドに基づいて役割を分けます。

3. 検証項目

可逆圧縮モードではデコード後のピクセルを比較し、非可逆圧縮モードでは見た目の品質と容量を併せて評価します。透明度、カラープロファイル、回転情報、アニメーションが保持されているかも個別に確認します。

圧縮率と処理時間は、画像の内容、設定、端末のメモリによって変わります。固定の削減率や、常に滑らかに動作するUIを保証せず、代表的な画像と低スペック端末を含めた測定結果から判断します。