画質を落とさずに PNG を JPG に変換する方法

結論から

PNG が大きくなるのは、ピクセルを厳密に保とうとするからです。JPG が小さくなるのは、最終的な表示サイズでは通常気づきにくい範囲で、写真を簡略化することを許されているからです。

このトレードオフは意味があります。PNG は「大きいから悪い」わけではなく、JPG は「小さいから低品質」というわけでもありません。それぞれ違う仕事を解いています。

• PNG はピクセルを厳密に残す必要があるとき最適です。スクリーンショット、UI キャプチャ、図、ロゴ、アイコン、透過グラフィック、再編集する可能性のあるソースファイルなどです。
• JPG は写真的で、アップロード・メール送信・高速な読み込みが必要なときに最適です。
• WebP は PNG のような透過を保ちつつ、より小さなファイルにしたいウェブ用途で優れた代替になることが多いです。

「なんとなく高品質そう」という理由ですべてを PNG にするのは失敗のもとです。カメラで撮った写真を PNG で保存すると、JPG より数倍大きくなるのに、サイト上での見た目にはまったく差が出ないことがよくあります。

なぜ写真では PNG が巨大になるのか

まずは素朴なピクセル計算から。4000 × 3000 の画像は 1200 万ピクセルあります。圧縮前に 8 ビット RGBA として保持すると、およそ 48 MB のピクセルデータです。1 ピクセルにつき赤・緑・青・アルファがあるためです。

PNG はもちろんこのデータを圧縮します。W3C の PNG 仕様は PNG を可逆ラスター形式と定義し、画像情報を保持するためのフィルタと圧縮の手順を定めています。噛み砕いて言うと、エンコーダは各ピクセル行を予測または単純化し、残ったバイト列を圧縮する、という流れです。

これは、画像に繰り返しパターンがある場合には非常にうまく働きます。

• ソフトウェアのスクリーンショットの白い背景；
• UI 全体に繰り返し出てくるフラットな青いボタン；
• 明るいページ上の黒い文字；
• 数色しか使わないシンプルな図；
• 透過スペースに囲まれたロゴ。

写真はまったく違います。人物や街並み、森、商品の生地、料理の写真では、隣り合うピクセル同士は似てはいても、一致することはめったにありません。センサーノイズ、質感、影、レンズによるボケ、粒状感、微妙な色の変化、細かいエッジの遷移が常にあります。PNG はそれらを捨てられないため、すべてを表現し続けるほかありません。

JPG はまさにその「写真的なごちゃごちゃ」のために作られました。特に見る人が気づきにくいところで、細かな色や質感のディテールを単純化できます。同じ写真が 12MB の PNG にも 1.5MB の JPG にもなり、ブログの記事内では区別がつかない、ということが起こる理由です。

実際の画像タイプ別で見る PNG と JPG

拡張子ではなく、画像の内容で形式を選びましょう。

ここで多くの記事は誤ったアドバイスを出します。「PNG を JPG に変換」は、写真のような PNG には正しい判断です。しかし、あらゆる PNG に当てはまるわけではありません。ダッシュボードのスクリーンショット、透過ウォーターマーク、アプリアイコン、バーコードなどは JPG のほうが悪くなる場合があります。

「可逆」は正確、という意味であって「必ず小さい」ではない

可逆圧縮とは、デコードした画像が元のピクセルを完全に再現できることを意味します。ファイルが小さくなる、という意味ではありません。

PNG は丁寧なパッキング係だと思ってください。スーツケースに同じ白いシャツが 10 枚なら、効率よく詰められます。しかし少しずつ違うアイテムが 1200 万個あれば、それぞれを記録するしかありません。

したがって PNG は次のようなものに強いです。

• 単色の背景；
• 平塗りのイラスト；
• インターフェイスで繰り返し使う色；
• 鮮明な文字；
• 限られたパレット；
• シンプルな透過マスク。

反対に苦手なのは：

• カメラのノイズ；
• 肌の質感；
• 髪の毛、生地、草、葉、雲、料理；
• 写真が埋め込まれたスクリーンショット；
• PNG で書き出された AI 生成画像；
• ソフトな影の情報が多い商品切り抜き。

要点は、PNG のサイズは中身次第だということです。小さなフラットアイコンなら PNG でも非常に軽くなりますし、フル解像度のスマホ写真は途方もなく大きくなります。

なぜ写真では JPG が小さいのか

JPEG 1 は写真的画像の符号化を軸に設計されました。JPEG の公式概説は、オリジナルの JPEG 標準を、写真的画像向けのオプションを持つコア符号化技術として説明しています。MDN も、JPEG を静止画の非可逆圧縮に向く選択肢として紹介しています。

実務的な理由は単純で、JPG は情報を捨ててもよいのです。

とはいえランダムにピクセルを捨てているわけではありません。JPG エンコーダは、選ばれた品質設定で人間の知覚上あまり重要でないディテールを探して落とします。だからこそ JPG は次のような写真によく合います。

• 人物；
• 風景；
• 料理；
• 不動産；
• 小さな文字を含まない商品写真；
• 旅行写真；
• 背景画像。

一方、次のような「厳密なエッジ」を持つ画像には向きません。

• 小さな UI 文字；
• 図；
• 線画；
• ロゴ；
• QR コード；
• 透過を伴う影；
• コードのスクリーンショット。

こうした画像では、ハロー、モスキートノイズ、輪郭のにじみ、硬いエッジ周りの色の汚れといった JPG のアーティファクトが目立ちます。それを隠そうとして品質を上げすぎると、サイズ面での利点は消えてしまいます。

スクリーンショットが PNG のほうが向く理由

つまずきやすいのはここです。多くの写真では PNG のほうが JPG より大きいのに、スクリーンショットでは PNG のほうが小さく、しかもきれいなことがあるのです。

設定ページのスクリーンショットは、同じ背景色のピクセルが何千も並んでいることがあります。同じ文字色、罫線色、ボタン色を使い回していることも多いです。PNG の圧縮はまさにこの繰り返しが大好物です。結果は正確・鮮明、かつたいてい適度に軽くなります。

同じスクリーンショットを JPG にすると、エンコーダはあちこちで硬いエッジと向き合うことになります。文字やアイコンの周辺で、どのディテールを捨てるか判断しなければなりません。低品質だと汚く見え、高品質だと PNG と同程度、時にはそれ以上の大きさになります。

以下の簡易テストが便利です。

1. 読める文字が含まれるなら、まず PNG か可逆 WebP を試す。
2. ほぼ写真なら、まず JPG か WebP を試す。
3. スクリーンショットと写真が混在するなら、PNG と WebP/JPG の両方を書き出し、実際に見られるサイズで比較する。

透過は装飾ではなく「機能」

PNG はアルファ透過をサポートします。つまり各ピクセルを完全な不透明、完全な透明、部分的な透明のいずれにもできます。これはロゴ、アイコン、ステッカー、切り抜き商品画像、ウォーターマーク、オーバーレイ、UI 素材に欠かせません。

JPG にはアルファチャンネルがありません。透過 PNG を JPG に変換すると、透明部分は必ず通常の色になります。白で塗り潰すツールもあれば、背景色を選ばせるツール、独自の合成挙動を持つブラウザ側エンコーダもあります。結果はいずれにせよ「透過素材ではないもの」になります。

したがって、単に JPG のほうが小さいからという理由で PNG ロゴを JPG にするのはやめましょう。バイトは節約できても、レイアウトが崩れます。

より良い選択肢：

• 素材がベクターなら、ロゴやアイコンには SVG を使う。
• 透過について最大限の互換性が必要なら PNG を使う。
• サイトが受け入れ、透過を保ちつつファイルを小さくしたいなら WebP を使う。
• パイプラインが対応していて互換性を確認できるなら AVIF を使う。

Google の WebP ドキュメントは、WebP が非可逆・可逆・透過に対応していると明記しています。これが、現代のウェブで多くの透過 PNG に対する現実的な代替となっている理由です。

そもそも、なぜその写真は PNG になったのか

大きすぎる PNG 写真の多くは、意図した形式選択の結果ではありません。別のツールがそう書き出したから、というのがほとんどです。

よくあるケース：

• キャンバス全体に透過があったため、デザインツールが写真レイヤーを PNG で書き出した。
• スクリーンショットツールが、大きな写真を含むブラウザページをキャプチャした。
• AI 画像ツールが既定で PNG をダウンロードした。
• CMS やエディタが、貼り付けた画像を PNG に変換した。
• 世代劣化を避けるため、スマホやデスクトップアプリが編集済み画像を PNG で保存した。
• 最終配置は単色背景なのに、透過付きの商品切り抜きが PNG で保存された。

変換する前に、次の 2 つを自分に問いかけてください。

1. 本当に写真か？ そうなら JPG か WebP が合理的です。
2. 透過はまだ必要か？ そうなら JPG ではなく WebP・AVIF・PNG・SVG を選ぶこと。

この 2 問チェックで、悪い変換の大半は防げます。

JPG にすると、どれくらい小さくなる？

正直に言える固定の割合はありません。節約率は、寸法、内容、書き出し品質、エンコーダの挙動、そして元 PNG が既にパレット制限されていたかどうかに左右されます。

目安：

PhotoTools の PNG → JPG コンバーターは既定品質が 90% です。写真的な PNG の最初の書き出しに向いていて、目立つアーティファクトを避けやすい水準です。日常的なウェブ写真なら 80〜88 でも問題ないことが多いです。商品ラベル、顔、暗い画像では品質を上げて比較してください。

PNG を JPG にすべきとき

次のすべてが当てはまるなら、PNG を JPG に変換しましょう。

• 画像がほぼ写真である。
• 透過が不要である。
• フォーム、メール、マーケットプレイス、古いシステムなどとの広い互換性が必要である。
• 現状の PNG がアップロード上限、ページの遅さ、巨大な添付ファイルの原因になっている。
• 元の PNG またはソースファイルは手元に残っている。

例：

• ブログ記事にアップしたい 9MB の AI 生成 PNG。
• デザインファイルから誤って PNG で書き出された 14MB の商品写真。
• メール添付上限に収める必要がある 20MB の編集済みスマホ写真。
• 掲載ページを重くしている 6MB の不動産写真。

「PNG だから」という理由だけで JPG にするのはやめましょう。「画像の内容と配信先が JPG に向いている」から変換するのです。

PNG を JPG にすべきでないとき

厳密なピクセルに依存する画像は、PNG のままか、WebP/AVIF/SVG を選びましょう。

• 読める文字を含むソフトウェアのスクリーンショット；
• アプリストア用スクリーンショット；
• コードのスクリーンショット；
• UI ドキュメント；
• 図やチャート；
• QR コードやバーコード；
• ロゴやアイコン；
• 透過のあるオーバーレイ；
• ウォーターマークのグラフィック；
• 何度も編集し直すファイル。

PNG が大きすぎるが透過は残したい場合は、JPG ではなく PNG から WebP や PNG から AVIF を試してください。巨大なスクリーンショットなら、形式を変える前にまず実際の表示幅にリサイズしましょう。ロゴなら、SVG があるかも確認してください。

PhotoTools を使った実用ワークフロー

大量の大きな PNG を配信用に小さくしたいときは、次の流れを使ってみてください。

1. 内容で仕分ける。 写真、スクリーンショット、透過素材、ロゴを別々のグループに分ける。同じ書き出し設定を全部にかけない。
2. 写真的な PNG を JPG に変換する。 PNG → JPG を使い、品質 90 から始めて結果を確認する。実際に表示されるサイズで画像がきれいに見える限り、品質を下げていく。
3. 透過が必要なウェブ素材には WebP を使う。 アルファが重要で、サイトが WebP を受け入れるなら、JPG に潰さず PNG → WebP を使う。
4. 大きすぎる画像はまずリサイズする。 表示 900px の場所に 5000px 幅の画像を置けば、形式にかかわらずピクセルを無駄にしています。
5. バッチ処理は慎重に。 一度に複数ファイルを変換しつつ、難しいケース（文字・顔・グラデーション・透過エッジ・商品ラベル）は必ず個別に確認する。

PhotoTools はブラウザの画像 API を使って変換しています。ソースを createImageBitmap でデコードし、OffscreenCanvas に描画し、convertToBlob で選択した形式と品質で書き出します。ページには元とのファイルサイズが表示され、バッチ結果は ZIP でダウンロードできます。

迷ったときのチェックリスト

書き出す前にどうぞ。

もっとも安全な習慣は、PNG または元のソースファイルをマスターとして残し、そこから別途 JPG/WebP の配信用コピーを書き出すことです。これで、綺麗なソースを失わずに、小さいアップロード用ファイルを手に入れられます。

まとめ

PNG が JPG より大きくなるのは、そもそも保存させている画像の種類が合っていないときです。PNG はピクセルの正確さ、透過、繰り返しのグラフィックパターンの保持に優れています。JPG は写真をウェブで持ち運べるサイズに縮めるのに優れています。

写真で透過が要らないなら、PNG を JPG か WebP に変換しましょう。スクリーンショット、ロゴ、図、透過素材なら、JPG が「アップグレード」だとは思い込まないこと。ピクセルの実態と、ファイルが動くべき場所に合わせて形式を選んでください。