画像変換

3つの形式の選び方

PNGは可逆圧縮です。すべてのピクセルが入力したとおりに戻り、完全なアルファ透過に対応し、単色の平坦な領域を非常によく圧縮します。そのため、スクリーンショット、図、ロゴ、線画、文字を含むもの、透過が必要なものに適しています。一方、写真には不向きです。可逆圧縮では取り除けるものがほとんどなく、必要な大きさの数倍のファイルになってしまいます。

JPGは非可逆圧縮で、写真のために作られています。目が気づきにくい細部、特に細かな色の変化を捨てることで、階調の連続した画像を大きく縮小します。透過にはまったく対応しておらず、くっきりした輪郭の扱いも苦手です。JPGにした文字や線画には目に見えるにじみが生じ、どんな画質設定でも完全には消せません。

WebPはその両方をこなします。非可逆のWebPは同程度の画質でJPGより一般に25〜35%小さくなり、可逆のWebPはPNGより約4分の1小さく、JPGと違って透過にも対応しています。現在はすべてのブラウザが対応しており、JPGを選ぶ主な理由として残っているのは、一部の古いデスクトップソフトや印刷のワークフローがまだWebPを受け付けないことくらいです。

画質スライダーが実際にしていること

JPGと非可逆のWebPは、画像をブロック単位で変換し、その結果を量子化することで機能します。大まかな構造は正確に、細かなディテールは近似的に残すということです。画質の数値は、その丸めをどれだけ強く行うかを決めます。何かに対する割合ではなく、同じ数値でもエンコーダーによって意味が異なります。

実際に役立つ範囲は狭いものです。90を超えると、ほとんど誰にも見分けられない違いのためにファイルが急に大きくなります。60を下回ると、空のようななめらかなグラデーションにブロック状のノイズが、くっきりした輪郭の周りにリンギングが現れ、劣化がはっきり目に見えます。Web用の写真なら75〜85あたりが一般的なちょうどよい値で、数値を信じるのではなく、出力と元画像を等倍で見比べて選ぶのが正しい方法です。

もう1つ知っておきたいのが世代劣化です。非可逆で保存し直すたびに少しずつ情報が失われ、その損失は積み重なります。JPGを開いて少し編集して保存するのを10回繰り返すと、目に見えて劣化します。常に以前に書き出したファイルではなく元画像から保存し直し、画像を修正する可能性があるなら可逆形式の原本を残しておいてください。

再エンコードで失われるもの

変換では画像をピクセルにデコードし、そのピクセルから新しいファイルを書き出すため、画像データではなくメタデータだったものはすべて失われます。カメラの機種、レンズ、撮影日時、GPS座標を含むEXIF、IPTCのキャプションや著作権の欄、サムネイル、元のソフトウェアが付けた編集履歴などです。

これはたいてい歓迎すべきことです。スマートフォンで撮ったばかりの写真には撮影場所の正確な座標が入っていることが多く、公開する前に削除するのは賢明な習慣です。一方、著作権の欄や撮影日時が必要な場合は困るので、どちらかが重要なら元画像を残しておいてください。

注意が必要なケースが1つあります。回転情報は再エンコード前に読み取って適用するので、ビューアーによっては横向きに表示されていた縦長の写真も、きちんと縦向きで出力されます。しかし埋め込まれたICCカラープロファイルは引き継がれないため、Display P3のような広色域の写真はsRGBとして扱われ、色がわずかに変わります。普通のWeb用画像なら見分けがつきませんが、色が重要な作業では、プロファイルを管理できるツールで変換してください。

変換ではできないこと

可逆形式に変換しても、何かが元に戻るわけではありません。PNGとして保存したJPGは、JPGがすでに持っていた劣化をすべて抱えたまま、それ以上劣化させずにずっと大きなファイルに保存するだけです。強い圧縮を経た画像なら、その損傷はもうピクセルの中にあります。

形式を変えても画像の寸法は小さくなりません。4000ピクセルの写真をWebPに変換しても幅は4000ピクセルのままです。Webページ用にファイルを小さくしたいなら、実際に表示される大きさにリサイズするほうが、どの形式を選ぶよりもはるかに効果があります。この2つの操作は相性がよく、先にリサイズしてからエンコードします。その前半を担うのが画像リサイズツールです。

JPEGが実際に捨てているもの

JPEGは8×8ピクセルのブロック単位で処理します。各ブロックは離散コサイン変換によって周波数係数の集まりに変換されます。1つは平均的な明るさを表し、残りは段階的に細かいディテールを表します。そしてこれらの係数は量子化テーブルで割られ、丸められます。高周波の係数はたいてい0に丸められ、0の並びは非常によく圧縮できます。この丸めこそが損失です。

その前段として、画像はRGBから輝度チャンネル1つと色チャンネル2つに変換され、色チャンネルは通常、縦横それぞれ半分の解像度で保存されます。これが4:2:0と表記されるクロマサブサンプリングで、人間の視覚は色のディテールよりも明るさのディテールのほうがはるかによく見分けられるという性質を利用しています。

アーティファクトはこの2つの工程で説明できます。なめらかな空に出るブロックノイズは、0に丸められる係数が多すぎて8×8の格子が見えてしまった状態です。白地に赤い文字を置いたときに縁に出る色のにじみはクロマサブサンプリングによるもので、輝度では輪郭が鋭いのに色ではぼやけているために起こります。品質設定をどう変えてもこのにじみは完全には消えません。だから文字を含む画像はPNGかWebPに向いているのです。

この3つ以外のフォーマット

AV1ビデオコーデックから派生したAVIFは、低〜中品質の領域でWebPよりもかなり高い圧縮率を発揮し、広色域と透明度にも対応していて、現行のブラウザはすべてサポートしています。ただしエンコードは遅く、極端に低品質のAVIFはディテールがブロックではなくのっぺりした蝋のような質感に均されるため、同等のJPEGより悪いと感じる人もいます。

HEICは最近のiPhoneが既定で生成する形式です。効率は高いものの特許の制約があり、ブラウザでは表示できないため、スマートフォンで撮った画像はウェブサイトに載せる前に変換が必要になることがよくあります。SVGはそもそもラスター形式ではなく、図形を記述するマークアップです。そのためロゴやアイコンをどんなサイズでも扱えて理想的ですが、写真にはまったく使えません。

GIFが生き残っている理由は1つ、惰性です。色は256色しかなく、アルファチャンネルと呼べるものもなく、アニメーションでは同等の動画の数倍のファイルサイズになります。MP4やWebMなら同じことをはるかに小さいサイズで実現できます。

ページ上で画像を配信する

フォーマットの選択よりも、適切な寸法で配信することのほうが重要です。4000ピクセルの写真を600ピクセルの段組みに表示すれば、コーデックが何であれバイトの大半は無駄になります。srcset属性を使えばブラウザが複数の幅から選べるようになり、sizesで実際にレンダリングされる幅を伝えられます。この2つの組み合わせは、たいていどんな再エンコードよりも大きな削減をもたらします。

picture要素はさらに一歩進んで複数のフォーマットを提示できるので、ブラウザは可能ならAVIF、だめならWebP、最低限のフォールバックとしてJPEGを選びます。この組み合わせを手作業で用意するのは面倒なので、画像CDNやフレームワークの画像コンポーネントに生成させます。

どの画像にも設定しておく価値のある属性が2つあります。1つはwidthとheightの明示で、ブラウザが場所を確保してくれるため、画像の読み込みでページがずれなくなります。もう1つはファーストビューより下にある画像へのloading=lazyです。最初に見える画像をlazyにしてはいけません。表示を遅らせることがそのままLargest Contentful Paintの悪化につながるからです。

カラープロファイル、透明度、印刷

ICCプロファイルは、ファイル内の数値をどう解釈すべきかを表示側に伝えるものです。最近のスマートフォンで撮った写真にはDisplay P3のタグが付いていることが多く、このタグが失われると同じ数値がsRGBとして読まれるため、彩度の高い色がすべてずれてしまいます。この変換はいったんピクセルにデコードして新しいファイルを書き出すので、プロファイルは引き継がれません。通常のウェブ用画像なら問題ありませんが、色が重要な用途では困ります。

透明度にも似た落とし穴があります。アルファチャンネルを持つPNGをJPEGに変換すると背景と合成されるので、アンチエイリアスのかかった輪郭の周りに黒や白のふちが出るのが定番の結果です。WebPとAVIFはアルファチャンネルを保持できるため、透明度が必要な場合の変換先はこちらになります。

印刷はまったく別の工程です。画面は加法混色のRGB、印刷機は減法混色のCMYKで、変換結果はインク、紙、印刷機のプロファイルによって変わり、画面上の鮮やかな色には印刷できる対応色が存在しないことも珍しくありません。ブラウザ上のツールが示すCMYK値はあくまで近似で、目安にはなっても校正には使えません。

メタデータ、プライバシー、来歴

写真はピクセル以外にも多くの情報を持っています。EXIFにはカメラとレンズ、露出設定、撮影日時、そして多くの場合は撮影地のGPS座標まで記録されています。SNSは通常アップロード時にこれらを削除しますが、メールで送ったファイル、チケットに添付したファイル、自分のサイトにアップロードしたファイルには、たいていそのまま残ります。

メタデータの削除は、このツールを含めたあらゆる再エンコードの既定の挙動です。多くの場合はプライバシー上ありがたい結果ですが、著作権表示やキャプション、撮影日が重要だった場合には困ります。それらが記録として必要なら、オリジナルを保管し、変換後のコピーはあくまで派生物として扱ってください。

1つだけ意図的に引き継ぐ価値のある項目があります。回転情報です。カメラはピクセルを回転させる代わりに回転をフラグとして保存するため、縦向きの写真がそのフラグを無視するソフトウェアでは横倒しに表示されることがあります。このツールのように再エンコード前に回転を実際に適用しておくことが、変換後のファイルがどこでも正しく表示される理由です。