アルファ付きの可逆 → アルファなしの非可逆
PNGはすべてのピクセルを正確に保存し、ピクセルごとにアルファ値を持てます。JPGは画像を8 × 8のブロックに分け、各ブロックの強い周波数成分だけを残して弱い成分を丸めて捨てます。写真では目立ちませんが、くっきりした輪郭や文字ではリンギングや色のにじみとして現れます。
JPGにはアルファチャンネルがないため、変換ではまずキャンバス全体をJPGの背景色で塗り、その上にPNGを描きます。完全に透明なピクセルはその色になり、半透明の縁(アンチエイリアス、柔らかい影)は縁の色と背景色が混ざります。白で変換した切り抜きは白いページではきれいでも、暗いページでは明るい縁取りが見えるのはこのためです。
画質は元に対する割合ではなく、エンコーダーの調整値です。下げるほど小さくなり、ブロックが見えやすくなります。画質ではなくバイト数の上限が決まっているなら、100KB以下に圧縮が画質を自動で探します。
- アルファチャンネル
- ピクセルごとの不透明度。PNGにはあり、JPGにはありません。
- JPGの背景色
- 透明部分の代わりに入る色。初期値は
#ffffff で、詳細設定で変更できます。 - 画質
- 20〜100のエンコーダー設定。ここでは初期値92で、PNGには効きません。
実際のPNG 2枚を変換した結果(実測)
2026-09-28にChromium 153で、Nerulioの変換コード、初期値の画質92と白背景で計測しました。
写真: astronaut.png(NASA、512 × 512、不透明)
PNG 791,555 バイト -> JPG 73,755 バイト (9.3 %)
SSIM 0.9874、PSNR 37.25 dB、チャンネル最大誤差 54/255
ドット絵: Kenney pixel-platformer-characters.png(224 × 74)
16,576ピクセル中8,095ピクセルが透明
PNG 1,996 バイト -> JPG 12,379 バイト (6.2倍に増加)
透明だった8,095ピクセルはすべて白に
写真は91%小さくなりましたが、スプライトシートは6倍に増え、透明も失いました。単色主体の小さなPNGは、どのJPGよりもよく圧縮されます。
PNGの各要素はどうなるか
| PNGにあったもの | 変換での処理 | JPGでは |
|---|
| RGBピクセル | 選んだ画質で非可逆エンコード | 幅・高さは同じ、小さな誤差(写真で最大54/255) |
|---|
| 完全に透明なピクセル | 先に背景色で塗る | 背景色そのもの |
|---|
| 半透明の縁 | 背景色と合成 | 固定された中間色。別の背景では縁取りに見える |
|---|
カラープロファイル(iCCPチャンク) | ブラウザのsRGBキャンバスに描画 | ChromiumがsRGBプロファイルを書き込む |
|---|
| テキストチャンク・EXIF | コピーしない | なし |
|---|
| アニメーションPNG(APNG) | 変換前に拒否 | — |
|---|
結果の確認
- JPGを暗い背景やダークモードのビューアで開きます。透明だった部分は選んだ色になり、切り抜きの縁に想定外の縁取りがないことを確認します。
- 文字やくっきりした線を200%に拡大します。ブロックや色のにじみが見えるなら、その画像はPNGのままが適切です。
- 結果一覧のバイト数を比べます。もともと小さいアイコンやドット絵は、JPGにするとたいてい大きくなります。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|
| ロゴの周りに白い四角が出る | JPGは透明を保存できず、透明ピクセルが背景色になった | PNGを開いて背景が市松模様か確認 | PNGのままにするかPNG → WebPを使うか、詳細設定でページの背景色を指定して四角をなじませます |
|---|
| 切り抜きの縁に明るい・暗い縁取り | 半透明の縁のピクセルが白と合成された | 実際に使う背景の上にJPGを置いてみる | 変換前にその背景色を選びます |
|---|
| 文字がつぶれて見える | くっきりした輪郭まわりのJPGブロックと色の欠落 | 文字を拡大して見る | スクリーンショットはPNGのままに。画質100にすると改善しますがJPGは非可逆のままです |
|---|
| JPGのほうがPNGより大きい | 単色主体の小さなPNG(アイコン・ドット絵)はPNGのほうがずっとよく圧縮できる | 結果一覧で2つの容量を比べる | PNGを使います。JPGが得なのは写真だけです |
|---|
| アップロードフォームがまだ容量オーバーと言う | 画質92では上限を超えている | バイト数を確認 | 200KB以下に圧縮など、フォームが指定するサイズに圧縮します |
|---|
ほかの方法
| 方法 | こんなときに向いています |
|---|
| PNG → WebP | 提出先がWebPを受け付け、透過を残したい場合や、同程度の画質でより小さくしたい場合。 |
|---|
| 自動形式で圧縮 | 拡張子より容量の上限が大事な場合。PNG・JPG・WebPの候補を比べてくれます。 |
|---|
| PNGを作ったソフトからJPGで書き出す | レイヤー付きの元データが残っている場合。非可逆の段階が1回減り、メタデータも残せます。 |
|---|
この方法の限界
- EXIFとPNGのテキストチャンクはコピーされず、JPGにはChromiumのsRGBプロファイルが入ります。
- 背景色は画像ごとに単色1つだけで、写真やグラデーションの上に合成することはできません。
バージョンと出典
2026-09-28にPlaywright Chromium 153で、src/task/convert.js と同じ呼び出し(Im.background のあと canvas.toBlob を0.92で)を使い、tests/fixtures/astronaut.png と tests/fixtures/kenney/pixel-platformer-characters.png の容量・SSIM・ピクセル数を計測しました。JPGとPNGが保存できる情報はMDNに従っています。
参照した公式ドキュメント
PNGをJPGに変換
PNGは可逆圧縮で透明に対応し、ロゴ・スクリーンショット向きですが写真は容量が大きくなります。
JPGは写真で最も広く使われる非可逆形式で、容量は小さいものの透明は扱えません。
JPGは透明を扱えないため、透明部分は背景色で塗られます。透明を残すならPNGかWebPを選んでください。
ファイルはサーバーにアップロードされず、このブラウザ内だけで処理されます。
画像形式を変換
PNG・JPG・WebPで保存。JPGでは透明背景が合成されます。
使い方
- 画像を開く
- PNG・JPG・WebPから選ぶ
- 変換したファイルを保存
対応形式
PNG / JPG / WebP / AVIF / HEIC → PNG / JPG / WebP — 読み込み・書き出しはブラウザの対応状況によります。 アニメーション入力は非対応です。静止フレームを選択してください。
このツールでできること
拡張子を変えるだけでなく、選んだ形式で再エンコードします。
処理方式と検証状況
advanced · browser image codecs. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
書き出す前に
JPGは透過非対応です。メタデータ・カラープロファイル・アニメーションの保持は保証しません。
よくある質問
透明な背景を残すには?
PNGまたはWebPを選んでください。JPGでは透明部分が指定した背景色になります。
ファイルはアップロードされますか?
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
作業は自動保存されますか?
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。