画像圧縮で、ほとんどの人がやることはこれです。スライダーを 70〜85 あたりに適当に置き、圧縮を押して、まあ見られればいいと願う。ファイルが大きすぎたら左へ。見た目が悪ければ右へ少し動かす。飽きるまで繰り返す。
昔の僕も全く同じことをしていました。でも、ブラウザで MozJPEG を動かす画像圧縮ツールを作ってから、「このスライダーは本当は何をしているんだ?」と疑問に思うようになりました。1 段階ごとにファイルサイズはどれだけ増減するのか。品質をこれ以上下げる意味がなくなる境目はあるのか。
というわけで、適当に決めるのはやめて、実際に数字を出してみました。
どうやって検証したか
4 種類の画像——ポートレート、空と地面のある風景、無地の背景での商品写真、夕焼けのグラデーション——を用意し、それぞれを品質 40・60・80・90 で圧縮ツールに通しました。同じエンジン(MozJPEG)、同じ解像度(1600×1200)、リサイズなし。これは教科書の理論的な計算ではありません。CompactJPG と同じライブラリから出た、れっきとした実測バイト数です。
| 画像 | 元の PNG | q=40 | q=60 | q=80 | q=90 |
|---|---|---|---|---|---|
| 夕焼け | 495 KB | 10.6 KB | 13.3 KB | 47 KB | 148 KB |
| ポートレート | 637 KB | 28.7 KB | 40.2 KB | 82 KB | 187 KB |
| 風景 | 567 KB | 15.4 KB | 22.5 KB | 74 KB | 204 KB |
| 商品写真 | 382 KB | 9.8 KB | 11.1 KB | 21 KB | 67 KB |
いくつか、すぐに目につくことがあります。
品質設定について、誰も教えてくれない 3 つのこと
1. 品質 90 はほとんどの場合、価値がない
品質 80 から 90 に上げると、すべてのテスト画像でファイルサイズがほぼ 2 倍になります——しかし画質の向上は、横並びでピクセルまで見比べない限りほとんどわかりません。平均すると、q=90 のサイズは q=80 の約 2.6 倍でした。知覚されるシャープさが 2% 良くなるために、帯域幅と保存容量を 160% 余分に使う計算です。何百万枚の写真を配信するなら、この差は馬鹿になりません。Instagram に上げるだけなら、誰も気づきません。
2. 品質 60 が、多くのウェブ用途における「甘い部分」
80 から 60 に下げると、ファイルサイズはほぼ半分(平均で元の q=80 出力の 45%)になります。ほとんどのウェブ写真、ブログ画像、メール添付では、画質の低下は微妙です——なめらかなグラデーションはなめらかなまま、顔は普通に見え、文字も読めます。髪の毛や葉っぱのような細部を 100% 以上に拡大したときだけ、わずかなブロックノイズが見え始めます。通常の表示サイズなら? 大多数の人には q=80 と見分けがつきません。
3. 品質 40 には本当の代償がある
q=40 ではファイルが極小になります——これらのテスト画像のほとんどは 30 KB 未満です。厳しいアップロード制限(多くの政府フォームが課す 20 KB 上限など)と戦うなら便利です。しかしトレードオフがあります。平坦な部分は問題ありませんが、輪郭が少しぼやけ、布の質感や木の葉、印刷された文字のような細かいディテールに目に見える JPEG ノイズが出始めます。必要なときだけ使いましょう。デフォルトにするものではありません。
では、あなたはどの品質を使うべきか?
数字のことばかり考えず、画像が「どこに行くか」を考えてください。
- サイトのヒーロー画像と商品写真——75〜85 をキープ。これは第一印象です。シャープに保ちましょう。ネットショップを運営しているなら、細部を殺さずにリスティング画像を一括圧縮する方法について、ぜひこちらの不動産写真ガイドをご覧ください。
- ブログ画像、SNS、メールマガジン——ここでは 65〜80 が非常に良く効きます。誰もあなたのメールヘッダーを 200% に拡大して見たりしません。90 まで上げるのに比べて、最初から 40〜50% 節約できます。
- 厳しいアップロード制限(求人サイト、身分証のスキャン、フォーラムのアイコン)——45〜60 に下げます。はい、忠実度はいくらか落ちますが、代わりに「ファイルが大きすぎます」というエラーに一日中悩まされることになります。私たちの圧縮ツールなら、ダウンロード前にプレビューできるので、ピタリと合わせられます。
- アーカイブ、印刷、プロのポートフォリオ——下げてはいけません。品質を 90 以上に保つか、ロスレス PNG に切り替えるか、元のままを保存してください。圧縮は「配信」のためのものであり、「保存」のためのものではありません。
物事を簡単にする一つの工夫
多くの人がスライダーで適当な数字を選ぶ理由は、圧縮ファイルをダウンロードしてしまうまで結果が見えないからです。圧縮し、ダウンロードし、開き、目を細め、戻り、調整し、また繰り返す。面倒で、誰も楽しみません。
役に立つのは、スライダーを動かしながら出力サイズがリアルタイムで更新されるのを見ること、そして確定する前にさっとプレビューできることです。私たちのツールはそう動きます——画像を放り込み、品質バーをドラッグすると、予測サイズが即座に変わります。推測も、やり直しも不要です。ファイルは端末の外に出ないので、いろいろな設定を試している間もプライバシーの心配はありません。
「ブログなら品質 78 が一番」なんて暗記する必要はありません。決めるときに数字を見せてくれるツールがあればいいのです。