PNGとJPG — どちらを使う？

まずこれで判断

写真・人物・旅行・カメラっぽい見た目 → JPG（自分のサイトならWebPも可）。

ロゴ・アイコン・UIのスクリーンショット・透過が要る重ねもの → PNG（またはアルファ付きWebP）。

提出先がJPGなのにファイルに透過がある → 先に背景色を塗ってから変換。PNG→JPGをそのまま任せると、塗りが期待どおりにならないことがあります。

PNGが向くとき

PNGはよくある用途では可逆です。単色・硬い輪郭・文字に向きます。設定画面のスクリーンショットも、拡大しても読みやすいままです。

ステッカー、透かし、写真の上に載せるロゴには透過（アルファ）が欠かせません。JPGには「透ける」情報を入れる場所がありません。

代償は写真の容量です。夕焼けのビーチをPNGで保存すると、見た目が近いJPGの数倍になることがよくあります。

JPGが向くとき

非可逆圧縮は、写真のようななだらかな階調向けです。メール、SNS、プリントキオスク、数えきれないアップロードフォームがJPEGを前提にしています。

透過はありません。背景を決めずに透過を潰すと、半透明の縁が濁ったグレーや真っ黒になります。ファイルの不具合ではなく、形式の限界です。

あとから何度も編集するデザインの保存先としてもJPGは弱いです。行き来するならPNG・TIFF・デザインソフトの原本を残してください。

透過PNG→JPG：書き出す前に塗る

JPEGに透過はありません。透過部分はすべて不透明な色になります。書類なら白、スライド上の明るいロゴなら濃いグレーやブランドの紺、などがよく使われます。

透過PNG→JPGで塗りつぶし色を自分で選び、自動変換に任せない方が安全です。

書き出し後に縁がグレーなら、PNG側にソフトシャドウやアンチエイリアスの暈けが残っていた可能性があります。デザインアプリからフラットに書き出すか、切り抜きをきつめにする方が早いこともあります。

WebPの位置（PNG/JPGの代わりという話ではない）

自分で管理するサイトでは、WebPが「軽い写真」と「透過アイコン」を一つの形式でまかなうことが多いです。詳しくはWebP vs AVIF vs JPGへ。

PNG圧縮はWebPを勧めています。ブラウザでPNGを再保存しても容量はあまり減らず、形式を変えた方が効くからです。