90度回転と画質劣化——JPG/PNG/Canvas再エンコードの仕組み
画像を回転して保存し直すと「画質は落ちる？」というのは、ユーザーから最も多い疑問の1つです。結論を先に言うと、90度単位の回転はピクセルの並べ替えなので本質的には劣化しません。ただし「JPGで保存」か「PNGで保存」かで実際の結果が変わります。仕組みから整理します。
90度・180度・270度回転は「ピクセルの並べ替え」
90度・180度・270度回転は数学的にはピクセル単位の純粋な並べ替え処理です。元画像の(x, y)位置にあったピクセル値が、回転後は別の(x', y')位置に「そのまま」移動するだけで、ピクセルの色や明度は1bitも変わりません。これに対して、たとえば45度回転だと既存ピクセルにきれいに収まらないため補間（バイリニア・バイキュービック）が必要になり、エッジがぼやけて本質的な劣化が起きます。
左右反転・上下反転も同様にピクセル単位の並べ替えなので、本質劣化はゼロ。本ツールの「↻ 右に90°」「↺ 左に90°」「左右反転」「上下反転」の操作はすべて、内部処理だけで言えば完全無劣化です。
Canvas経由の再エンコードがもたらす影響
MDN Web DocsのCanvasRenderingContext2D.rotate()によると、Canvas APIはラジアン単位で角度を指定して描画行列を回転させます。本ツールは「90 × Math.PI / 180」のように度→ラジアン変換を内部で済ませ、translate→rotate→drawImageの順でCanvasに描き直しています。
ここで重要なのが、CanvasはJPGの圧縮情報を保持しません。Canvasに描き込まれた時点で画像はピクセルの集合（ImageData）になり、その後HTMLCanvasElement.toBlob()でPNG・JPGに書き出すときに新たに圧縮処理が走ります。つまり「Canvasを通る＝必ず再エンコード」が前提です。
保存形式によって再エンコードの結果が変わります。PNGは可逆（lossless）なので画素値は完全保存、JPGは非可逆（lossy）なので品質値（0〜1）に応じて情報を間引きます。
PNG保存——完全無劣化のしくみ
PNGは可逆圧縮（lossless compression）で、保存と読み込みを繰り返してもピクセル値が変化しません。文書スキャン・図表・透過のあるロゴ・スクリーンショットなど「画質を一切落としたくない」用途ではPNGが正解です。
ただしPNGは写真には不向きです。連続諧調（グラデーション）の多い画像ではファイルサイズがJPGの3〜5倍に膨らみます。たとえば3000×4000pxの写真をPNGで保存すると10MB前後、JPGなら2MBほどです。
MDN Web DocsのHTMLCanvasElement.toBlob()仕様では、PNGは「Browsers are required to support image/png」と必須サポート扱いで、品質値は無視されます（PNGに品質パラメータは存在しないため）。本ツールも「PNGで保存」を押した時は無条件で完全な品質で書き出します。
JPG保存——0.92という品質値の意味
MDN Web DocsのHTMLCanvasElement.toBlob()によれば、JPGの品質値は0〜1の小数で指定し、1に近いほど高品質・大容量、0に近いほど低品質・低容量です。本ツールは0.92（92%品質）を採用しています。これは多くのWeb開発者・写真愛好家の間で「肉眼で違いが分からないギリギリの上限」とされる値で、Photoshopの「品質12（最高）」相当に近いラインです。
0.92での再エンコードでも、厳密にはJPGの離散コサイン変換（DCT）で高周波成分の一部が間引かれます。100%相当の極限品質ではないものの、写真用途で実用上の劣化を感じることはほぼありません。回転・反転＋JPG保存を何十回繰り返してもズルズル劣化することは現実的にはありません。
ただし「PNGで取り込んだ画像をJPGで書き出す」は別問題で、その時点で完全無劣化から離れます。元がPNG・図表・文字なら、回転後もPNGで保存するのが安全です。
保存形式の選び方早見
| 元画像の種類 | 推奨保存形式 | 理由 |
|---|---|---|
| スマホ写真（JPG） | JPG（92%） | 容量小・違い知覚不能 |
| 書類スキャン | PNG | 文字エッジを保存 |
| スクリーンショット | PNG | UI線がシャープに残る |
| 透過のあるロゴPNG | PNG必須 | JPGは透過非対応 |
| RAW現像済み写真 | JPG（92%） | 写真は非可逆で十分 |
| 図表・グラフ | PNG | 線・面の境界保存 |
| WebP元画像 | PNG（無劣化重視） | 本ツール書出はJPG/PNGのみ |
無劣化を厳密に保ちたい場合
ピクセル値を1bitも変えたくない用途（医療画像・科学画像・印刷データ）では、専用のJPEGの可逆回転ツール（jpegtran、ExifTool等のコマンドラインツール）を使う方法があります。これらはJPGのDCTブロックを再圧縮せずに回転だけ行うため、完全に無劣化です。
ただしブラウザ上のCanvas APIではDCTブロック単位の操作はできないため、本ツールでは「PNG保存＝完全無劣化」「JPG保存＝92%品質で実用無劣化」というラインが現実的な落とし所です。日常用途ならこれで十分、研究・医療用途なら専門ツールを、と考えてください。
他ツールとの組み合わせ
画像の回転・反転ツール → /img-rotate/
本記事は MDN Web Docs CanvasRenderingContext2D.rotate()、MDN Web Docs HTMLCanvasElement.toBlob()、MDN Web Docs CSS image-orientation を参照しています。