PNG・JPG・WebP — どれを使うべきか、変換方法と注意点まとめ

多くの解説記事はすぐ手順に入ります。「ファイルをアップロードして、変換を押して、ダウンロード」—30秒で終わる話です。でも本当に大切なのは、その前に正しい形式を選ぶこと。選び方を間違えると、ファイルサイズが無駄に膨らんだり、透過が消えたり、保存のたびに画質が劣化したりします。
まず形式を決める
余計な説明なしに、各形式の特徴をひとつの表にまとめました。
| 形式 | 向いている用途 | 透過 | 目安のファイルサイズ | ブラウザ対応 |
|---|---|---|---|---|
| PNG | ロゴ・スクリーンショット・アイコンなど、輪郭が明確なものやテキストを含む画像 | あり(アルファチャンネル) | 大きめ — 1200px のロゴで 200〜400 KB になることも | すべてのブラウザで対応 |
| JPG | 写真・グラデーション・とにかく軽さを優先したい画像 | なし | 小さめ — 同じ画像でも品質80なら 40〜80 KB 程度 | すべてのブラウザで対応 |
| WebP | Webで使う画像全般。画質を落とさずできるだけ軽くしたい場合に最適 | あり | 最も小さい — JPG と同等の品質で 25〜35% 程度軽くなるのが目安 | 主要な現行ブラウザはすべて対応。IE はすでに終了しているので問題になることはほぼない |
実際の選び方をざっくり言うと — 透過が必要な場合や、ロゴ・UIパーツのようにピクセル単位の精度が求められるなら PNG。WebP が使えない環境向けの写真なら JPG。Webサイトに載せる画像なら、基本は WebP で問題ありません。サイズの節約効果は実感できるレベルで、現行ブラウザなら表示上のトラブルもほぼありません。
よくある失敗のひとつに、「スクリーンショットを PNG から JPG に変換してサイズを減らそう」というパターンがあります。スクリーンショットはベタ塗りの色域とシャープなテキストを含むことが多く、まさに JPG 圧縮が最も苦手とする内容です。テキスト周辺にぼけが生じて、元の PNG より大きくなってしまうことすらあります。
Filuni での変換方法
Filuni の画像フォーマット変換ツールは、PNG・JPG・WebP の相互変換に対応しています。一度に最大10ファイルのバッチ変換も可能。アカウント登録不要、透かしなし、変換はサーバー側で処理され、完了後は自動削除されます。
- ツールを開いて画像をドロップします(複数可、最大10ファイル)。
- ドロップダウンから変換先の形式を選びます(JPG・PNG・WebP)。
- JPG に変換する場合は品質を設定できます(80 が標準的な目安。サムネイル用ならもう少し下げても構いません)。
- 「変換」をクリックしてダウンロードすれば完了です。
1枚なら1分もかかりません。商品写真を20枚まとめて変換する場合でも、2〜3分もあれば終わります。
よくある失敗パターン3つ
1. PNG を JPG に変換すると透過が消える
JPG にはアルファチャンネルがありません。透過背景の PNG — ロゴや切り抜き画像、アイコンなど — を変換すると、透明な部分が白か黒で塗りつぶされます。白背景のページでは気づかないこともありますが、ダークな背景に置いた途端に不自然な四角い枠が浮き上がります。透過が必要な場合は PNG のままにするか、透過に対応している WebP に変換しましょう。
2. JPG を JPG として再保存するたびに劣化する
JPG は非可逆圧縮を使っています。開いて編集して JPG で保存、を繰り返すたびに少しずつ品質が落ちていきます。これは蓄積するので、何度も編集する予定がある画像は PNG か WebP で保管しておき、最後に JPG へ書き出すのが正しい手順です。JPG をそのまま作業用のソースファイルとして使うのは避けてください。
3. WebP のブラウザ対応は十分だが、メールクライアントは別の話
2020年以降の主要ブラウザはすべて WebP に対応しており、表示上の問題はほぼありません。ただし、メールだけは例外です。Gmail を含む多くのデスクトップメールクライアントは、WebP をインラインで表示できません。ニュースレターやメールテンプレートに画像を使う場合は JPG か PNG を選んでください。
よくある質問
JPG を PNG に変換すると画質は上がりますか?
上がりません。PNG に変換しても、すでにあるピクセルデータをそのまま可逆圧縮のコンテナに入れ直すだけです。JPG の圧縮で生じたノイズや劣化はそのまま残ります。ファイルサイズが増えるだけで、見た目の品質は変わりません。JPG を PNG に変換する意味があるのは、これから何度も編集・書き出しを繰り返す予定がある場合(劣化の蓄積を防ぐ)か、透過レイヤーを追加したい場合に限ります。
WebP は JPG より常にサイズが小さいですか?
ほぼ常にそうです。同等の視覚品質で比べると、概ね 25〜35% 小さくなります。ただし 100px 以下の小さなサムネイルでは差が縮まり、大きくて細部の多い写真では差が広がる傾向があります。Webで使う画像であれば、WebP がほぼ正解です。JPG を選ぶ理由があるとすれば — メール向け、古いCMSとの互換性、クライアントからの指定 — といった特定の事情がある場合だけです。
JPG に変換するとき、品質はどのくらいに設定すればいいですか?
品質80が標準的な落としどころです。品質100と比べてファイルサイズは約40〜50% 減る一方、見た目の品質は95% 程度保たれます。背景用の画像やサムネイルなら70まで下げてもそれほど気になりません。60を下回ると圧縮のノイズが目立ち始めます。品質100はほぼ意味がなく、サイズだけが跳ね上がって見た目の差はほとんどありません。
複数の画像をまとめて変換できますか?
できます。Filuni の画像フォーマット変換ツールは1回の操作で最大10ファイルを受け付けます。まとめてドロップして変換先の形式を選ぶと、変換されたファイルをまとめた ZIP をダウンロードできます。商品写真を撮り直したとき、あるいはWebプロジェクト用のアイコンをセットで書き出すときなどに便利です。
Filuni の無料ツールを試す
この記事の内容すべて — さらに120以上のツール。無料・登録不要、ブラウザですぐに。