PNG・JPEG・WebP・AVIF：画像フォーマットを意図的に選ぶ

ロスレス形式はすべてのピクセルを正確に保存し、ロッシー形式は目にほとんど見えない細部を捨てて劇的に小さいファイルを得ます。選択は品質へのこだわりではなく、ファイルの用途の問題です。再編集するマスターか、一度だけ出荷する納品物か。

ブラウザパイプラインの正直な注意点がひとつ。Canvas エンコーダーにはロスレス WebP のスイッチがないため、ローカルツールで「ロスレス出力」は実質 PNG を意味します。偽のロスレス段を出すワークスペースは、自分の正直さについて何かを物語っています。

• ロスレスは全て保持ロスレス（PNG、および WebP・AVIF のロスレスモード）：デコードすれば元のピクセルがビット単位で再現され、何度開いて保存し直しても劣化しません。
• ロッシーは細部を使うロッシー（JPEG、および WebP・AVIF のロッシーモード）：エンコーダーは人間の視覚をモデル化し、気づかないと予測した情報を捨てます。その削減は永続的で、後から剥がせる層ではありません。
• マスターと納品物実務上の分け方：マスターはロスレスで保持し、納品物はロッシーで出荷し、ロッシーな書き出しを次の編集のソースにしないこと。

圧縮形式には得意分野があります。JPEG のコサイン変換は滑らかな写真のグラデーションが得意でシャープなエッジを壊し、PNG の deflate は平坦な色領域と正確な線が得意でノイズの多い写真を膨らませます。WebP と AVIF は動画コーデックの技法を借りて、どちらもそこそここなします。

間違った組み合わせはどちら向きにも高くつきます。写真の PNG は同等の JPEG の 5〜10 倍の重さになり得る一方、JPEG で保存したロゴは光輪が出て、品質をいくら上げても完全には消えません。

• 写真写真とグラデーション：適度な品質の JPEG は PNG より劇的に小さく、納品サイズでは損失が見えません。まさにロッシー形式のためにある仕事です。
• フラットなグラフィックロゴ、アイコン、UI スクリーンショット、線画：平坦な領域とシャープなエッジは PNG で完全に圧縮され、JPEG は硬い輪郭の周りに目に見えるリンギングを残します。
• 混合コンテンツ写真入りのスクリーンショットのような混合コンテンツ：両方を試してください。WebP は往々にして二つの旧形式の中間に収まりますが、決めるのはラベルではなくピクセルの構成です。

レイアウトで背景を透かす必要があるなら、フォーマットはアルファチャンネルを持たなければなりません。PNG・WebP・AVIF はすべて透過をサポートし、JPEG はしません。単色背景への平坦化は任意ではなく必須です。

• アルファはピクセル単位アルファチャンネルは色に加えてピクセルごとの不透明度を保持し、ロゴが白い矩形の上ではなく任意の背景の上にきれいに置けるのはそのおかげです。
• JPEG は平坦化する透過 PNG を JPEG に変換すると、アルファは単色の下地に置き換わります。その下地色はピクセルに永続的に焼き付くため、意図的に選んでください。
• 下地色を選ぶ画像フォーマット変換はこの平坦化を明示し、使う背景色を尋ねます。後からレイアウトで気づくのではなく、トレードオフが最初から明確です。

WebP は現行のすべてのブラウザでデコードできます。AVIF は現行の Chrome・Firefox・Safari でデコードできますが、古いブラウザや一部の下流ツールではできません。対応はフォーマットではなく出力先の属性です。納品セット全体を決める前に、実際のパイプラインを確認しましょう。

Web 納品の標準的な答えはフォールバックチェーンです。picture 要素で AVIF や WebP に JPEG または PNG のフォールバックを添えれば、モダンなブラウザは削減の恩恵を受け、それ以外もちゃんと描画されます。

• 出力先が決めるエンコード対応はデコードに遅れます。WebP を表示できても Canvas でエンコードできないブラウザがあるため、変換ツールは想定ではなく能力のプローブが必要です。
• エンコードはプローブが必要画像フォーマット変換はまさにそのプローブを事前に実行し、エンコードが欠けている環境では WebP 書き出しを無効化します。.webp という名前の PNG を黙って渡すことはしません。
• 正直な AVIF 対応AVIF 入力はブラウザが実際にデコードできる場合のみ受け付けられます。できない場合、ワークスペースはその旨を告げ、ファイル署名を信用する代わりに先に PNG か JPEG へ書き出すよう求めます。

ロッシーな保存のたびに、すでに近似済みの画像が再量子化され、 artifact が積み重なります。同じ写真の 3 回目の JPEG 保存は、同じ品質設定でも 1 回目より目に見えて悪化します。変換は一度だけ、パイプラインの最後に、手元にある最良のソースから行いましょう。

累積の法則は操作順序も決めます。リサンプルも再エンコードもそれぞれ独立した損失イベントなので、いちばん安いパイプラインはロッシーなステップがいちばん少ないものです。

• 変換は一度ロスレスのマスターで編集し、ロッシーなコピーの書き出しを最後のステップにする。途中のロッシー保存はどれも取り消せない世代の劣化です。
• 副作用Canvas 再エンコードは ICC カラープロファイル、EXIF メタデータ、アニメーションも落とします。GIF は最初のフレームとして取り込まれ、ワークスペースはファイルの横でその旨を明示します。
• 原本を保持変換後も原本を保持してください。変換済みファイルは納品物であってマスターではなく、逆変換で使った細部が戻ることはありません。

バイト数が物語るまで、フォーマットの助言は仮説にすぎません。画像フォーマット変換は生成されたバイト数を前後でそのまま報告し、JPEG と WebP の品質は 0.50〜0.95（デフォルト 0.85）で調整できます。トレードオフは伝承ではなく画面上の数字です。

• 実ファイルで変換サンプルではなく実ファイルで変換する。バイト削減は実際の内容に依存し、レポートは新旧のサイズを並べて見せます。
• ピクセルがレバーそれでもバイトが予算に収まらないとき、次のレバーはピクセル数です。幅と高さを半分にすればピクセルはおよそ 4 分の 3 減り、フォーマット変更より大きな削減になることも珍しくありません。
• 既知の上限両ツールとも最大 12 MiB、片辺 8,192 ピクセルまでのファイルを受け付け、リサイズツールはアスペクト比を固定して一方の寸法をもう一方に追従させられます。