1) アルファチャンネルとは何か
アルファチャンネルは各ピクセルの不透明度を保存します。RGB + Alpha = RGBA。アルファなし（JPEG）では、透明度をシミュレートする際に背景色とマットブレンドが発生し、ハローが生じます。
2) 形式比較
- PNG：ロスレス、広くサポート、ロゴに最適。大きなファイル。
- WebP：ロスレスまたはロッシー、良好な圧縮。Safari < 14ではサポートなし。
- AVIF：優れた圧縮、より遅いエンコード。ブラウザサポートが増加中。
- SVG：ベクター、スケーラブル、アイコンに最適。写真には不向き。
3) ハローとマットを避ける
エクスポート時にマット色を選択しないでください。アンチエイリアシングは透明ピクセルに対して事前乗算されたアルファを生成します。異なる背景でプレビューしてハローを検出します。
4) 選択チェックリスト
- ロゴ/アイコン：PNGまたはSVG。
- 写真：WebPロッシーまたはAVIF（サポートを確認）。
- アニメーション：WebPまたはAPNG。
- 最大互換性：PNG。
5) テストとプレビュー
白、黒、カラーの背景で視覚的にテストし、縁がきれいであることを確認します。複数のデバイスとブラウザで検証します。
6) 変換とツール
OrquiなどのローカルツールでPNG↔WebP↔AVIFを変換し、品質を保持します。
7) パフォーマンス
WebPとAVIFはPNGより小さいファイルサイズで、読み込みが速くなります。ネットワークと品質のバランスを取ります。