PNGをWebPに変換する理由（と、あえてしない場面）

デスクトップに to-shrink というフォルダを作ってあります。何年ものあいだ、ここはスクリーンショットの墓場でした。ダッシュボードや作りかけのモックアップを撮った2MBのPNGが、2MB分の画面なんて誰も欲しがっていないのに、そのまま人に送られていく。ある日ふと中を開いて計算してみたら、その週に自分がリリースしたアプリより容量が大きかったのです。これがPNGの静かなところで、素晴らしいフォーマットなのに驚くほど場所を食う。それでいて、たいていは誰も気づかない。回線は安いし、ファイルは「ちゃんと開ける」ので。

だから、もっと早く誰かに言ってほしかった話を、ここで書いておきます。PNGがウェブに向かうなら —— つまり「編集される」のではなく「見られる」場所へ行くなら —— ほぼ間違いなくWebPにしておいたほうがいい。

PNGが本当に得意なこと

PNGは可逆です。入れた画素はそのまま、正確に、毎回そっくり返ってきます。これはマスターファイルにとっては本物の美点です。デザインツールがPNGで書き出すのも、スクリーンショットがPNGなのも、くっきりした輪郭や透明が絡むものがPNGを選ぶのも、そのため。可逆ということは、開いて、いじって、また保存する、これを100回繰り返しても何一つ劣化しないということです。

問題は、「すべての画素を完璧に保存する」という約束の代金をバイトで払っている点です。写真をPNGで保存すると、グラデーションもセンサーノイズも、近似してしまえば目には絶対わからないような微妙な色の揺らぎまで、律儀に記録します。誰にも見えないディテールに、定価をまるごと払っているわけです。

WebPにできて、PNGにできないこと

WebPはGoogleが「もっといいフォーマットを作ったらどうなる？」という素朴な問いに出した答えでした。PNGにできない二つのことをやってのけます。一つは、必要なときに非可逆で圧縮できること。JPEGのように、知覚できない部分を捨てる。ただしもっと賢く。そしてもう一つ、それをやりながら完全なアルファチャンネルを保てること。この二つ目が地味な奇跡です。長いあいだ「透明か、小さいファイルか、どちらか一方を選べ」という取引でした。WebPは両方を同時に成立させます。

実際のところ、写真やスクリーンショット中心のPNGを適切な画質で変換すると、たいてい60〜90%小さくなります。10%ではありません。1.8MBのスクリーンショットが約250KBになり、並べて見ても、どちらがどちらか見分けがつかない。この検証は、白状すると認めたくないくらい何度も自分で試しました。今度こそWebPのボロを出してやると意気込んで。でも、一度も見抜けたためしがありません。

信じるようになったきっかけの比較

先月まとめて変換したぶんの、ざっくりした数字です。

ロゴを見てください。ほとんど動いていません。そして、じつはこの脚注こそが肝心なところなのです。

あえて変換しない場面

シンプルな図版 —— 色数が少なく、平坦で、輪郭がくっきりしたもの —— は、まさにPNGが圧縮するために作られた対象で、この手のものはPNGが何にも負けないくらいうまくこなします。2色のアイコン、線画の図、QRコード。こういうものはPNGのままにしておく。あるいはベクターデータがあるなら、いっそSVGで配信したほうがいい。WebPにしても、これらのファイルが悪くなることはありませんが、目に見えて良くなることもなく、意味のない工程を一つ増やしただけになります。

もう一つ変換しない場面が、マスターです。そのものの「唯一の」コピーには、絶対に手を触れません。WebPの非可逆モードは一方通行の扉で、落としたディテールは戻ってこない。だから、絶対に破らないルールを一つだけ決めています —— 公開するコピーを変換し、編集する元は手元に残す。 自分の環境では、これは文字どおりファイル2つの話です。PNGはプロジェクトフォルダに置いたまま、WebPをサイトへ持っていく。安い保険で、これで後悔したことは一度もありません。

「でも本当にどこでも動くの？」

かつてはこれが本当の反論でしたが、もうそうではありません。人が実際に使うブラウザは、2020年ごろからすべてWebPに対応しています。Chrome、Safari、Firefox、Edge、どれもです。メールクライアントはいまだにまちまちで、古い業務ソフトの中には妙な振る舞いをするものもあるので、ニュースレター用なら今でもJPEGを選びます。でも、開かれたウェブに向けてなら？ フォールバックなしでWebPを配信するのは、もう何年も前から勇気のいる選択ではなくなっています。

自分ならこうする

このサイトにPNG→WebP変換ツールを作った正直な理由は、スクリーンショットを縮めるためにそのへんのウェブツールへドラッグして、そのあと自分のファイルがどこへ行ったのか結局わからない、という状態にうんざりしたからです。だからおすすめするのは、退屈でプライベートなやり方 —— 自分の端末のブラウザ内で変換し、ファイルは端末の外へ一切出さない。PNGを置いて、サイズの列がストンと下がるのを眺めて、WebPをダウンロードする。

とはいえ、ツールは本質ではありません。本質は習慣のほうです。「編集はPNG、配信はWebP」が体に染みついてしまえば、2MBのスクリーンショットを人に送ることもなくなり、ページはただで速くなり、デスクトップのあの to-shrink フォルダはようやく空のままでいてくれます。自分のフォルダは、もう1年ほど空です。ささやかな勝利ですが、ありがたく受け取っておきます。