画像を保存するとき「JPGとPNG、どっちだろう？」と手が止まる——Webで使う画像形式の使い分けは、実は1枚の表で決まります。まず答えを出して、そのあと理由を説明します。
結論：この表のとおりに選ぶ
| 載せたいもの | 使う形式 | 理由 |
|---|---|---|
| 写真 | WebP（またはJPG） | 軽い。写真の情報量に強い |
| イラスト・図 | WebP（またはPNG） | 輪郭がにじまない |
| スクリーンショット | PNG（またはWebP） | 文字がくっきり残る |
| ロゴ・アイコン | SVG | 拡大しても劣化しない |
| 背景を透過したい画像 | PNGかWebP | JPGは透過できない |
| 動く画像 | 動画（MP4） | GIFより圧倒的に軽い |
迷ったら「写真も図もWebP、ロゴだけSVG」。これだけでほぼ正解です。
それぞれの形式の正体
JPG——写真のための定番
JPG（JPEG）は、写真のような色数の多い画像を「人の目にはわからない程度に情報を間引いて」小さくする形式です。デジカメ・スマホの標準で、写真ならファイルサイズと画質のバランスが優秀です。
弱点は2つ。背景の透過ができないことと、間引きの副作用で文字やイラストの輪郭がにじむこと。スクショやロゴにJPGを使うと、もやっとした画質になります。
PNG——くっきり・透過ならこれ
PNGは情報を間引かずに保存する形式です。文字・線・ベタ塗りがくっきり残るので、スクリーンショットとイラストの定番。背景を透過できるのも大きな強みで、切り抜きキャラやロゴの配置に使われてきました。
弱点は、写真に使うとファイルが重くなること。風景写真をPNGで保存すると、JPGの何倍ものサイズになることがあります。
WebP——現代の第一候補
WebP（ウェッピー）は、Webのために作られた新しめの形式です。JPGの得意分野（写真）でもPNGの得意分野（透過・くっきり）でも、だいたい2〜3割軽くなります。現在の主要ブラウザはすべて対応しており、迷ったらこれでOKという立ち位置になりました。
強みは非可逆と可逆の両方のモードを持っていること。写真は非可逆、透過イラストは可逆、と1つの形式で使い分けられます（この2つの言葉はこの記事の最後で説明します）。
弱点はほぼありませんが、古い画像編集ソフトだと開けないことがあるくらいです。
べんりワザ画像をWebPに変換する方法手持ちのJPG・PNGをWebPに変換する方法（無料・登録なし）はこちらSVG——拡大しても劣化しないロゴ・アイコン用
ここまでの3つが「点の集まり」なのに対し、SVGは「線や図形の描き方の指示書」でできています。だからどれだけ拡大してもギザギザにならず、ファイルもごく小さい。ロゴ・アイコン・単純な図に最適です。
逆に、写真のような複雑な画像はSVGにできません。イラストでも、水彩画のような塗りの複雑なものは苦手です。
GIF——動く画像の元祖（今は出番少なめ）
GIFはパラパラマンガのように動く画像を作れる形式ですが、色数が256色までで画質が粗く、ファイルはとても重い。いま「動くもの」を載せるなら、動画（MP4）やアニメーションWebPのほうが軽くてきれいです。
用語のミニ解説：ラスターとベクター、可逆と非可逆
形式選びで出てくる言葉を、表で簡単に整理しておきます。
| 用語 | 意味 | あてはまる形式 |
|---|---|---|
| ラスター画像 | 色のついた点（ピクセル）の集まりでできた画像。拡大するとギザギザになる | JPG・PNG・WebP・GIF |
| ベクター画像 | 線や図形の「描き方」を数式で持つ画像。拡大してもギザギザにならない | SVG |
| 非可逆圧縮 | 情報を間引いて軽くする。保存し直すたびに少しずつ画質が落ちる | JPG・WebP（非可逆モード） |
| 可逆圧縮 | 情報を間引かずに軽くする。何度保存し直しても画質は変わらない | PNG・GIF・WebP（可逆モード） |
「写真や図はラスター、ロゴだけベクター」「編集中はPNG、公開直前にWebPへ書き出す」と覚えておくと、迷ったときに判断しやすくなります。
同じ写真を形式別に保存すると
言葉で「軽い」と言われてもピンとこないので、幅1600pxの風景写真1枚を形式別に保存したときの、おおよその関係を並べます（写真の内容で変わるので、比率の感覚として見てください）。
| 形式 | サイズの目安 | 見た目 |
|---|---|---|
| PNG | いちばん重い（基準の5〜8倍） | 完璧だが写真には過剰 |
| JPG（品質80） | 基準 | 実用上ほぼ気にならない |
| WebP（品質80） | 基準の7〜8割 | JPGと見分けがつかない |
| AVIF（品質80） | 基準の5〜6割 | ほぼ同じ |
写真をPNGで保存しているなら、それだけでページが数倍重くなっている可能性があります。ここがいちばん効く改善点です。
どのくらいの幅で用意する？
形式より先に効くのがピクセルの幅です。用途ごとの目安を持っておくと迷いません。
| 用途 | 用意する幅の目安 |
|---|---|
| 記事の中の写真 | 1200px |
| 画面いっぱいの大きな写真 | 1600〜2000px |
| カードのサムネイル | 600〜800px |
| プロフィールの丸い写真 | 400px |
| ロゴ・アイコン | SVG（ピクセル指定は不要） |
考え方は「表示する幅の2倍」です。高精細な画面では1pxを2px分で描くため、実際に表示する幅の倍あれば足ります。3倍以上は容量が増えるだけで見た目は変わりません。
透過を使うときの注意
背景を透明にした画像（透過PNG・透過WebP）は便利ですが、つまずきどころが2つあります。
- JPGに変換すると透明部分が黒か白になる——JPGは透明という情報を持てません。透過を保ちたいならPNGかWebPのままにします
- 切り抜きのふちに白い線が残る——元画像の背景が白のまま切り抜かれていると起きます。暗い背景に置いたときだけ目立つので、使う予定の背景色の上に置いて確認するのが確実です
新しい形式と、古い環境の両立
「AVIFは軽いけれど、万一表示できない人がいたら困る」——この心配は picture タグで解決できます。上から順に試して、表示できる最初の1つだけが読みこまれます。
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="夕暮れの海">
</picture>いちばん下の img が最後の受け皿（フォールバック）です。ここにJPGを置いておけば、どんな環境でも必ず写真が出ます。まずはWebP1本でも十分なので、これは「もっと軽くしたくなったとき」の引き出しとして覚えておいてください。
ファビコンだけは事情が違う
ブラウザのタブに出る小さなアイコン（ファビコン）は、歴史的な理由で .ico という専用形式が使われてきました。今はPNGやSVGでも指定できますが、対応の広さを考えると変換サイトで作るのが手堅いところです。
サイトに載せる前のひと手間
形式を正しく選んでも、スマホで撮った写真は幅4000pxもあって、そのままでは重すぎます。リサイズ（幅1200〜1600px程度）→圧縮のひと手間で、ページの表示速度が見ちがえます。
べんりワザ画像を軽くしてページを速くする圧縮のやり方と便利なサイトは、この記事にまとめてありますまとめ
- 迷ったら「写真も図もWebP、ロゴだけSVG」——透過が必要ならPNGかWebP、動くものは動画で
- 形式の違いは「情報の間引き方」——JPGは写真向きに間引く、PNGは間引かない、SVGは指示書
- 形式選びとセットでリサイズと圧縮——ここまでやって、はじめて「Webに優しい画像」になる
- 写真をPNGで保存しない。それだけでページが数倍重くなる
- 用意する幅は「表示する幅の2倍」。記事の写真なら1200px前後で足りる
画像はページの容量の大半を占める「重さの主犯」です。形式を選べるようになると、あなたのサイトは目に見えて速くなります。