PNGをJPGに変換する理由
PNGは保存されたとおりにすべてのピクセルを保持し、透過にも対応しているため、グラフィックには最適ですが写真には重くなります。JPGは非可逆圧縮を使うため、ファイルを小さくするために一部のディテールを捨てます。スマホの写真をPNGで保存すると2〜5 MBになることが多く、同じ写真を品質85のJPGにすると数百KBになることもよくあります。この差はメール添付、アップロード制限、ページ読み込み時間で重要になります。
透過はどうなるか
JPGには透過チャンネルがありません。完全または部分的に透明なピクセルは、変換時に白になります。透過背景にロゴがあるPNGの場合、結果は白い四角の上にロゴが乗った状態になります。透過背景を残したい場合は、PNGのままにするか、WebPで書き出してください。
ソフトなドロップシャドウやアンチエイリアスの曲線など、半透明のエッジは白とブレンドされます。明るいページでは通常問題なく見えますが、暗い背景では淡いフリンジが見えます。
品質設定の選び方
| 内容 | 推奨品質 | 期待されること |
|---|---|---|
| 写真、ポートレート、風景 | 80〜85 | ファイルが小さく、通常サイズでは違いがわかりにくい |
| 詳細な写真、商品撮影 | 88〜92 | ファイルは大きめ、細部の確認に安全 |
| スクリーンショット、UI、テキスト | PNGのまま | JPGは文字の周りにぼやけたエッジを加える |
| フラットカラーのグラフィック、ロゴ | PNGのまま、またはWebPを使用 | JPGはエッジ付近にまだらな斑点を生じる |
品質はトレードオフであり、ただで手に入るものではありません。JPGを保存するたびに一部のデータが失われ、同じJPGを繰り返し保存するとそれが積み重なります。元のPNGから一度だけ変換し、そのPNGをマスターコピーとして保持してください。
PNGのままにすべき場合
サイズよりもシャープなエッジと正確な色が重要なときは、常にPNGが勝ります：
- 透過またはフラットな背景を持つロゴとアイコン。
- テキスト、コード、インターフェースのスクリーンショット。JPGは文字のエッジをにじませます。
- 少ない色の間に硬い境界がある線画、チャート、図。
- 再編集する画像。JPGの繰り返し保存はファイルを劣化させます。
おおよその目安：画像が写真や滑らかなグラデーションのあるスキャンなら、通常JPGの方が適しています。テキスト、線、フラットな図形で構成されているなら、通常PNGの方がよく見え、それほど大きくならないこともあります。
ここでの変換の仕組み
PNGを選び、品質を設定して変換します。画像はCanvas APIを使ってブラウザ内でデコードおよび再エンコードされ、ダウンロードとして返されます。サーバーには何も送信されないため、アップロード待ちもなく、ファイルのコピーがどこかに保存されることもありません。つまり、ページが読み込まれた後に接続が切れても動作し続けます。
結果が予想より大きい場合は、品質を1〜2段階下げて、今作ったJPGからではなく元のPNGから再度変換してください。細部が柔らかく見える場合は品質を上げてください。バッチの場合は、各ファイルを同じ方法で変換します。設定は実行間で保持されます。
変換後
送信または公開する前に、ファイルサイズを確認し、JPGを一度フルサイズで開いてください。エッジ、テキスト、元の画像で透過していた領域を確認します。何かおかしい場合は、PNGに戻って別の品質値を試してください。後でいつでも新しいJPGを作成できるよう、PNGをソースとして保持してください。
よくある質問
PNGをJPGに変換すると品質は失われますか？
はい。JPGは非可逆形式のため、変換中に一部の画像データが失われます。品質80〜85では写真では違いがわかりにくいことが多いですが、テキストやシャープなエッジは柔らかく見えることがあります。
透過背景はどうなりますか？
JPGは透過に対応していないため、透明な領域は白になります。透過背景を保持したい場合は、PNGのままにするか、WebPに変換してください。
画像はサーバーにアップロードされますか？
いいえ。変換はブラウザ内で実行されるため、ファイルは端末上に留まります。何もアップロードされず、何も保存されません。
JPGがPNGより大きくなることがあるのはなぜですか？
フラットカラーのグラフィック、ロゴ、スクリーンショットで起こります。PNGは非常に効率的に圧縮されますが、JPGはそうではありません。そのような場合、PNGの方がすでに小さくシャープな選択肢です。