画像圧縮

まずリサイズ、それから圧縮

最も効く節約は、たいてい品質スライダーとは関係ありません。最近のスマートフォンの写真は横4,000ピクセルあることも珍しくありませんが、ページ上で幅800ピクセルで表示するなら、残りはブラウザが捨てています。誰も見ないピクセルの転送料を払っていることになります。

ファイルサイズは幅ではなく面積に比例するので、長辺を半分にすればピクセル数は4分の1になります。その効果を実測したのが下の表です。素材は1枚のスクリーンショット（1280 × 992、PNG で91.4KB）。品質を0.75に固定し、長辺だけを変えています。

長辺を1280から900に落とすだけで——600ピクセル幅で表示するページなら、ほとんどの人が違いに気づかない変更です——JPEG は元の76.3%から44.6%へ、WebP は43.5%から24.5%へ下がります。同じ削減を品質スライダーだけで得ようとすると、劣化がはっきり見える設定まで下げることになります。

実務的な順序はこうなります。

1. その画像が表示される最大サイズを決める。
2. 高精細ディスプレイを考えて、長辺をその約2倍にリサイズする。
3. そのあとで、はじめて品質をいじる。

品質設定は何をしているか

非可逆形式は、人の目が気づきにくい情報——とくに色の細かい変化。人間の視覚は色相より明るさにずっと敏感です——を捨てることで小さくします。品質の数値は、その捨て方の強さを決めます。同じ画像を等倍のまま、品質だけ変えた結果です。

2つのことが読み取れます。曲線は上が急で下が平ら——0.95から0.85でJPEGは3分の1減りますが、0.6から0.4では残りの5分の1しか減らず、しかもその最後の一段で劣化がはっきりします。そして WebP はすべての設定で JPEG より小さい。品質0.75なら、JPEG が元の76.3%のところ WebP は43.5%です。

目安としては、0.9以上は保存用、0.75〜0.85がウェブ用の定番、0.6〜0.75で空などのグラデーションにノイズが出はじめ、0.6未満はサムネイル専用です。

圧縮は元に戻せません。非可逆の設定で保存するたびに情報は永久に失われるので、同じ JPEG を編集して保存し直すたびに少しずつ劣化します。圧縮済みのコピーからではなく、常に元データから圧縮してください。

圧縮したのにファイルが大きくなるとき

上の品質表の1行目をもう一度見てください。品質0.95の JPEG は、元の PNG の144.6% です。「圧縮した」ファイルが1.5倍近くに膨らみ、しかも画質は落ちています。これは画像圧縮の最もありふれた誤用で、スクリーンショットや平坦なイラストを高品質 JPEG に通すと必ず起きます。

理由は、2つの形式が正反対の絵のために作られているからです。PNG は同じ色が続く部分を安く格納します——スクリーンショットはまさにそれでできています。JPEG はなめらかなグラデーションを前提にし、文字まわりの鋭いエッジにビットを費やします——スクリーンショットにはそのエッジしかありません。それぞれ設計どおりの絵を与えればどちらも優秀で、入れ替えるとどちらも劣悪になります。

では可逆で書き出せばよいかというと、それも答えになりません。

可逆の2つは、どちらも元より大きくなります。ブラウザの PNG エンコーダは正直ではあっても素朴で、元ファイルを作った最適化ツールほど詰めないためです。これはブラウザ内で処理することの実際の限界なので、はっきり書いておきます。すでに最適化済みの PNG を、このツールが可逆のまま上回ることはできません。できるのは、非可逆でずっと小さくすることと、寸法を落とすことです。

3つの表から出てくる実務的な結論はこうです。写真なら WebP か JPEG を選び、品質に触れる前にリサイズする。スクリーンショット・図表・文字や平坦な色を含むものなら PNG のままにするか WebP にし、品質ではなくピクセル数を減らす。

形式の選び方

WebPが最初に手を伸ばすべき既定値です。同じ体感品質で JPEG より小さくなり、透過にも対応し、現行のすべてのブラウザで表示できます。避ける理由があるとすれば、後工程のどこかに WebP を受け付けない仕組みがある場合だけです。

JPEGは最も安全な受け渡し形式です。画像を読めるものはすべて JPEG を読めます。透過を持てないため、このツールでは JPEG に変換する際、透明部分を白で塗ってから描画しています。そうしないと黒く出てしまうためです。

PNGは可逆圧縮です。スクリーンショット、ロゴ、グラフ、線画のように輪郭がはっきりしたものには、これが正解です。非可逆圧縮ではそうした輪郭がにじんで潰れます。逆に写真には向いておらず、置き換えた JPEG の数倍のサイズになることもよくあります。

端末内で処理するほうが理にかなっている理由

多くの圧縮サイトは、ファイルをアップロードし、サーバー上で処理し、ダウンロードリンクを返す仕組みです。それはあなたの画像の複製が他人のマシン上に存在したということであり、その事業者の保存方針、アクセス制御、そして過去の情報漏洩の履歴に委ねられたということです。旅行の写真なら問題にならないかもしれません。しかしパスポートの画像、診断書、未発表の製品写真なら、大いに問題になります。

ブラウザが画像のデコード・リサイズ・再エンコードを自前でこなせるようになって10年以上が経ちます。ファイルを外に送ることは、技術的に必要だったことは一度もありません。単に作る側にとって楽だっただけです。端末内での処理はアップロードの待ち時間も順番待ちもないぶん速く、誰かの通信費に由来するサイズ上限もなく、複数ファイルを一度に扱えます。