【Typescript】WebP画像変換

WebPサポート検出

基本的な検出方法

const supportsWebP = (): boolean => {
  const canvas = document.createElement('canvas');
  if (!canvas.getContext) return false;

  return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
};

この実装では、実際にCanvas APIでWebP出力をテストして対応状況を確認しています。toDataURLメソッドが正常にWebPを生成できる場合、文字列がdata:image/webpで始まります。

非同期での検出

const checkWebPSupport = (): Promise<boolean> => {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 1;
    
    canvas.toBlob(
      (blob) => resolve(blob !== null),
      'image/webp',
      0.8
    );
  });
};

WebP画像生成

基本的な変換処理

const convertToWebP = async (
  img: HTMLImageElement,
  quality: number = 0.8
): Promise<Blob> => {
  // Canvas作成
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('Canvas context could not be created');
  }
  
  // 画像描画
  ctx.drawImage(img, 0, 0);
  
  // WebPに変換
  return canvasToBlob(canvas, 'image/webp', quality);
};

const canvasToBlob = (
  canvas: HTMLCanvasElement,
  type: string,
  quality: number
): Promise<Blob> => {
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      blob => {
        if (blob) {
          resolve(blob);
        } else {
          reject(new Error('Failed to create blob from canvas'));
        }
      },
      type,
      quality
    );
  });
};

実装上の注意点

1. ブラウザ対応

Safari（約15%）では Canvas API によるWebP生成に対応していないため、JPEGフォールバックが必須です。

2. WebP制限

WebP形式には以下の制限があります

• 最大幅・高さ：16,383ピクセル
• 総ピクセル数：約2.68億ピクセル

これらの制限を超える画像は事前にリサイズが必要です。

3. メモリ使用量

Canvas APIでの画像処理はメモリを大量消費するようです。

• 1920×1080画像：約8.3MB
• 4K画像（3840×2160）：約33MB

大きな画像を処理する際は、メモリ不足によるブラウザの応答停止に注意が必要です。

4. 品質設定

WebP品質パラメータ

• 80-90: 高品質、ファイルサイズ大
• 60-80: バランス型、推奨範囲
• 40-60: 低品質、ファイルサイズ小
• 40未満: 視覚的劣化が顕著

実用的には60-80の範囲での調整が適切です。

5. エラーハンドリング

対応が必要なエラーケース

• Canvas context作成失敗
• WebP生成失敗（Safari等）
• メモリ不足
• ファイルサイズ制限超過
• 画像読み込み失敗