Canvas APIの画質を決める3つの仕組み
ブラウザで画像をリサイズするときの画質を左右するのは、補間品質を決める imageSmoothingQuality、圧縮品質を決める toBlob の quality引数、さらに専用ライブラリ pica の3要素です。仕組みを分解して整理します。
1. imageSmoothingQuality — 補間アルゴリズムの品質指定
Canvas で画像を drawImage したとき、元の解像度と描画先サイズが違えば必ず「補間（隣接ピクセルを混ぜて新しいピクセルを生成）」が発生します。MDN仕様によると CanvasRenderingContext2D.imageSmoothingQuality は low / medium / high の3段階で、既定値は low。何もせずに drawImage しただけだとブラウザは最も軽い補間（多くは nearest-neighbor／bilinear 相当）を選びます。SNS投稿や申請写真でも違いが分かるレベルで粗くなるので、リサイズ用途では明示的に high を指定するのが定石です。
2. high指定で何が変わるか
imageSmoothingQuality = "high" に切り替えると、多くのブラウザでバイリニア／バイキュービック相当の高品質補間に切り替わります。実際に大きな写真を 1/4 に縮小すると、low ではモアレ・ジャギーが目立ちやすいのに対し、high では輪郭が滑らかに保たれます。当ツールはリサイズ実行時に必ず imageSmoothingEnabled = true と imageSmoothingQuality = "high" をセットしてから drawImage しているため、追加設定不要で高品質結果が得られます。
3. toBlob の quality — 圧縮率と画質のトレードオフ
補間とは別に、JPG／WebPで保存するときには「圧縮品質」を 0〜1 の範囲で指定します。MDN仕様の HTMLCanvasElement.toBlob(callback, type, quality) では、quality は 0〜1 の数値、未指定／範囲外の場合はブラウザ既定値（多くは0.92前後）が使われます。当ツールの UI の「画質スライダー50〜100」は、内部で 0.50〜1.00 に換算されて toBlob に渡されます。
4. 画質スライダーの実用値（推奨レンジ）
- ・95〜100：劣化を肉眼でほぼ判別不能。容量は大きい。アーカイブ・印刷向け
- ・85〜90：写真用途のベストバランス。SNS／ブログ／メール添付の既定値推奨
- ・70〜80：容量優先。アイコン・サムネイル・LP背景など縮小表示前提のとき
- ・50〜65：明らかな劣化が出る。プレビュー画像・確認用に限定
当ツールの初期値は90（=0.90相当）。これは多くのブラウザの既定値0.92より僅かに低めですが、写真ファイルの容量が体感で2割程度減るため、実用バランスで選んでいます。
5. pica（nodeca/pica）— Lanczos補間の専用ライブラリ
標準Canvasより一段高品質を求める用途では pica という JavaScript ライブラリがよく使われます。pica は Lanczos／mks2013 と呼ばれる多次関数を使った補間で、特に大幅な縮小（1/4以下）でディテール保持に強いのが特徴です。MITライセンスで商用利用も自由。実装は WebWorker を活用しているため UI スレッドをブロックしません。
6. pica を導入すべきケース／標準Canvasで十分なケース
現実的な判断基準としては：
- ・SNS投稿・ブログ・メール添付・申請写真 → 標準Canvasで十分
- ・ECサイトの商品写真（細かい質感が売りの場合）→ pica検討余地
- ・写真現像・印刷会社入稿・ストックフォト → pica または専用デスクトップソフト推奨
- ・iPhone で大きな画像を扱う場合 → pica のWebWorker処理が安定性面で有利
当ツールは「SNS・申請・メール添付」の用途で最も多く使われる前提で設計しているため、標準Canvas＋imageSmoothingQuality=high 構成を採用しています。
7. 画質に効く設定の優先順位まとめ
- ① 寸法を「目的サイズちょうど」に合わせる（過剰縮小・過剰拡大を避ける）
- ②
imageSmoothingQualityをhighに明示 - ③ JPG/WebPなら quality を 85〜90 に設定
- ④ それでも不満なら保存形式を WebP に切替（同画質でJPG比20〜30%軽量）
- ⑤ さらに高品質が必要なら pica 導入を検討