画像を保存・書き出しするとき、形式の選択はファイルサイズにも、見た目の品質にも、表示先の環境で開けるかどうかにも直結します。JPG、PNG、WebPは互いの代わりになるものではありません。それぞれ違う圧縮方式を使い、想定している画像の種類も違います。
圧縮とは何か、なぜ重要なのか
圧縮とは、画像ファイルのサイズを小さくする処理のことです。大きく2種類あります。
- 可逆圧縮(ロスレス): ファイルは小さくなりますが、元のデータはすべて残ります。展開した画像は元画像と完全に同じです。
- 非可逆圧縮(ロッシー): ファイルは大幅に小さくなりますが、一部のデータは永久に捨てられます。圧縮を強めるほど画質は落ちます。
JPGは非可逆圧縮、PNGは可逆圧縮、WebPは両方に対応します。この違いこそが、どれをいつ使うかを決める中心的な軸です。
JPG(JPEG):写真のための形式
JPGは1992年から存在し、今も写真の標準であり続けています。理由は単純で、その非可逆圧縮が、なだらかな色の変化や影、質感の多い画像でとくによく効くからです。それはまさに写真の特徴そのものです。
仕組み
JPGのアルゴリズムは画像を8×8ピクセルのブロックに分け、高周波の情報を捨てます。色がなだらかに変化する部分で、人の目が拾いにくい細部のことです。その結果、見た目の劣化をほとんど感じさせずにファイルサイズを大きく落とせます。
JPGを使う場面
- 写真全般(商品、人物、風景、室内)
- SNS向けの画像(Instagram、Facebook、LinkedInなど)
- YouTube動画のサムネイル
- 透過が不要で、とにかく軽さを優先したい画像すべて
JPGの弱点
- 透過に対応していない。 背景は必ず塗りつぶされ、既定では白になります。
- 保存するたびに画質が落ちる。 すでに圧縮されたJPGを書き出し直すと、そのたびに劣化が積み重なります。
- 文字やくっきりした輪郭に非常に弱い。 べた塗りの上の文字のように色が急に変わる部分には、目に見えるノイズが出ます。文字のまわりがブロック状ににじむ、あの現象です。
💡 実務的な目安: 写真で、かつ背景を透明にする必要がなければJPG。文字・ロゴ・アイコン・透過が絡むものはすべてPNGかWebPです。
PNG:図版と透過のための形式
PNG(Portable Network Graphics)は1996年、GIFの後継として作られました。扱える色数が多く、圧縮も優れています。可逆圧縮を使うため、PNGで保存した画像は常に元画像と同一です。ノイズも劣化もありません。
仕組み
PNGはZIPファイルのように、元に戻せる形で画像データを圧縮します。情報は一切失われません。そのぶん、同じ画像でもJPGより大きくなりがちですが、品質は完全なままです。
PNGを使う場面
- 背景が透明なロゴ、アイコン、イラスト
- 文字が読めるスクリーンショットや画面キャプチャ
- ベタ塗りが多く、輪郭のはっきりした画像
- 何度も編集して書き出し直すファイル(劣化が積み重ならない)
- ファビコンやUI用の画像
PNGの弱点
- 写真だとファイルが重い。 同じ写真でも、PNGはJPGの5〜10倍の容量になることがあり、見た目の得はほとんどありません。
- 写真的なグラデーションの多い画像には向かない。 可逆圧縮はすべてを残します。誰も気づかないまま捨てられたはずの情報まで残してしまいます。
WebP:ウェブのための新しい形式
WebPはGoogleが開発し、2010年に公開されました。ウェブ用途でJPGとPNGより効率的であることを狙った形式です。非可逆・可逆の両方の圧縮に対応し、透過も扱えます。つまり従来の2形式の長所を、より軽い1つのファイルにまとめたものです。
仕組み
WebPは動画コーデックVP8から派生した高度な圧縮技術を使います。非可逆モードでは、同じ見た目の品質でJPGより約25〜35%小さくなります。可逆モードではPNGより約20〜30%小さくなります。アルファチャンネル(透過)にも、アニメーションにも対応します。
WebPを使う場面
- サイトやWebアプリの画像(表示を速くするうえでもっとも効率的)
- ECサイトの商品写真をJPGから置き換えるとき
- 透過が必要なロゴやアイコンをPNGから置き換えるとき
- 表示速度やパフォーマンスを優先したい場面すべて
WebPの弱点
- 対応環境: 2026年時点でほぼすべてです。Chrome、Firefox、Safari、Edge、主要なOSが対応しています。ただし古い編集ソフトや一部のプラットフォームは、いまだにWebPを受け付けません。
- YouTubeはサムネイルにWebPを受け付けない。 サムネイルのアップロードにはJPGかPNGを使ってください。
- WebPをJPGに再圧縮するSNSがある。 アップロード時に変換されるため、軽さの利点が一部打ち消されます。
まとめて比較:PNG vs JPG vs WebP
| 項目 | JPG | PNG | WebP |
|---|---|---|---|
| 圧縮の種類 | 非可逆 | 可逆 | 両方 |
| 透過(アルファチャンネル) | × | ◯ | ◯ |
| ファイルサイズ | 小さい | 大きい | 非常に小さい |
| 写真に向く | ✅ 得意 | ❌ 効率が悪い | ✅ 得意 |
| ロゴ・アイコンに向く | ❌ 不向き | ✅ 得意 | ✅ 得意 |
| アニメーション対応 | × | ×(GIFかAPNGを使用) | ◯ |
| 対応の広さ | ✅ 全面対応 | ✅ 全面対応 | ✅ ほぼ全面(2026年時点) |
| 書き出し直したときの劣化 | 積み重なる | なし | 積み重なる(ロッシー時) |
場面ごとの選び方
サイトやECサイト
WebP をすべての画像の標準にしてください。速度面の効果は本物です。ページの表示は速くなり、Google PageSpeedの評価も上がり、それでいて見た目の品質はJPG/PNGと同等かそれ以上のまま、ファイルは軽くなります。必要に備えて、JPGやPNGの版もフォールバックとして残しておきましょう。
ECサイトの商品写真
WebP が使える環境なら、それが最善です。使えない場合は JPG を品質80〜85%で書き出してください。この範囲がサイズと品質のバランスがもっとも良いところです。商品写真をPNGで保存するのはやめましょう。見た目の得が何もないまま、ファイルだけが巨大になります。
ロゴとブランドの視覚表現
PNG は、プレゼン資料やWord文書、古いシステムなど、どんな場面でも確実に開けることが必要なときに使います。公開先がウェブだけなら WebP が適しています。ロゴにJPGを使ってはいけません。背景が強制的に白くなり、輪郭のまわりにノイズが出て、見栄えが台無しになります。
SNS
JPG はInstagram、Facebook、LinkedInの写真向きです。どのみちプラットフォーム側で再圧縮されるので、あらかじめきちんと圧縮したJPGを渡したほうが仕上がりを制御できます。図版や文字が入ったストーリーズ・投稿では、 PNG のほうが、再圧縮される前の文字のシャープさをよく保てます。
YouTubeのサムネイル
JPG (YouTube推奨)か PNGを使ってください。YouTubeはサムネイルにWebPを受け付けません。上限は2 MBなので、アップロード前にサイズを落とす必要があれば 圧縮 をお使いください。
スクリーンショットや画面キャプチャ
PNGを必ず使ってください。スクリーンショットには文字とUIとくっきりした輪郭が含まれます。まさにJPGがもっとも苦手とするものです。JPGで保存すると、文字のまわりにノイズがはっきり出ます。
ファビコン
PNG を複数サイズ(16×16、32×32、Apple Touch用の180×180)で用意するか、古いブラウザまで確実に対応させたいなら .ico 形式を使います。ImageToolsの ファビコン作成 なら、どんな画像からでも必要なサイズをすべて自動で書き出せます。
🚀 2026年のサイトなら: 画像はすべてWebPにしてください。かなり古いブラウザにも対応させる必要があるなら、HTMLの <picture> タグでJPGかPNGのフォールバックを用意しましょう。
無料で形式を変換する方法
ImageToolsの変換は、PNG・JPG・WebP・BMPをブラウザ内で相互変換します。外部サーバーへの送信も、登録も、回数制限もありません。画像を読み込ませ、出力形式を選び、ダウンロードするだけです。
形式を変えずにJPGやPNGのファイルを軽くしたい場合は、 圧縮 が見た目の品質を保ったまま賢く圧縮します。サイトに公開する前やメールで送る前の最適化に向いています。
よくある質問
<picture> タグでJPGかPNGのフォールバックを自動的に出し分けられます。