スクリーンショットを圧縮しても文字をボヤけさせない方法（本当に効くやり方）

バグ報告や、おかしなエラーメッセージ、レシート、友達に見せたいコードの断片——スクリーンショットを撮って、どこかに貼り付けると途端に…ぼやける。ふわっと。まるで誰かが文字にヴァセリンを薄く塗ったよう。それでも送ってしまう。「もう少し見やすいのを送ってくれない？」と言い返される。

そこでみんなが言うことをする。開いて「名前を付けて保存」、形式はJPG。JPGなら小さくなるから、だよね？ でも出来上がると文字は下手になり、ファイルはほとんど小さくなっていない。スクリーンショットで最も誤解されている話へ、ようこそ。

誰も説明しないことがある。スクリーンショットは写真ではない。写真は無数のゆるやかなグラデーション——空、肌、影——であり、JPEGはまさにそれのために作られた。スクリーンショットはテキストとべた塗りの色。どこもかしこもくっきりした境界だ。JPEGはその境界を嫌う。直線のテキストと出会うと近似しなければならず、その近似がぼやけや、文字の周りのちらつくハロスとして見える。一方PNGはその境界をそのまま保存する。だからスクリーンショットはPNGなら完璧で、JPGだとモヤモヤする。

私はいい加減推測をやめて本当に測った。実際のスクリーンショット3枚——コードエディタ、設定ダイアログ、ターミナル——を二つの経路で通した。正しい方（パレット／PNG8圧縮。当サイトの画像圧縮ツールがPNGに使っているのと同じエンジン）と、手抜きの方（JPEG品質70で書き出し。たいていのアプリが既定で使う設定）だ。

このJPEGの列をもう一度読んでほしい。3枚とも「小さい」はずのJPEGは、ぼやけていただけでなく、ちゃんとしたPNG8より大きかった。コードエディタではJPEGが122 KBになり、65 KBのPNG8のほぼ2倍。中のテキストは洗濯機にかけたよう。PNG8の方は小さい上に、一文字一文字が元のままピクセル単位で同じだ。

これを積み上げるとすぐに増える。上のようなスクリーンショット20枚は生データで約1.9 MBだが、PNG8にすると約800 KBに縮む——くっきりしたままで、チケットや文書に迷わず放り込める大きさになる。

「名前を付けて保存」でJPGにするのが悪い習慣な理由

JPEG圧縮は、写真なら目が見落とすという詳細を捨てることで働く。夕焼けなら問題ない——誰も気づかない。11ポイントのテキストとなると大惨事だ。テキストこそが、JPEGが最も苦手とする「詳細でコントラストの高いもの」だからだ。エンコーダはその境界を丸め、ぼやけが生じる。しかもスクリーンショットは大半がべた塗り（PNGなら驚くほどうまく圧縮される）なので、JPEGの方が元のPNGより大きくなることも多い。品質を失って、得るものは何もない。

唯一の例外：あなたの「スクリーンショット」が実は動画や3Dシーンの静止画——つまりゆるやかなグラデーションを含むもの——なら、その部分にはJPEGやWebPで十分だ。でもその上のテキストラベルはPNGの方が一番くっきりする。だから安全な鉄則はいつもこれ：PNGのままにして、PNGをちゃんと圧縮する。

本当に効く方法：PNG8（パレット）圧縮

PNG8は画像の色を小さなパレット——256色以下——にまとめ、それだけを使って再保存する。スクリーンショットはもともと数色しか使わないことが多いので、見た目はほとんど変わらない。テキストの色はパレットの一項目になり、そのまま正確に出る。フル深度の冗長なピクセルを millions も保存しなくなるので、ファイルは小さくなる。

これはまさに、PNGを放り込んだときに当サイトの圧縮ツールがやることだ。最適化したPNG8としてブラウザ内でローカルに再エンコードする。あなたの端末から外に出るものは何もない。

私が実際に使っている手順

これを読む方が、やるより長くかかる。

1. 送ったり載せたりするスクリーンショットを集める。バグ報告や手順書なら10枚は普通。
2. 圧縮ツールに放り込む——まとめて処理できるから、1枚ずつする必要はない。
3. PNG8として再エンコードさせる。品質スライダーには触らない。パレット圧縮は設計上くっきりを保つ。
4. ダウンロードして使う。小さくて、くっきりしていて、Slackやチケット、文書、アップロードフォームにそのままきれいに貼れる。

もし厳しいアップロード上限と戦っているなら——たとえば1ファイルを20 KBに制限するサポート窓口——パレット圧縮だけでは届かないかもしれない。テキスト込みのスクリーンショットには下限があるからだ。そういう場合は解像度も少し下げ（小さめの画面に）、時には軽いJPEGの軟化を受け入れる。フォームに弾かれずに済む20 KB圧縮ガイドも用意している。

JPEGが本当にいい場合

これはJPEGが悪いという意味ではない。本物の写真——スマホの写真、カメラのRAW、商品画像——にはぴったりだ。写真の山をメールで送るなら、それは別の問題で別の解決策（JPEG品質75で再圧縮、PNGではなく）になる。メールの添付上限を超える写真を収める方法は別に書いたので、そちらも参考に。

言いたいのは単純だ。形式は画像に合わせる。写真→JPEG。スクリーンショット→PNG8。混ぜると、ファイルが膨らむか文字がぼやけるか、たいてい両方だ。

簡単なやり方

読めるスクリーンショットを送るために、パレットやエンコーダを考えなくていいはずだ。このツールを作った理由は、試した「圧縮」アプリがことごとく、すべてをJPEGに強制する（文字がぼやける）か、ファイルをサーバにアップロードした（勘弁して）からだ。ちゃんと効くのはこれ：ページを開き、スクリーンショットを放り込み、くっきり小さなPNGをダウンロード、完了——すべてブラウザ内、アップロードなし。

次に「もう少し見やすいのを送ってくれない？」と返されたら、解決策が「JPGで名前を付けて保存」ではなかったと分かっているはずだ。「そもそもJPGにしない」ことだったのだ。