PNG→JPG変換

"PNGをJPGに"が実際にあなたの画像に行うこと

PNGとJPEGは、異なる役割を持つ2つの異なる画像形式のファミリーです。PNG(Portable Network Graphics、1996年のIETF RFC 2083、2023年のW3C第3版)はDEFLATE圧縮(ZIPとgzipと同じロスレスアルゴリズム)を使用し、すべてのピクセルをビット精密に保ち、透明度のために8ビットのアルファチャネルをサポートします。JPEG(1992年のISO/IEC 10918-1)は調整可能な品質を持つロッシーDCT圧縮を使用し、アルファチャネルを持たず、連続トーンの写真用に調整されています。PNGをJPEGに変換するとは: アルファチャネルを破棄し、ピクセルデータをロッシーエンコーダーに通し、通常はより小さなファイルと普遍的な互換性と引き換えにトレードオフを受け入れることを意味します。

透明度の喪失は最も目に見える変化です。PNGは各ピクセルを完全に不透明、完全に透明、または間のどこかとしてマークできます。JPEGには等価物がありません: すべてのJPEGピクセルは完全に不透明です。このツールは、エンコードする前に、あなたが選択する背景色(デフォルトでは白、黒、またはカラーピッカー経由のカスタム色)に対してPNGを合成するので、ソースの透明な領域は出力でその背景色になります。JPEGが書き込まれると、アルファチャネルは永久に失われます。回復することはできません。

ファイルサイズの方向は、ほとんどの人が想定するものではありません。写真PNGの場合(ポートレート、風景、忙しいシーン)、JPEG出力はソースより5-10倍小さくなります: これは期待される勝利です。グラフィックPNGの場合(ロゴ、イラスト、スクリーンショット、大きな平らな色の領域を持つもの)、JPEG出力はしばしばソースPNGより大きくなります。PNGのDEFLATEは、同一の色の長いランをほぼ何もないものに圧縮します; JPEGのDCTはそれらの滑らかな領域にノイズを注入し、高頻度の色境界をビットを消費する可視のハローに量子化します。50 KBのロゴPNGは200 KBのJPEGを生成できます。あなたの画像がほとんど平らな色と鋭いエッジである場合、JPEGは間違った方向です; PNGに留まるか、両方のモードをうまく処理するWebPに変換してください。

このツールの内部での動作

変換はHTML5 Canvas 2D APIに加えて、マルチファイルバッチ用のJSZip(Stuart Knightley、MIT/GPLデュアルライセンス)です。すべてのブラウザがPNGをネイティブにデコードするため、外部デコーダーは必要ありません。PNGをドロップすると、File APIがバイトを新しいHTMLImageElementに渡します; ブラウザはDEFLATE符号化されたPNGビットストリームを生のRGBAピクセルに解凍し、アルファチャネルを保持します。

メモリ内の新しいは画像にサイズ変更され、ctx.fillRect()経由で選択した背景色で塗りつぶされます。PNGはctx.drawImage()でその上に描画されます; デフォルトのsource-overコンポジットモードは、PNGのアルファをキャンバスの背景に対してブレンドするので、透明なピクセルは背景色を示し、半透明のエッジはスムーズにブレンドされます。そのコンポジットの後、canvas.toBlob('image/jpeg', quality/100)がブラウザの組み込みJPEGエンコーダーを呼び出します。エンコーダーはRGBAをYCbCrに変換し、オプションのクロマサブサンプリングを適用し、品質スライダーに一致するテーブルで8x8 DCTと量子化を実行し、JPEGバイトストリームを出力します。

単一ファイルの場合、出力Blobは直接ダウンロード可能なオブジェクトURLになります。マルチファイルバッチの場合、JSZipは各JPEG出力を収集し、ブラウザが単一のダウンロードとして提供する単一のZIPアーカイブにパッケージ化します。タブを離れるものは何もありません。唯一のネットワークトラフィックは最初のページロードとJSZipライブラリ(最初の訪問で約95 KB、その後キャッシュ)です。変換中にDevToolsのネットワークタブを開きます: 画像データを運ぶリクエストはありません。ページがロードされた後にブラウザを機内モードに切り替えると、コンバーターはローカルのPNGで動作し続けます。

PNGとJPEGの簡単な歴史

• JPEG、1992年。 ITU-T T.81 / ISO/IEC 10918-1、Joint Photographic Experts Group(1986年形成)によって標準化されました。8x8 DCTブロック、オプションのクロマサブサンプリング付きYCbCrカラー、人間の視覚用に調整された量子化テーブル。アルファチャネルなし、ロッシー圧縮。写真豊富なウェブを可能にした形式。
• LZW特許危機、1994-1995年。 UnisysはGIFが使用するLZW圧縮アルゴリズムに対する特許主張を開始し、GIFファイルを作成するソフトウェアからライセンス料を要求しました。ウェブコミュニティは特許のない代替品を中心に組織されました。
• PNG 1.0、1996年1月。 Thomas Boutell、Mark AdlerとCompuServe主導のワーキンググループは、IETFでPNGをRFC 2083として公開しました。DEFLATE圧縮(zlibとZIPと同じLZ77+Huffmanアルゴリズム、これも特許なし)がLZWを置き換えました。フル8ビットアルファチャネル、常にロスレス、ロイヤリティフリー。W3C勧告は1997年に続きました。
• PNGはウェブのロスレス形式になる、1990年代後半。 ブラウザサポートは1999年頃にIE 4-6とNetscape 4+全体で安定しました。PNGはすぐにロゴ、スクリーンショット、アイコン、および透明度やピクセル精密なレンダリングが必要なあらゆるグラフィックの標準になりました。JPEGは写真の標準のままでした。
• ISO標準化とAPNG、2003-2010年。 PNGは2003年にISO/IEC 15948になりました。Mozillaは2004年にAPNG(アニメーションPNG)をFirefox拡張機能として開発しました; 2014年にSafariサポートを獲得し、2017年にChromeを獲得しましたが、W3C PNGグループは2023年の第3版でのみ正式に採用しました。
• PNG第3版、2023年。 W3Cは、正式なHDRサポート(cICPチャンク)、APNGアニメーション、および標準化されたEXIFメタデータブロック(eXIfチャンク)を備えたPNGの第3版を公開しました。JPEGから30年以上後、両方の形式がウェブ上の主要な画像形式のままで、WebPとAVIFが地盤を獲得していますがそれらを置き換えていません。

仕組み

1. PNGをアップロード: 変換する1つ以上のPNGファイルをドロップまたは選択します。
2. カスタマイズ: 品質(60〜100%)を調整し、透明エリアの背景色を選択します。
3. 変換: 「JPGに変換」をクリックします。個々の画像は直接ダウンロードされ、複数のファイルはZIPにグループ化されます。

なぜPNGをJPGに変換するのか?

JPGは多くの色を含む複雑な写真画像で優れた損失のある画像形式です。PNGよりも小さいファイルを生成するため、ウェブ、メール添付、迅速な共有に最適です。写真、イラスト、透明性が不要な画像に最適です。PNGは、透明性または損失なしの品質を必要とするグラフィックスには引き続き好ましいです。

機能

• バッチ変換: 複数のPNGファイルを一度に変換します。単一の画像は直接ダウンロードされ、複数の画像はZIPにグループ化されます。
• 品質コントロール: ファイルサイズと視覚品質のバランスを取るために、60%から100%の圧縮品質を選択します。
• 透明性の処理: PNGの透明エリアを置き換える背景色(白、黒、カスタム)を定義します。
• プライバシー: すべての変換はブラウザ内でローカルに行われます。サーバーへのアップロードはありません。
• サイズプレビュー: 圧縮の影響を理解するために、前後のサイズを表示します。

現実世界のPNGからJPGへのワークフロー

• ウェブ用に写真PNGを縮小する。 カメラ、デザインアプリ、またはレンダリングパイプラインが写真をPNGとしてエクスポートしました。ホスティングサイズの上限またはページ重量の予算ではより小さくする必要があります。品質85のJPEGは、写真コンテンツで目に見える品質の変化なしにサイズを5-10倍カットします。これは正規の使用例であり、JPEGが明白に正しい宛先形式である場合です。
• メール添付ファイル。 Gmail、Outlook、Apple Mailは添付ファイルをメッセージあたり25 MBに制限します。電話やDSLRからの高解像度PNGのフォルダはすぐに制限に達します。品質85でJPEGに変換すると、通常、複数の送信に分割したりクラウド共有リンクに移動したりする代わりに、1つのメッセージですべてを送信するためのヘッドルームを買えます。
• ソーシャルメディアアップロード。 Twitter/X、Facebook、Instagram、LinkedInはすべて、独自のアルゴリズムを使用してアップロード時に画像をJPEGに再圧縮します。最初に変換すると、決定をプラットフォームのエンコーダーに譲る代わりに、品質のトレードオフを制御できます。品質85-90で事前圧縮されたJPEGとしてアップロードされた投稿は、通常、プラットフォームにあなたのPNGをゼロから再圧縮させるよりも見栄えが良くなります。
• eコマース製品写真。 Etsy、eBay、Shopify、Amazonおよびほとんどのマーケットプレイスは、固定された表示サイズで製品写真を表示します。JPEGは普遍的に受け入れられた形式であり、製品リストのページ重量を削減します。数百または数千の製品写真を持つカタログは、PNGの代わりにJPEGとして保存されると、大きなCDN帯域幅の節約と、より速いLargest Contentful Paintを見ます。
• 写真印刷サービス。 Walgreens、CVS、Snapfish、Mpix、Costco Photoおよびほとんどの写真印刷キオスクはどこでもJPEGを受け入れます; PNGサポートは、特に小規模なサービスと古いキオスクで不均一です。印刷サービスにアップロードする前に変換すると、印刷キューが読み取れるファイルについての驚きを避けます。
• アーカイブまたはポータルアップロード用の文書スキャン。 個別のPNGファイルとして保存されたマルチページスキャンは、アーカイブまたはJPEGのみを受け入れるポータルへのアップロード用のJPEGのはるかに小さなフォルダになる可能性があります。鋭いエッジを持つ入力または印刷されたテキストのスキャンの場合、エッジを鮮明に保つために高品質(90-95)を使用します; 手書きのメモと連続トーンの写真の場合、80-85で問題ありません。

よくある落とし穴とその意味

• JPEG出力はPNG入力より大きくなる可能性があります。 写真PNGの場合、JPEGは5-10倍小さいです。ロゴ、イラスト、スクリーンショット、および大きな平らな色の領域や鋭い色の境界を持つあらゆるものの場合、JPEGはしばしば大きくなります。なぜなら、JPEGのDCTは平らな領域にノイズを注入し、鋭いエッジをビットを消費する可視のハローに量子化するからです。PNGが写真ではなくグラフィックコンテンツである場合、PNGに留まるか、代わりにWebPに変換してください。
• 透明度は保持されず、置き換えられます。 JPEGにはアルファチャネルがありません。透明なPNGピクセルは選択した背景色に対して合成され、出力ピクセルに焼き付けられます。JPEGが書き込まれると、アルファ情報は永久に失われ、回復することはできません。透明度を保持する必要がある場合は、PNGに留まり、WebPに変換するか、TIFFやAVIFのようなアルファ付きの形式を使用してください。
• 鋭いテキストと線画はJPEGのハローを示します。 JPEG量子化は、ハード色境界の近くに可視のハローとブロッキングを生成します。UIスクリーンショット、デザインモックアップ、図、タイポグラフィサンプル、およびエッジのピクセル精密な再現が重要なコンテンツの場合、PNGに留まってください。視覚的なアーティファクトは、鋭い色付きの形状に隣接する平らな背景で最も明らかです。
• 再エンコードは損失を複合します。 JPEGエンコーダーを通る各パスは画像データを失います。1回の変換(PNGからJPEGへ)は問題ありません; JPEGを数回再保存すると、特に平らな領域とクロマ境界で画像が目に見えて劣化します。常に手元にある最高品質のソースPNGから変換し、昨日エクスポートしたJPEGからではなく。
• ICCカラープロファイルが削除される可能性があります。 埋め込まれたICCカラープロファイル(sRGB、Adobe RGB、ProPhoto)は、ディスプレイにピクセル値を解釈する方法を伝えます。Canvasベースの再エンコードはプロファイルを破棄し、出力をsRGBとしてタグ付けする可能性があります。通常のスクリーン使用ではこれは見えません; 印刷準備作業や広色域配信の場合、プロファイルデータを明示的に保持するカラー対応のデスクトップツールを使用してください。
• 非常に大きなPNGはモバイルブラウザタブをクラッシュさせる可能性があります。 PNGをRGBAピクセルにデコードするには、寸法に比例したRAMが必要です: 24メガピクセルのPNG(6000x4000)は、ソースピクセルバッファだけで約96 MB、キャンバス用の別のバッファ、エンコーダー用の作業メモリが必要です。ブラウザに1〜2 GBのRAMが利用可能なモバイルデバイスは、エンコードが完了する前にOSによってタブが終了される可能性があります。

プライバシー: 画像はデバイスを離れません

すべてのクラウドベースのPNGからJPGへのコンバーター(CloudConvert、Convertio、iLoveIMG、FreeConvert、TinyJPG、および数十の"png to jpg online"サービス)は、あなたのファイルを運営者のサーバーにアップロードし、変換を実行し、JPEGをダウンロードとして返します。PNGファイルには、知らない人のハードドライブにコピーされたくないコンテンツが日常的に含まれます: 内部インターフェースと機密文書のスクリーンショット、IDカードと税フォームのスキャン、NDAの下のイラスト、まだリリースされていないデザインモックアップ、顔がはっきりと見える家族写真。ほとんどの運営者は、アップロードを1〜2時間以内に削除し、転送中に暗号化することを約束するプライバシーポリシーを公開しており、大規模な運営者はISO/IEC 27001認証を保持しています。それらのポリシーを尊重する強い商業的理由があります。しかし、"1時間以内に削除"は"決して見られない"ではありません。その1時間の間、画像コンテンツは運営者のインフラストラクチャに置かれ、適切な権限を持つあらゆるプロセスまたは人物がアクセス可能であり、適用される保持ポリシーに従ってログとバックアップで表示されます。

このコンバーターは何もアップロードしません。パイプライン全体(ファイル選択、ブラウザの組み込みデコーダーによるPNGデコード、背景色に対するCanvasコンポジット、JPEGエンコード、オプションのZIPパッケージング、ダウンロード)は、JavaScriptとHTML5 Canvas APIを使用してブラウザタブ内で実行されます。アップロードなし、画像データを運ぶネットワークリクエストなし、ログエントリなし。変換前にブラウザの開発者ツールをネットワークタブに開くことで確認できます: 画像コンテンツでリクエストは発射されません。唯一のネットワークトラフィックは、最初のページ読み込みと小さなJSZipライブラリ(約95 KB)で、最初の訪問時に1度ロードされてその後キャッシュされます。ページがロードされた後にブラウザを機内モードに切り替えると、コンバーターはローカルのPNGで動作し続けます。

別のツールが正しい選択である場合

• 透明度を保持する必要があります。 PNGに留まるか、WebP(両方のロッシーとロスレスモードをフルアルファでサポートし、通常PNGより25%小さいファイル)に変換するか、アルファ付きの最小ファイルのためにAVIFに変換してください。JPEG以外の任意の形式。WebPルートにImage Converterを使用してください。
• あなたの画像はロゴ、スクリーンショット、または平らな色のイラストです。 JPEGは写真をうまく処理し、グラフィックを悪く処理します。ロゴ、スクリーンショット、図、UIモックアップ、および鋭い色の境界や大きな平らな領域を持つあらゆるものの場合、JPEG出力はしばしばソースPNGより大きく低品質です。PNGに留まり、よりタイトなDEFLATE圧縮のためにImage Compressorを通すか、WebPロスレスに変換してください。
• 数百のファイルにわたるバッチ自動化。 Node.jsでSharp(libvipsの上に構築された標準的なサーバーサイドの画像ライブラリ)、コマンドラインでImageMagickまたはGraphicsMagick、またはPythonでPillowを使用します。CLIツールはブラウザメモリ制限なしで数千のファイルを処理し、CIジョブ、デプロイフック、またはcronタスクから実行されます。
• 印刷グレードのカラーマネージドワークフロー。 PhotoshopのExport As(ICCプロファイルを保持、ソフトプルーフィングとCMYK出力をサポート)、Affinity Photo、またはRawTherapeeを使用します。Canvasベースのブラウザ変換は、埋め込まれたカラープロファイルを削除する可能性があり、これはスクリーン使用には問題ありませんが、印刷準備には問題ありません。

よくある質問

PNGの透明エリアはどうなりますか?

JPGは透明性をサポートしていません。透明エリアを埋める背景色(白、黒、またはカスタム)を選択できます。この色は変換中に透明性を置き換えます。

どの品質を使用すべきですか?

ほとんどの用途では、85〜90%の品質が、目立つサイズ削減を伴う良好な視覚レンダリングを提供します。プロの写真には90%+、一般的なウェブ用途には75〜85%、サムネイルとプレビューには60〜75%を使用します。

複数のファイルを一度に変換できますか?

はい。複数のPNGをアップロードし、すべてに同じ品質と背景設定を適用します。単一のファイルは直接ダウンロードされ、複数のファイルは自動的にZIPアーカイブにグループ化されます。

ファイルサイズの制限は?

各PNGは最大50 MBまで処理できます。総サイズはブラウザの利用可能なメモリに依存しますが、通常は累計数百MBを変換できます。

画像はサーバーに送信されますか?

いいえ。すべての変換はCanvas APIを介してブラウザ内でローカルに行われます。画像がデバイスを離れることはなく、プライバシーとセキュリティが保証されます。

より頻繁に尋ねられる質問

なぜ私のJPG出力がPNG入力より大きいのですか?

なぜならあなたのPNGが写真ではなくグラフィックコンテンツだからです。PNGのDEFLATE圧縮は、大きな平らな色の領域を非常にうまく処理し、しばしばそれらをピクセルあたりわずか1バイトの一部に縮小します。JPEGのDCT圧縮は、連続トーンの写真用に調整されています; 滑らかな領域にノイズを注入し、鋭い色のエッジをビットを消費する可視のハローに量子化します。50 KBのロゴPNGは、ロゴのエッジ周りのハローアーティファクトを完備した200 KBのJPEGになる可能性があります。ロゴ、スクリーンショット、イラスト、図、または任意の平らな色のグラフィックの場合、PNGに留まり(または両方のモードをうまく処理するImage Converter経由でWebPに変換)。JPEGは写真コンテンツの場合のみ正しい宛先です。

アルファチャネルはどうなりますか?

永久に失われます。JPEGには形式仕様にアルファチャネルがありません。このツールは、エンコードする前に、選択する背景色(デフォルトでは白、または黒、またはカラーピッカー経由の任意のカスタム色)に対してPNGを合成するので、透明なピクセルは背景色になり、半透明のエッジは背景にブレンドされます。JPEGが書き込まれると、元の透明度を回復することはできません; ソースPNGに戻る必要があります。透明度を保持する必要がある場合、実際に望む変換はPNGからWebP(ロッシーまたはロスレス)であり、PNGからJPEGではありません。

白、黒、またはカスタムの背景色を使用するべきですか?

画像が表示される場所と一致させます。白いページに座るJPEG(ほとんどの文書、明るいテーマのほとんどのウェブサイト、ほとんどのメール)の場合、白が正しい選択でありデフォルトです。暗い背景に座るJPEG(暗いテーマのウェブサイト、暗いプレゼンテーションスライド、黒のドキュメンタリーフレーム)の場合、黒が溶け込みます。それ以外のすべてには、カスタムカラーピッカーを使用し、宛先の正確な背景色と一致させます。選択された背景と実際の宛先の間の不一致は、画像の以前透明だったエッジ周りに可視の色付きフリンジを生成します。

このツールはオフラインで動作しますか?

はい。PNGデコーダーとJPEGエンコーダーはどちらもすべてのブラウザに組み込まれています; それらのために外部ライブラリはダウンロードされません。このツールがロードする唯一のライブラリは、マルチファイルバッチをZIPアーカイブにパッケージ化するためのJSZip(約95 KB)で、最初のロードでCDNから1度フェッチされてキャッシュされます。後続の訪問は完全にオフラインで動作します。ページを一度開いてからローカルのPNGファイルを変換した後、機内モードを有効にすることで確認できます。

EXIFメタデータは保持されますか?

いいえ。Canvasベースの再エンコードは、EXIF、IPTCおよびXMPメタデータブロック(カメラモデル、露出、GPS座標、著作権タグ)を埋め込まれたICCカラープロファイルと共に削除します。出力JPEGはピクセルデータのみを運びます。通常のスクリーン共有では、これは通常プライバシーの勝利です(GPS座標とデバイスシリアル番号は漏れません)。メタデータを保持する必要があるアーカイブワークフローの場合、メタデータ対応のデスクトップツールを使用してください: -defineオプション付きのImageMagick、または-copy all付きのjpegtran、またはPhotoshopのExport As、これらすべてがEXIFとICCを保持できます。

デスクトップまたはコマンドラインの同等品はありますか?

いくつか。バッチ自動化には、Node.jsのsharpが標準のサーバーサイドライブラリです: sharp(buf).flatten({background:'#fff'}).jpeg({quality:90}).toBuffer()。任意のシェルでImageMagick: magick input.png -background white -flatten -quality 90 output.jpg。PythonのPillow: Image.open(p).convert('RGB').save(out, 'JPEG', quality=90)。このツールのようなワンオフのインタラクティブ作業には、Squoosh(Google Chrome Labs、これもクライアントサイド)が最も近いブラウザの代替であり、AVIFを含むより多くの出力形式をサポートします。Photoshop、Affinity PhotoおよびmacOSのPreviewはデスクトップGUIケースを処理します。

関連ツール