手早い答え：写真はJPEGへ、くっきりした縁や透過のあるグラフィックはPNGへ。 ほかに何も覚えられなくても、このルールで判断の90%は正しく片づきます。このページの残りはその理由を説明するので、際どいケースは自分で判断できるようになります。
重要なのはたった一つの区別
JPEGとPNGは、違う種類の画像のために作られました。
- JPEGは写真向けに調整された非可逆形式です。なめらかなグラデーション——肌、空、ピンぼけの背景——が得意で、目が無視する細部を喜んで捨てます。それが1200万画素の写真を2MBに収める仕組みです。
- PNGはフラットな色、くっきりした線、文字のために作られた可逆形式です。透過にも対応していて、これはJPEGにはまったくできません。ロゴ、アイコン、UIのスクリーンショット、グラフはPNGの領分です。
間違ったほうを使うと、すぐに気づきます。ロゴをJPEGで保存すると、くっきりした縁がグレーの「モスキートノイズ」で縁取られます。写真をPNGで保存すると、目に見える利点もなくファイルが5倍から10倍に膨らみます。
手早い判断ガイド
2つの問いを順に。
- 透過が必要か？ はいなら→PNG（またはWebP）。JPEGに透過はありません、以上。
- 写真か、グラデーションの多い写真的な画像か？ はいなら→JPEG。フラットな色、くっきりした文字、線画なら→PNG。
スクリーンショットは典型的な落とし穴です。写真の多いウェブページのスクリーンショットはJPEGのほうがよく圧縮でき、コードや表計算、UIのスクリーンショットはPNGならくっきり小さいままです。迷ったら両方試して比べましょう——というわけでツールの話へ。
それぞれの変換
間違った形式を持っていても、切り替えはたやすいものです。IMG.DIYの画像変換は、PNG、JPG、WebP、AVIFのあいだをブラウザ内で移し替えます。（注：ブラウザはCanvas経由でAVIFをエンコードできないので、AVIF出力はWebPにフォールバックします——ほぼ同じくらい小さく、どこでもサポートされています。）バッチまるごとを一度に変換できます。
最もよくある勝ち：デザイナーからPNGの写真のフォルダを渡された。JPGに変換すれば、目に見える劣化なしにフォルダが80%以上縮むのを見られます。
それぞれの形式を正しく圧縮する
形式選びは仕事の半分にすぎません。それでもファイルは小さくしたいものです。
- JPEG（とWebP）： 品質スライダーを使います。75〜85の範囲は、ほとんどの写真で見た目に劣化なく、サイズを大きく削ります。
- PNG： 可逆なので品質スライダーはありません。代わりに色数を減らします。ほとんどのPNGは許された数よりずっと少ない色しか使っていないので、256色パレットに減色すると、見た目の変化なしに60〜80%節約でき、しかも透過はそのまま保たれます。
IMG.DIYの画像圧縮は、投入した形式に応じて正しい方法を自動で適用し、元より大きなファイルを決して出力しません。JPGとPNGが混在したフォルダをバッチ処理すれば、それぞれに必要な処理が施されます。
WebPはどうなの？
触れておく価値があります。WebPは両方の仕事をこなします。JPEGのように写真を圧縮し、かつPNGのように透過に対応し、たいていどちらより小さいサイズで。あなたの読者が現代のブラウザを使っているなら（今やほぼ全員です）、WebPへの変換がしばしば最良の一手です。とても古いソフトに対応しなければならない場合だけ、JPEGやPNGのフォールバックを残しましょう。
結論
写真→JPEG。ロゴ、アイコン、文字、透過→PNG。圧縮と透過の両方、あるいは可能な限り小さなファイルが必要→WebPを検討。そのうえで、形式に合った方法で圧縮します。ここのどのステップも完全にブラウザ内で動きます。何もアップロードされず、初回訪問後はツールがオフラインで動きます。