ReactでWebPとJPEGに変換して、大きさと画質を比べる方法

export type Encoded = {
  requested: string; // 頼んだ形式
  type: string; // 実際に書き出された形式
  blob: Blob;
  psnr: number; // 元の画像との近さ（dB）。大きいほど元に近く、完全に同じなら Infinity
};

// toBlob() を Promise にする
export function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality?: number): Promise<Blob> {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('画像を書き出せませんでした'))), type, quality);
  });
}

// 画像を白い下地の上に描いて、画素を読み出す（比べるときの土台をそろえるため）
async function readPixels(source: Blob): Promise<ImageData> {
  const bitmap = await createImageBitmap(source);
  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = canvas.getContext('2d')!;
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, bitmap.width, bitmap.height);
  ctx.drawImage(bitmap, 0, 0);
  bitmap.close();
  return ctx.getImageData(0, 0, canvas.width, canvas.height);
}

// RGB の差の二乗平均から PSNR を出す
export function psnr(a: ImageData, b: ImageData): number {
  let sum = 0;
  for (let i = 0; i < a.data.length; i += 4) {
    for (let c = 0; c < 3; c++) {
      const d = a.data[i + c] - b.data[i + c];
      sum += d * d;
    }
  }
  const mse = sum / ((a.data.length / 4) * 3);
  return mse === 0 ? Infinity : 10 * Math.log10((255 * 255) / mse);
}

// 1枚の画像を、指定した形式ごとに書き出して、大きさと PSNR を返す
export async function encodeAll(file: Blob, types: string[], quality: number): Promise<Encoded[]> {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(bitmap, 0, 0);
  bitmap.close();
  const original = await readPixels(file);

  const results: Encoded[] = [];
  for (const requested of types) {
    let target = canvas;
    if (requested === 'image/jpeg') {
      // JPEG は透明を持てないので、白い下地に描いた canvas から書き出す
      target = document.createElement('canvas');
      target.width = canvas.width;
      target.height = canvas.height;
      const c = target.getContext('2d')!;
      c.fillStyle = '#fff';
      c.fillRect(0, 0, target.width, target.height);
      c.drawImage(canvas, 0, 0);
    }
    const blob = await canvasToBlob(target, requested, quality);
    results.push({ requested, type: blob.type, blob, psnr: psnr(original, await readPixels(blob)) });
  }
  return results;
}

toBlob(image/avif, 0.8) → image/png、405 バイト
toBlob(image/gif, 0.8) → image/png、405 バイト
toBlob(image/bmp, 0.8) → image/png、405 バイト

toBlob(image/jpeg, undefined) → image/jpeg、1248 バイト
toBlob(image/jpeg, 0.92) → image/jpeg、1248 バイト
toBlob(image/jpeg, 1.5) → image/jpeg、1248 バイト
toBlob(image/jpeg, 1) → image/jpeg、2277 バイト
toBlob(image/webp, undefined) → image/webp、710 バイト
toBlob(image/webp, 0.8) → image/webp、710 バイト
toBlob(image/webp, 1) → image/webp、656 バイト

import { useEffect, useState, type ChangeEvent } from 'react';
import { encodeAll, type Encoded } from './encodeImage';

const TYPES = ['image/jpeg', 'image/webp', 'image/avif', 'image/png'];
const LABELS: Record<string, string> = { 'image/jpeg': 'JPEG', 'image/webp': 'WebP', 'image/avif': 'AVIF', 'image/png': 'PNG' };

type Result = Encoded & { url: string };

const kb = (bytes: number) => `${(bytes / 1024).toFixed(1)} KB`;
const db = (value: number) => (value === Infinity ? '元と同じ' : `${value.toFixed(1)} dB`);

export function FormatCompare() {
  const [file, setFile] = useState<File>();
  const [quality, setQuality] = useState(0.8);
  const [results, setResults] = useState<Result[]>([]);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!file) return;
    let ignore = false;
    // スライダーを動かしている間は書き出さず、止まってから 200ms 後に書き出す
    const timer = setTimeout(() => {
      encodeAll(file, TYPES, quality)
        .then((encoded) => {
          if (!ignore) setResults(encoded.map((e) => ({ ...e, url: URL.createObjectURL(e.blob) })));
        })
        .catch(() => {
          if (!ignore) setError('この画像は読み込めませんでした');
        });
    }, 200);
    return () => {
      ignore = true;
      clearTimeout(timer);
    };
  }, [file, quality]);

  // 表示している URL は、次の結果に入れ替わったときに解放する
  useEffect(() => () => results.forEach((r) => URL.revokeObjectURL(r.url)), [results]);

  const handleFile = (e: ChangeEvent<HTMLInputElement>) => {
    setFile(e.target.files?.[0]);
    setResults([]);
    setError('');
  };

  return (
    <div className="compare">
      <label>
        画像を選ぶ
        <input type="file" accept="image/*" onChange={handleFile} />
      </label>
      <label>
        品質：{quality.toFixed(2)}
        <input
          type="range"
          min={0.1}
          max={1}
          step={0.05}
          value={quality}
          onChange={(e) => setQuality(Number(e.target.value))}
        />
      </label>
      {error && <p role="alert">{error}</p>}
      {file && <p>元のファイル：{file.type}、{kb(file.size)}</p>}
      <ul>
        {results.map((r) => (
          <li key={r.requested}>
            <h3>{LABELS[r.requested]}</h3>
            {r.type !== r.requested && <p role="alert">{r.requested} では書き出せず、{r.type} になりました</p>}
            <p className="numbers">
              {kb(r.blob.size)}（元の {Math.round((r.blob.size / file!.size) * 100)}%）、PSNR {db(r.psnr)}
            </p>
            <div className="zoom">
              <img src={r.url} alt={`${LABELS[r.requested]} で書き出した画像の一部を拡大したもの`} />
            </div>
            <a href={r.url} download={`converted.${r.type.split('/')[1]}`}>
              保存する
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

--- 5b. photo.png で encodeAll を1回呼ぶのにかかった時間（ms、3回）---
734, 788, 729

品質を 0.30 にした直後（次の結果が出る前）に、0.80 のときの JPEG の URL を fetch で読むと: 読めた
--- 2. 品質を 0.30 にする ---
（中略）
JPEG

25.7 KB（元の 1%）、PSNR 36.6 dB
（中略）
結果が入れ替わったあとに、0.80 のときの JPEG の URL を fetch で読むと: 読めない（TypeError）

--- 3. 品質を 50ms おきに 0.20 → 0.50 → 0.90 → 1.00 と動かして、5秒待つ ---
（中略）
その間に toBlob() が呼ばれた回数: 4

.zoom { width: 100%; height: 150px; overflow: hidden; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.zoom img { display: block; width: 100%; height: 100%; object-fit: none; transform: scale(3); image-rendering: pixelated; }

--- 6. photo.png の品質ごとの大きさ（バイト）と PSNR（dB）---
品質	JPEG バイト	JPEG PSNR	WebP バイト	WebP PSNR
0.1	17331	31.43	13080	36.06
0.2	21619	35.31	14458	36.75
0.3	26359	36.63	15772	37.22
0.4	31634	37.27	17306	37.53
0.5	40208	37.74	18968	37.70
0.6	54402	38.02	21138	37.91
0.7	82606	38.52	26934	38.03
0.8	133731	39.12	52680	38.43
0.9	277112	40.27	256572	41.09
0.95	525663	42.46	476912	44.71
1	1414498	51.25	2030134	∞

--- 6. illust.png の品質ごとの大きさ（バイト）と PSNR（dB）---
品質	JPEG バイト	JPEG PSNR	WebP バイト	WebP PSNR
0.1	20675	22.70	8946	29.63
（中略）
0.95	143179	30.93	41162	36.85
1	382364	54.91	7688	∞
PNG（toBlob の image/png）: 23940 バイト、元のファイル: 10280 バイト

--- 5. illust.png を書き出した画像の左上の画素（R,G,B,A）---
{"image/jpeg":"255,255,255,255","image/webp":"0,0,0,0","image/png":"0,0,0,0"}

WebP の「保存する」で保存されたファイル: {"name":"converted.webp","size":24570,"head":"RIFF._..WEBP"}