透明な背景を残せる保存形式：PNG・WebP・AVIF・GIF・JPGを比較

作成 2026-10-27 · 更新 2026-10-27 · 運営者（個人）

背景を消したロゴやステッカーを保存してアップロードしたら、白い四角が出てしまったことはありませんか。透明な背景を残すには、PNG・WebP・AVIFのどれかで保存してください。JPGは透明を持てないので、透明な部分が白で塗られます。同じ透明な画像を5つの形式で保存し、透明なピクセルが実際にいくつ残るかを数えてみました。

試した画像

900×600のセールバッジを自作しました。背景は完全に透明で、バッジの下にはやわらかい影、右下には半分透けた青い円があります。完全に透明なピクセルが278,048個、半透明のピクセルが96,064個です。元のPNGは45.2KBで、このファイルをミルキットの形式変換と同じ処理で形式別に保存し、開き直して透明度の値を数えました。

形式ごとに何が残った？

PNGは27.2KBで、完全に透明な278,048個と半透明の96,064個が元とまったく同じに残りました。透明度の差は0です。WebP画質85%は15.0KBとPNGより小さいのに、透明度は元とまったく同じでした。色は非可逆圧縮ですが、透明度はそのまま守られています。

AVIF画質85%は8.6KBで一番小さくなりました。完全に透明なピクセルは278,041個でほぼそのまま、透明度の差は平均0.06、最大13（0〜255の目盛り）でした。縁にごくわずかな差が出ますが、目で見て分かるほどではありません。ただしAVIFは初めて使うときに処理用のファイルをダウンロードし、古いアプリでは開けないことがあります。

GIFは22.3KBで、半透明のピクセルは0個になりました。GIFはピクセルごとに「透明」か「完全に見える」かの2つしか表せません。そのため、やわらかい影はバッジのまわりの黒い縁に変わり、半分透けていた青い円は濃い青になりました。ミルキットのGIFの説明にも、半透明には対応していないと書かれています。

JPG画質85%は20.3KBで、透明なピクセルは0個でした。透明だった角はRGB 255/255/255、つまり白になり、透明度54だった影のピクセルは白い背景と混ざって灰色（200/200/200）になりました。保存形式でJPEGを選ぶと「透明な部分は白くなります。」という案内が表示されます。

どの形式を選べばいい？

どこに使うか分からないなら、PNGが一番無難です。元のまま残せて、ほとんどのアプリで開けます。ウェブサイトやブログのようにWebPを受け付ける場所なら、WebPはPNGの半分ほどの容量で透明度を守りました。容量がとても大事で、送り先がAVIFに対応していれば、AVIFも選択肢になります。

GIFは、縁がくっきりしたアイコンのように半透明がない画像だけに使うのがおすすめです。影やぼやけた縁があると、今回の試験のように形が粗くなります。

ミルキットで保存する手順

1. 形式変換を開き、透明な背景の画像を追加します。
2. 保存形式でPNGかWebPを選びます。WebPを選ぶと「透明な背景を保ちます。」という案内が出ます。
3. プレビューの結果側で市松模様が透けて見える所は、透明なまま残っています。JPEGに切り替えると、同じ場所が白に変わるのがすぐ分かります。
4. 保存したファイルを実際に使う場所で開き直し、暗い背景の上でも白い縁がないか確認します。

圧縮で容量を合わせるときは？

圧縮は、開いた時点で保存形式にJPEGが選ばれています。提出用の写真に合わせた初期設定なので、透明な画像をそのまま入れると背景が白になります。透明なロゴの容量を合わせるときは、先に「Web用 · WebP」を押すか、保存形式をPNGに変えてから目標を入れてください。

どうしてもJPGで出す必要があるときは？

ミルキットのJPG変換は、透明な部分を必ず白で塗ります。ほかの背景色を選ぶ設定はありません。白いページに置く画像ならそのままで大丈夫です。暗い背景に置く画像なら、JPGの代わりにPNGやWebPを受け付けるか先に確認してみてください。

いろいろな場所で使うロゴは、透明なPNGを1枚、元データとして残しておきましょう。白いサイトのヘッダーと暗いSNSのバナーのように背景が違う場所ごとに、その元データから必要な形式のコピーを作れば、JPGのコピーをPNGに戻して使う手間がなくなります。

MiruKitで実際に確認した結果

透明な背景と半透明の影がある900×600のPNG（完全に透明278,048ピクセル、半透明96,064ピクセル）を公開中のprocessImageで形式別に保存し、開き直してアルファ値を数えました。

実測の元データを見る