Look Scannedのようなモダンな Web アプリケーションの開発において、パフォーマンスの最適化は最重要課題の一つです。特に画像処理においては、その重要性が際立ちます。ImageBitmapインターフェースは、まだ広く普及していないものの、大幅なパフォーマンス向上を実現できる強力なツールです。本記事では、ImageBitmapの主要機能、その利点、そして Look Scanned への実装方法について詳しくご説明します。

ImageBitmap の概要

ImageBitmapは、効率的な画像処理を実現するための HTML5 インターフェースです。最大の特徴は、メインスレッド外での画像デコードと処理が可能な点です。これにより、レンダリングの負荷が大幅に軽減され、アプリケーション全体の応答性が向上します。作成されたImageBitmapオブジェクトは、Canvas 2D や WebGL などのレンダリングコンテキストで直接利用できるため、画像処理を多用するアプリケーションに最適な選択肢となります。

ImageBitmap 採用の理由

従来、Look Scanned では処理関数間の画像データの受け渡しにBlobを使用していました。しかし、Blobは使用の度にエンコード・デコードが必要となり、パフォーマンス面での課題がありました。一方、ImageBitmapは画像データへの直接アクセスを提供し、これらの冗長な処理を省くことで、レンダリングパフォーマンスを大幅に改善することができます。

実装の詳細

レガシーブラウザとの互換性維持が必要なため、完全なImageBitmapへの移行は現実的ではありません。そこで、幅広いブラウザ互換性を確保するハイブリッドアプローチを採用しています。互換性の詳細はcaniuse.comでご確認いただけます。また、Safari の Canvas 対応に制限があるため、画像処理には WebAssembly (WASM)を使用しており、その入力形式としてBlobが必要となっています。

このような背景から、BlobとImageBitmapの両方をサポートする段階的なハイブリッドソリューションを開発しました。以下が主要な実装詳細です：

画像のロードとデコード処理

async function loadImage(url): Promise<ImageBitmap | Blob> {
  const response = await fetch(url);
  const blob = await response.blob();
  if (window.createImageBitmap) {
    return createImageBitmap(blob);
  }
  // Blob形式へのフォールバック
  return blob;
}

WebAssembly 連携

高度な処理に対応するため、ImageBitmap非対応ブラウザでも動作するよう、Blobを WASM モジュールに受け渡しています。具体的には、まず画像を Canvas に描画し、その後canvas.toBlobを使用して必要なBlobオブジェクトを生成します。

代替レンダリング機能

async function renderImage(canvas, imageUrl) {
  const ctx = canvas.getContext("2d");
  const image = await loadImage(imageUrl);
  if (image instanceof ImageBitmap) {
    ctx.drawImage(image, 0, 0);
  } else {
    const img = new Image();
    img.src = URL.createObjectURL(image);
    img.onload = () => ctx.drawImage(img, 0, 0);
  }
}

パフォーマンス改善の成果

ImageBitmapの導入により、Look Scanned の画像処理時間は 1 枚あたり 50ms から 20ms へと劇的に短縮されました。この改善により、特にスキャン文書の処理において、より快適で高速な操作性を実現しています。

注目すべき知見

実装を進める中で、興味深い発見がありました。Web Worker への転送前に新しいImageBitmapコピーを作成することで、元のオブジェクトを直接転送する場合よりも優れたパフォーマンスが得られることが判明しました。これは、ブラウザの転送可能オブジェクトに対する内部最適化によるものと推測されます。

ブラウザ対応状況

現在、ImageBitmapは Chrome、Firefox、Edge、Safari など、主要なモダンブラウザの最新版で広くサポートされています。詳細な対応状況については、caniuse.com のcreateImageBitmapに関するドキュメントをご参照ください。

まとめと展望

Look Scanned へのImageBitmap実装は、パフォーマンスの大幅な向上に加え、非同期デコード、効率的なレンダリング、Web Workers との優れた連携を実現しました。レガシーブラウザ向けのBlobサポートは当面必要となりますが、ImageBitmapへの段階的な移行は、長期的な観点で大きな価値をもたらすと確信しています。

ぜひLook Scannedをお試しいただき、パフォーマンスの向上を体感してください！