HTML5 CanvasとWebPによる完全ブラウザ完結の画像圧縮技術

多くの画像圧縮サイトは、ユーザーの写真をサーバーへアップロードして処理しています。しかし、身分証やプライベートな写真を外部サーバーに送ることは、セキュリティ上のリスクを伴います。

そこで私は、ブラウザ内部で完結する画像最適化ツール LS Image Compressor (image.ladestack.in) を構築しました。

CanvasとOffscreenCanvasによるローカル処理

本ツールでは、画像をサーバーへ送信せず、ブラウザ標準のCanvas APIとcreateImageBitmapを活用してGPUアクセラレーションでリサイズと圧縮を行います。

OffscreenCanvasとWeb Workerを組み合わせることで、メインスレッドのUI動作を一切止めずに、複数枚の高解像度写真を並列処理できます。

外部送信ゼロの完全な安心

すべてのピクセルデータはお使いの端末のメモリ上でのみ処理されます。外部通信が一切発生しないため、重要な書類や機密資料も安心して圧縮できます。