AVIFのロゴをJPGに変換したら背景が白くなった？あなたのミスではない——JPGの仕様上の問題だ。JPGはアルファチャンネルを持たないため、透過データを保存できない。PNGなら保存できる。正しい変換方法を説明する。
JPGが透過背景を壊す理由
JPGは1992年に写真向けに設計された。透過は仕様に含まれていない。透過ありのAVIFをJPGに変換すると、エンコーダーは被写体の背後を何かで埋めなければならない——たいていは白、場合によっては黒だ。回避する方法はない。
PNGは異なる設計思想で作られた。フルアルファチャンネルをサポートしており、それがロゴ、アイコン、UIパーツ——透明な背景が必要なものすべて——の標準フォーマットになった理由だ。
AVIFをPNGに変換する手順
ステップごとに：
- AvifKitのAVIF→PNGコンバーターを開く
- AVIFファイルをウィンドウにドラッグする
- 処理は1〜2秒（ローカル処理なのでファイルはデバイスの外に出ない）
- PNGをダウンロードする
- 背景の透過が保持されていることを確認する
透過が保たれる理由：
AvifKitはWebAssemblyを使ってブラウザ内でファイルを処理する。アルファチャンネルのデータはAVIFから直接読み取られてPNGに書き込まれる——サーバーなし、再圧縮なし、データの欠落なし。
アルファチャンネルの仕組み
AVIFもPNGもアルファチャンネルによる透過をサポートしているが、扱い方が違う。AVIFはAV1コーデックの圧縮を使って透過を保存する——コンパクトだが、ソフトウェアの対応は限られる。PNGはロスレスの生データとして保存する——ファイルは重くなるが、どのアプリでも開ける。
AVIFからPNGへの変換は、サイズと互換性のトレードオフだ。PNGは2〜4倍重くなるが、Photoshop、Illustrator、PowerPoint、あらゆるブラウザ、あらゆるCMSで問題なく開ける。
この変換が必要になる場面
ロゴやブランド素材
AVIFでロゴを受け取った場合、デザイナーに送ったりスライドに貼り込む前にPNGに変換しておくといい。デザインツールのAVIF対応はまだ安定していない。
ECサイトの商品画像
ほとんどのECプラットフォームはまだAVIFに対応していない。背景なしの商品写真には、透過PNGが無難な選択だ。
アイコンとUIパーツ
デザインシステムがアイコンにPNGを使うのは、まさに汎用性のためだ。プロジェクトがPNGを前提にしているなら、それに従えばいい。
ドキュメントやチュートリアル
スクリーンショットに透過オーバーレイを重ねる場合、PNGのほうが安全だ。画像がどこで表示されるか分からないときは特に。
よくある質問
JPGは透過をサポートしていますか？
サポートしていない。JPGにはアルファチャンネルがない。透過画像をJPGに変換すると、背景は単色（白か黒）で塗りつぶされる。そのデータは復元できない。
複数のAVIFをまとめてPNGに変換できますか？
AvifKitのコンバーターに複数ファイルを一度にドラッグするだけだ。すべて処理されてzipでダウンロードできる。各ファイルの透過も保持される。
PNGはAVIFより大幅に重くなりますか？
なる——通常2〜4倍。AVIFの高圧縮はPNGのロスレス形式には引き継がれない。これがトレードオフだ。ユニバーサルな互換性を得る代わりに、ファイルサイズを払う。
PhotoshopはAVIFの透過を開けますか？
Photoshop 2024でAVIFの部分サポートが追加されたが、特定のカラープロファイルや透過モードでは不安定だ。最初にPNGに変換するほうが確実で手間も省ける。
まとめ
透過を含む画像の答えはPNGだ。JPGでもAVIFでもなく——PNG。AvifKitはすべてブラウザ内で変換を処理するため、アルファチャンネルはきれいに保持され、ファイルはデバイスの外に出ない。