JPG・PNG・WebPの違いと使い分け:写真・ロゴ・Web用
2026.09.30 更新 · 5分で読めます
JPG・PNG・WebP・AVIFの圧縮方式、透過、アニメーション対応を表で比べ、ブラウザ対応の違いと、写真・ロゴ・Webページ・iPhoneのHEIC写真に合う形式を実測例とあわせて解説します。
画像形式変換をすぐに使う写真やロゴ、スクリーンショットを保存したり送ったりするとき、JPG・PNG・WebPのどれを選べばよいか迷いがちです。簡単にまとめると、写真をどこでも開けるようにしたいならJPG、透明な背景や文字・図表をくっきり残したいならPNG、Webページの画像を軽くしたいならWebP(またはAVIF)が向いています。相手がどの形式に対応しているかわからないときは、JPGがいちばん無難です。
ひと目でわかる比較
| 項目 | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| 圧縮方式 | 非可逆 | 可逆(ロスレス) | 非可逆・可逆 | 非可逆・可逆 |
| 透過(透明な背景) | 非対応 | 対応 | 対応 | 対応 |
| アニメーション | 非対応 | APNGで対応 | 対応 | 対応 |
| 主な用途 | 写真、メール添付 | ロゴ、スクリーンショット、図表 | Webページの画像 | Webページの画像 |
MDNの画像形式ガイドをもとにまとめました。
JPGとPNG:写真か、透過・文字か
JPG
JPG(JPEG)は写真を非可逆圧縮する形式です。MDNはJPGを、静止画の非可逆圧縮に適した、現在最も普及している形式として紹介しています。主要なブラウザすべてが対応しているため、写真をメールで送ったり提出したりするときの基本の選択肢になります。
弱点は、透明な背景を保存できないことです。背景が透明なPNGをJPGにするときは、透明部分をほかの色で塗りつぶす必要があります。テスト用画像(背景が透明なPNG 800×600、204 KB)をJPG(画質85)に変換すると、透明部分が白で塗りつぶされて16 KBになりました(Chrome(デスクトップ)で計測。端末やブラウザによって異なります)。
PNG
PNGは可逆圧縮の形式で、W3CのPNG仕様では透明度を表すアルファチャネルを持てます。MDNは、元画像をより正確に再現したいときや透明度が必要なときは、JPEGよりPNGが適していると説明しています。ロゴ、アイコン、スクリーンショット、図表のように輪郭をくっきり残したい画像に向いています。
反対に、写真をPNGにすると容量が大きく増えます。テスト用画像(4000×3000のJPG、4.0 MB)はPNGにすると10.9 MB、800×600のJPG(49 KB)は398 KBになりました(Chrome(デスクトップ)で計測。端末やブラウザによって異なります)。また、JPGをPNGにしても、JPGで保存したときに変わってしまった部分は元に戻らず、それ以上画質が落ちなくなるだけです。
PNGでも色数を減らせば軽くなります。PNG仕様は1~256色のパレットを使うインデックスカラーを定めていて、画像圧縮の「色数を減らす」はこの方式で256色以下にします。
WebPとAVIF:Web向けにより軽く
WebPは非可逆・可逆の圧縮、透過、アニメーションのすべてに対応した形式です。Googleは、可逆のWebPはPNGより26%小さく、非可逆のWebPはSSIM画質指標が同等のJPEGより25~34%小さいとしています。Chrome、Safari、Firefox、Edge、Operaなどの主要ブラウザが標準で対応しています。
AVIFも非可逆・可逆の圧縮、透過、アニメーションに対応し、MDNはPNGやJPEGよりはるかに優れた圧縮を提供すると説明しています。ただしブラウザの対応はChrome 85、Firefox 93、Safari 16.1、Edge 121以降のため、MDNはAVIFを使う場合、より広く対応している形式を代替として用意するよう勧めています。
テスト用画像(4000×3000のJPG、4.0 MB)を初期値の画質で変換すると、WebP(画質85)は1.8 MB、AVIF(画質60)は532 KBでした(Chrome(デスクトップ)で計測。端末やブラウザによって異なります)。Webページには向いていますが、AVIFは古いソフトやブラウザでは開けない場合があるため、メール添付や提出用なら相手の対応形式を先に確認しましょう。
動く画像によく使われるGIFは、パレットの色数が最大256色です。MDNは、静止画ならPNG、アニメーションならWebP・AVIF・APNGを検討するよう勧めています。
場面別の選び方
| 場面 | 向いている形式 |
|---|---|
| 写真をメールやLINEで送る・提出する | JPG |
| ロゴ・アイコンなど透明な背景が必要 | PNG(Web用ならWebPも可) |
| スクリーンショット・図表など文字が多い画像 | PNG |
| ブログやWebページに載せる写真 | WebPまたはAVIF(JPGの代替画像とあわせて) |
| iPhoneのHEIC写真をほかの端末に送る | JPGに変換 |
iPhoneのHEIC写真は?
iPhoneのカメラのフォーマットが「高効率」になっていると、写真はHEIF(High Efficiency Image File Format)で保存されます。AppleはHEIFについて、JPEGより圧縮率が高いため、同等の画質のままストレージ容量を抑えられると説明しています。そのかわり、この形式に対応していない端末やサービスでは開けないことがあるため、ほかの人に送るときや提出するときはJPGにしておくと安心です。方法はiPhoneのHEIC写真をJPGにする3つの方法にまとめました。
ZEKILO Studioでの手順
- 画像形式変換で画像をドロップするか[ファイルを選択]で選びます。追加するとすぐに変換が始まります。
- [変換後の形式]でJPG(初期値)・PNG・WebP・AVIFから選び、必要なら[画質]を調整します(初期値はJPG・WebPが85、AVIFが60)。JPGにするときは[透明部分の塗りつぶし]で[白]・[黒]・[色を選ぶ]から色を選びます。
- [ダウンロード]で保存します。複数枚は[すべてダウンロード(ZIP)]でまとめて保存できます。
変換はブラウザ内で行われ、ファイルは端末の外に送信されません。動くGIF・WebPは最初のコマだけを変換します。形式はそのままで容量だけ減らしたいなら画像圧縮を、iPhoneの写真をJPGにしたいだけならHEIC JPG変換を使ってください。
まとめ
- JPGは写真向けです。どこでも開けますが、透明な背景は保存できません。
- PNGは透過・文字・図表向けです。写真をPNGにすると容量が大きく増えます。
- WebP・AVIFはWebページの画像を軽くしたいときに使います。相手が対応しているか先に確認しましょう。
- iPhoneのHEIC写真は、送る前や提出する前にJPGに変換しておきましょう。