画像リサイズ・圧縮

画像フォーマットの使い分け

PNG は可逆圧縮で透過をサポートし、ロゴやスクリーンショットに適しています。 JPEG は非可逆圧縮で写真向きの高い圧縮率を実現します。 WebP は Google が開発したフォーマットで、PNG の透過と JPEG の高圧縮率を両立します。 2024年時点で主要ブラウザすべてが WebP に対応しています。

JPEG の品質と圧縮

JPEG 品質85%程度で元の約1/10のサイズになることもあります。 これは人間の目が高周波成分 (細かいディテール) の劣化に鈍感な性質を利用した圧縮方式のためです。 品質を70%以下にすると目に見えるノイズ (ブロックノイズ) が発生しやすくなります。

Canvas API の制限

ブラウザの Canvas にはメモリ制限があり、非常に大きな画像 (例: 100メガピクセル以上) は 処理できない場合があります。 Chrome ではキャンバスの最大面積は約268メガピクセル (16,384 × 16,384 px) です。 大きな画像を扱う場合は、事前にリサイズして分割処理する手法が一般的です。