スクショの文字がにじむとき：PNG・WebP・JPGを実際に比べました
作成 · 更新 · 運営者（個人）
注文履歴やエラー画面をキャプチャしてJPGで送ったら、小さな文字のまわりが汚く見えた、という経験はありませんか。文字が中心のキャプチャは、PNGかロスレスWebPで保存すると元と同じピクセルのまま残せます。同じキャプチャを4つの形式で保存し、容量と文字の状態を比べてみました。
なぜキャプチャの文字だけにじみやすいのでしょう？
写真は色がなだらかに変わりますが、画面キャプチャには白い背景に黒い文字のように、1ピクセルで色が急に変わる場所がたくさんあります。JPGはこの急な境目を正確に残すのが苦手で、文字のまわりにしみや波のような跡が出ます。赤いエラー文や青いリンクのような色付きの小さな文字は、色がはみ出したようにも見えます。
そのため、キャプチャは写真とは分けて考えるのがおすすめです。写真ならほとんど気にならない画質85%でも、11pxの文字では拡大するとすぐ分かる跡が残りました。
同じキャプチャで比べた結果
自作の1200×800のキャプチャ例を使いました。表、11pxの注意書き、赤いエラー文、小さなログの文字が入っていて、ブラウザで最初に作ったPNGは111.2KBです。これをミルキットの形式変換と同じ処理に通し、形式ごとに保存しました。
PNGは67.6KBで、元とピクセルが100%同じでした。ロスレスWebPは15.6KBとPNGの4分の1以下で、こちらも100%同じです。WebP画質85%は46.9KBで、小さな文字の範囲のPSNRは40.3dBでした。
注目はJPGです。画質85%は72.7KBとPNGより大きく、小さな文字のPSNRは35.2dBで一番低い結果でした。画質95%にすると42.8dBまで良くなりますが、容量は131.1KBとPNGの約2倍になります。このキャプチャでは、JPGは容量でも鮮明さでも得をしませんでした。
ミルキットで保存する手順
- 形式変換を開いてキャプチャを追加します。
- 保存形式でPNGを選べば、そのまま画質を落とさずに保存できます。送り先がPNGを受け付けるなら一番簡単です。
- もっと小さくしたいときは、保存形式をWebPにし、容量の調整を「容量で調整」に変えて、目標を大きめ（例：2MB）に入れます。
- 結果に「画質を変えずに小さくしました」と出れば、ロスレスWebPで作られています。プレビューで100%を押して小さな文字を確かめてから保存してください。
ここで大事な点があります。容量の調整が「画質で調整」のとき、WebPは画質を100%にしても非可逆圧縮で保存されます。ロスレスWebPは「容量で調整」のときに最初に試され、目標に収まればそれが使われます。目標を小さくしすぎると非可逆のWebPに切り替わるので、結果の表示を必ず確認しましょう。
JPGしか受け付けない場合は？
提出先がJPGだけなら、画質を上げて保存してください。今回の試験では85%から95%に上げると、文字のPSNRが7dB以上良くなりました。そのぶん容量は増えるので、先に不要な余白を切り抜いておくと、ファイルをあまり大きくせずに文字を守れます。
すでにJPGで保存したキャプチャをPNGに変えても、にじみは消えません。にじみはもうピクセルの一部になっています。できればキャプチャの元ファイル（たいていPNG）から作り直しましょう。
どの形式を選べばいい？
文字と線が中心のキャプチャでは、ロスレスWebPが一番小さく、PNGはどこでも開きやすい画質を落とさない選択肢でした。キャプチャの中に大きな写真が入っていると、結果は変わることがあります。そのときはWebP 85%とPNGを比較スライダーで並べて、目で見て選んでください。
送る目的も考えてみましょう。不具合の報告や問い合わせでは、相手が数字やエラーコードを拡大して読むことがあるので、ピクセルがそのまま残る形式が役立ちます。チャットでちょっと見せるだけでも、今回はロスレスWebPのほうがJPGより小さかったので、正確さを保っても損はありません。
もっと容量を減らしたいときは？
まず必要な部分だけを残すように切り抜いてみてください。画面全体ではなくエラーの窓だけを残せば、形式を変えなくてもファイルはぐっと小さくなります。切り抜きはピクセルを変えないので、文字の鮮明さにも影響しません。
縦横のサイズを小さくする方法は、キャプチャでは注意が必要です。写真は少し縮めても目立ちにくいのですが、11pxの文字は縮めた途端に線が重なって読みにくくなります。どうしても縮めるときは、結果を100%で表示して数字や記号が見分けられるか必ず確認してください。
関連するツールを開くMiruKitで実際に確認した結果
| 形式・設定 | 容量 | 小さな文字のPSNR | 元と同じピクセル |
|---|---|---|---|
| PNG | 67.6 KB | 劣化なし | 100% |
| ロスレスWebP | 15.6 KB | 劣化なし | 100% |
| WebP 85% | 46.9 KB | 40.3 dB | 71.8% |
| JPG 85% | 72.7 KB | 35.2 dB | 61.5% |
| JPG 95% | 131.1 KB | 42.8 dB | 63.6% |
自作の1200×800の画面キャプチャ例（11〜15pxの文字）を公開中のprocessImageで保存しました。ロスレスWebPは容量で指定（目標25MB）で出た結果です。PSNRは11pxの小さな文字の範囲のRGB値です。
知っておきたいこと
上の数字は自作のキャプチャ1枚の結果です。文字の大きさや色、写真の割合によって容量は変わります。
PSNRは元の画像にどれだけ近いかを表す値で、大きいほど近いという意味です。最後は実際に表示する大きさで目で確かめてください。
送り先のサービスが画像を再圧縮すると、結果が変わることがあります。大事なキャプチャは、相手の画面でも一度確認してみてください。