画像を編集して保存すると、触っていない部分まで劣化する

トリミング・回転・モザイクそのものは画質を落としません。落としているのは保存です。JPEG で保存し直すと画像全体が再圧縮され、加工していない部分の画素まで動きます。その量を絵柄別に測りました。

変換後の形式

PNG は透過を保ったまま、劣化なしで書き出します(画質の設定はありません)。

処理はすべてブラウザ内で実行されます。画像が外部サーバーへ送信されることはありません。

「切り抜いただけ」「回しただけ」なのに画質が落ちた、と感じたことがあるなら、原因は加工ではなく保存です。JPEG は保存のたびに圧縮をやり直す形式なので、編集ソフトやブラウザから JPEG で保存し直すと、加工した範囲とは関係なく画像全体の画素が変わります。この記事では、その量を私たちが実際に測った数値で示し、避ける方法を書きます。数値は当サイトの自動検証で測ったもので、測り方も併せて公開します。

「加工による劣化」と「保存による劣化」は別のもの

トリミング・回転・反転・モザイクといった操作は、画素を切り出したり並べ替えたりするだけで、操作そのものは画質を落としません。180度の回転にいたっては、画素の位置が入れ替わるだけで色の値は1つも変わりません。それでも保存したファイルを元と比べると、色が変わっています。変えているのは保存の側です。

JPEG は「非可逆圧縮」と呼ばれる形式で、保存のたびに情報を捨てて小さくします。一度 JPEG になった画像をもう一度 JPEG で保存すると、圧縮が二世代目に入り、前回の保存で生じた歪みの上にさらに歪みが乗ります。これは加工した範囲だけでなく、画像全体に等しくかかります。

そして、この二度目の保存はたいてい黙って起きます。多くの編集ツールは「読み込んだ形式のまま書き出す」設計で、当サイトのツールも例外ではありません。JPEG を入れて編集すれば、出てくるのは JPEG です。PNG を入れれば PNG のまま出るので、この再圧縮は起きません。

「何も変えない操作」を作れば、保存だけの損失を測れる

加工の損失と保存の損失を分けて測るには、画素を1つも変えない加工を通すのが確実です。トリミングなら範囲を画像全体にすると、入力と出力が1画素ずつ対応するため、両者の差はすべて保存に由来することになります。回転なら180度が使えます。右回りでも左回りでも結果が同じで、方向による違いが入らないためです。

実際の手順はこうです。800×600 の画像を品質92で JPEG として用意し、それを読み込ませ、画像全体を選択して切り抜き、出力を保存します。次に出力を元の JPEG と重ね、赤・緑・青それぞれの値(0〜255)を1画素ずつ比べ、1でも違う画素の数と、差の最大値を数えます。同じことを PNG と WebP でも行えば、形式による違いがそのまま出ます。書き出し側の品質も 0.92 で揃えているので、形式の差だけが残ります。

この測り方には限界もあります。得られるのは「数値がどれだけ動いたか」であって、「人の目にどれだけ見えるか」ではありません。また品質の設定やブラウザの実装によって値は変わるため、下の数値は絶対値ではなく桁の目安として読んでください。

実測値 — 絵柄によって答えが5倍以上変わる

同じ操作・同じ保存経路でも、通す絵柄によって結果は大きく変わりました。もっとも重要なのは、PNG では変わった画素が1つも無かったことです。480,000画素すべてが元の値のままでした。劣化は形式の性質であって、編集ツールの出来ではありません。

注意したいのは、「変わった画素の割合」と「1画素あたりの最大のずれ」が別々に動くことです。合成した純色の4象限は、割合こそ 29.1% ですが最大 ±63 と大きく振れます。一方、実際の画面のスクリーンショット(白地にグレーの面と濃い文字)は、動いた画素の割合はより多い 32.3% なのに、最大のずれは ±16 に収まりました。JPEG の歪みは色の鮮やかさの差が大きいところほど広がるためで、純色を並べた合成画像は現実には存在しない絵柄です。私たち自身、この合成画像の数値を「スクリーンショットでの値」として紹介ページに書いてしまい、後から実際のスクリーンショットで測り直して訂正しました。1つの数字で全部の絵柄を代表させることはできません。

モザイクのように「囲った範囲だけ加工する」道具では、この違いがはっきり実害になります。JPEG を入れてモザイクをかけると、囲っていない部分の画素まで 7.5%(24,000画素中)が動き、最大では ±44 ずれました。同じ画像を PNG で通せば、囲っていない部分の変化は0です。「囲った所だけ」という説明は、入力が PNG のときにだけ厳密に成り立ちます。

WebP も同じ手順で測りました。結果は「JPEG より軽く済む」とも「JPEG より重い」とも言えないもので、どちらが大きいかは絵柄によって入れ替わります。なだらかな写真では、JPEG が 3.8% だったのに対し WebP は 55.8% の画素が動きました。約15倍です。ところが画面のスクリーンショットでは逆で、JPEG の 32.3% に対し WebP は 18.5% と少なくなります。

ただし、この 55.8% を「WebP のほうが劣化する」と読むのは誤りです。同じ写真で動いた画素の最大のずれは ±7 しかなく、0〜255 の尺度では見て分かる差ではありません。動いた画素の数は多いが、1つあたりの動きは小さい、という形です。逆に純色を並べた合成画像では、WebP はほぼ全画素(100.0%)が動きながら最大のずれは ±51 で、JPEG の ±63 より小さく収まりました。ここでも「割合」と「ずれの大きさ」は別々に動いています。なぜ写真でこれほど差が開くのか、その理由までは確かめていません。

劣化を止める方法と、当サイトのツールの実際の挙動

確実な方法は、編集して保存する画像を PNG にしておくことです。上のツールで PNG に変換してから編集すれば、当サイトの編集ツールは PNG のまま書き出すため、保存による画素の変化は起きません。何度も加工をやり直す予定があるときほど効果があります。ただし PNG は写真ではファイルが大きくなりやすく、また既に JPEG で失われた分が戻るわけではない点は変わりません。最後に配布用として JPEG にするのは問題なく、避けたいのは編集のたびに JPEG で保存し直すことです。

元のファイルを必ず残しておくことも同じくらい有効です。劣化は蓄積するため、加工をやり直すときは前回の出力ではなく元から始めるほうが結果が良くなります。加工が複数あるなら、一度の編集でまとめて済ませるのが理想です。

当サイトのツールの挙動を正確に書いておきます。トリミング・回転・モザイク・透かし・白黒は、入力が JPEG なら JPEG、WebP なら WebP で書き出します。PNG と GIF はどちらも PNG になるため、再圧縮は起きません。AVIF はこの5つのツールでは読み込めません(読み込めるのは JPEG・PNG・WebP・GIF・HEIC・HEIF です)。AVIF を編集したい場合は、上のツールで先に PNG へ変換してください。注意が必要なのは iPhone の HEIC・HEIF で、ブラウザには HEIC を書き出す機能が無いため、当サイトでは JPEG に変換して保存します。つまり iPhone の写真をそのまま編集すると、ここで説明した再圧縮が必ず1回かかります。例外は3つあります。白黒・セピアの「2値化」は白と黒だけを約束する加工なので、入力が何であっても PNG で固定します。回転で角度を細かく指定し、できた余白を透明にした場合は、透過を保つため PNG になります。背景透過とブラシ編集も常に PNG です。

同じ「何も変えない加工」を通したときに動いた画素

800×600(モザイクのみ 200×120)、品質92の JPEG または WebP を入力。書き出しはどちらも品質 0.92。出力を元と1画素ずつ比較した実測値です。

入力した画像変わった画素の割合最大のずれ(0〜255)
PNG(絵柄を問わず)0%(480,000画素中0)0
JPEG・なだらかな写真3.8%±3
WebP・なだらかな写真55.8%±7
JPEG・画面のスクリーンショット32.3%±16
WebP・画面のスクリーンショット18.5%±14
JPEG・純色を並べた合成画像29.1%±63
WebP・純色を並べた合成画像100.0%±51
JPEG・写真を180度回転して保存56.2%±5
JPEG・モザイクで囲わなかった部分7.5%(24,000画素中)±44

このページのよくある質問

関連するツール

画像のトラブル解決ガイド一覧を見る