PNG、JPG、WebPの違い

一行でまとめると

写真にはJPG、くっきりした輪郭、文字、透明部分があるものにはPNG、行き先がウェブページで開く環境を自分で管理できる場合はWebPを使います。ほかに何も覚えていなくても、このルールは圧倒的に多くの場合で正しいでしょう。

JPGが今もあちこちにある理由

JPGは1992年に、ある具体的な着眼に基づいて設計されました。人間の目は色よりも明るさにはるかに敏感で、細かい部分が多い領域の細部にはほとんど気づきません。JPGは、あなたが最も見落としやすい情報を捨てるため、写真は10分の1のサイズに縮んでも、同じに見えます。

その同じ工夫のせいで、JPGはそれ以外のあらゆるものが苦手です。白地に黒のくっきりした文字は、この形式が最も苦手とする境界にあたるため、JPGで保存したスクリーンショットは、すべての文字の周りにくすんだ縁取りが出ます。圧縮が壊れているのではなく、設計されたとおりのことを、想定されていなかった内容に対して行っているのです。

PNGがある理由

PNGは可逆です。入れたすべてのピクセルが、何度開いて保存し直しても、ビット単位でそのまま戻ってきます。また、本物のアルファチャンネルを持つので、画像の一部を背景色で塗りつぶすのではなく、本当に透明にできます。

代償はサイズです。PNGはパターンと繰り返しを見つけて圧縮するため、均一な色、ロゴ、図、スクリーンショットにはうまく働きますが、すべてのピクセルが隣のピクセルとわずかに異なる写真ではうまく働きません。写真をPNGで保存すると、見た目の利点がないまま、JPGの5倍のサイズになることも珍しくありません。

WebPが本当に勝つ場面

WebPは両方の役割をこなします。同じ見た目の品質ならおおむねJPGを上回る非可逆モードと、透明にも対応しておおむねPNGを上回る可逆モードがあります。PNGと比べた一般的な削減率は、30%から70%の間です。

問題はブラウザではありません。現在のブラウザはすべてWebPを読み込めます。問題はそれ以外のものです。古いデスクトップソフト、一部のプリンター、一部の企業の文書システム、そしてファイルを開くことを単に拒否する、数多くのツールです。ウェブに公開するならWebPを使ってください。何で開くか分からない相手にファイルを送るなら、使わないでください。

ほとんどの人が陥る落とし穴

JPGをPNGに変換しても、品質は回復しません。ファイルはその時点から先可逆になり、それ以上の劣化は止まります。しかし、元のJPGが捨てた細部は永久に失われており、PNGはすべての圧縮アーティファクトも忠実に保存します。結果は、まったく同じ欠点を含んだ、ずっと大きなファイルです。

ここから得られる実用的な教訓はこれです。画像を繰り返し編集するなら、PNGで作業し、最後に一度だけJPGに書き出します。非可逆形式での中間保存は、そのたびに劣化を積み重ねます。

透明部分はどうなるか

透明を扱えるのはPNG、WebP、GIF、ICOだけです。これらをJPGやBMPに変換すると、その領域は何かで埋めなければなりません。形式に「ここには何もない」と記録する場所がないためです。選ぶ色はツールによって異なり、驚くほど多くが黒を選んでロゴを台無しにします。このサイトは意図的に白で埋めますが、これがほとんどの場合、人々が期待するものです。

実際に使うには、ウェブ用の軽い画像ならPNGをWebPに変換、可逆なコピーが必要ならJPGをPNGに変換、形式を変えずに画像を圧縮することもできます。