画像形式の選び方と使い分け｜JPEG・PNG・SVG・WebPの違い

「この画像、JPEGとPNGのどっちで保存すればいいんだろう…」
書き出しの画面で毎回止まってしまう。デザインを始めた人がだいたい通る場所です。

形式（フォーマット）の選び方は、好みでも慣れでもありません。写真か図形か・透過が要るか・Webか印刷か。この3つを見れば答えは1つに絞れます。
この記事では、実務でよく使うJPEG・PNG・GIF・SVG・WebPの5つを、選ぶ順番のとおりに整理します。読み終えたら、書き出しで迷う時間がなくなりますよ◎

画像形式を選ぶときに見るのは3つだけ

フォーマットというのは、画像の保存形式のことです。同じ絵でも、どの形式で保存するかで容量も画質も変わります。

• 中身は写真か、図形か：写真は色数が多く、ロゴや図解は色数が少ない
• 背景を透過するか：透過が要るなら使える形式が絞られる
• どこで使うか：Webサイトか、印刷物か

この3つを先に決めてから形式を見ると、迷いません。逆に形式から考えると、いつまでも決まりません。

JPEG：写真を軽く保存する形式

JPEGは写真のための形式です。人の目が気づきにくい色の情報を捨てて容量を減らします。これを非可逆圧縮と呼びます。捨てた情報は元に戻りません。

得意なのは、色がなめらかに変化するもの。風景写真や人物写真はJPEGが最も軽くなります。
苦手なのは、文字やイラストの輪郭です。境界がくっきりした線をJPEGにすると、まわりに細かいノイズが出ます。バナーの文字がなんとなく汚い、というときはたいていこれが原因です。

透過もできません。背景を抜いた画像をJPEGで保存すると、抜いた部分が白く塗りつぶされます。

もう1つ注意したいのが、上書き保存です。JPEGは開いて保存し直すたびに画質が落ちます。編集の元データは制作ソフトの形式（.psdや.aiなど）で残して、JPEGは書き出し専用にしてください💡

PNG：透過と文字のくっきりを守る形式

PNGは情報を捨てずに圧縮します（可逆圧縮）。保存し直しても画質は落ちません。透過も扱えます。

向いているのは、文字が入った図解・ロゴ・アイコン・スクリーンショット。輪郭がそのまま残るので、線がくっきりします。
向かないのは写真です。色数が多いものを情報を捨てずに保存するので、同じ写真でもJPEGの何倍にもふくらみます。

書き出し画面でPNG-8とPNG-24を選べることがあります。PNG-8は色を256色までに減らす軽い方、PNG-24はフルカラーの方です。単色のアイコンならPNG-8で十分に軽くなります。

GIF：短い動きが要るときだけ

GIFは256色までしか扱えない古い形式です。静止画で使う場面はもうほとんどありません。同じ用途ならPNGの方がきれいで軽いです。

今も残っている使いどころは、数秒の短いアニメーション。操作の手順を見せる小さな動きなどです。ただし秒数が延びると一気に重くなります。長い動きなら動画（MP4）に切り替えてください。

SVG：拡大しても崩れないロゴとアイコン

ここまでの3つは、色のついた点をならべて絵を作ります。SVGだけ仕組みが違います。「ここからここへ線を引く」という図形の情報を保存する形式です。

点ではなく図形なので、どれだけ拡大してもぼやけません。名刺サイズのロゴをそのまま看板サイズに使えます。容量も小さく、CSSから色を変えることもできます。

使えるのはロゴ・アイコン・グラフ・地図など、図形で描いたものだけ。写真をSVGにはできません。IllustratorやFigmaで作ったデータなら、そのままSVGで書き出せます。

WebP：Web用の軽い形式

WebP（ウェッピー）はGoogleが作ったWeb向けの形式です。写真もイラストも扱えて、透過もアニメーションもできます。

いちばんの利点は容量です。同じ見た目でJPEGより2〜3割軽くなります。表示が速いページは読む人が離れにくいので、Webで使う画像はWebPを第一候補にして大丈夫です。主要なブラウザはすべてWebPを表示できます。

ただしWeb専用だと考えてください。印刷所への入稿では受け付けてもらえません。クライアントに素材として渡すときも、JPEGかPNGに変換して送ると親切です。

迷ったときの早見表

作ったもの・使う場所	選ぶ形式
写真をWebに載せる	WebP（使えなければJPEG）
写真を印刷に回す	JPEGの最高画質、または制作ソフトの元データ
ロゴ・アイコン	SVG
文字が入った図解・バナー	PNGかWebP
背景を透過したい	PNG・WebP・SVG
数秒の短い動き	GIF（長いならMP4）

表を1つだけ覚えるなら、「写真はJPEGかWebP、文字と図形はPNGかSVG」。ここから始めれば、大きく外しません。

ミニ実践：同じ画像を3形式で書き出して比べる

頭で覚えるより、1回自分の目で見た方が早いです。5分で終わります。用意するのは写真1枚だけ。無料のブラウザツールを使うので、インストールも要りません。

1. スマホで撮った写真を1枚選ぶ。文字が写り込んでいるもの（看板やメニュー表）だと差が分かりやすいです
2. ブラウザで Squoosh（squoosh.app）を開いて、その写真をドラッグする
3. 右側の形式をMozJPEGにして書き出し、容量をメモする
4. 同じ手順でOxiPNG（PNG）とWebPでも書き出して、それぞれ容量をメモする
5. 3つの容量を並べる。写真ならPNGだけ極端に重いはずです
6. 最後に画面を200%に拡大して、文字の部分を見比べる。JPEGだけ輪郭がざらついて見えます

余裕があれば、JPEGの品質を90・60・30と下げて同じ比較をしてみてください。どこから見た目が崩れるか、自分の基準ができます。だいたい品質70〜80あたりが落としどころです。

やってしまいがちな失敗

JPEGを何度も上書き保存する

修正のたびにJPEGを開いて上書きすると、少しずつ画質が落ちます。1回では気づきませんが、5回目くらいで空や肌のグラデーションが汚くなります。
直し方は、元データを別で残すこと。JPEGは最後の書き出しだけに使ってください。

文字入りのバナーをJPEGで書き出す

文字のまわりに細かいノイズが出て、なんとなく安っぽく見えます。
直し方は、PNGかWebPに変えるだけ。それだけで文字の輪郭が戻ります。

Web用の画像をそのまま印刷に回す

形式が合っていても、画像の大きさが足りないと印刷でぼやけます。形式と解像度は別の話なので、両方そろえてください。
必要なピクセル数の出し方は、次のレッスンで計算式まで説明します。

ロゴをPNGだけで管理する

あとで大きく使いたくなったとき、PNGだと作り直しになります。
直し方は、ロゴを受け取る時点でSVGももらっておくこと。制作側なら、SVGとPNGの両方を納品しておくと後で困りません。

よくある質問

JPEGとJPGは違うものですか？

同じものです。昔のWindowsが拡張子を3文字までしか扱えなかったので、.jpegを縮めた.jpgが広まりました。中身は同じなので、どちらで保存しても構いません。

結局、PNGとWebPはどちらを使えばいいですか？

Webに載せるならWebPです。同じ見た目でPNGより軽くなります。
PNGを選ぶのは、相手に素材として渡すとき。古い編集ソフトはWebPを開けないので、渡す相手が決まっていないならPNGが安全です。

SVGにした画像が表示されません

写真をSVGに変換しようとしていませんか。SVGが扱えるのは図形だけです。
WordPressで表示できない場合は、初期設定でSVGのアップロードを止めているのが原因です。プラグインで許可するか、PNGに切り替えてください。

画像が重いと検索順位に影響しますか？

表示速度は評価の一部なので、影響します。ただ、順位より先に読む人が離れます。
写真1枚が1MBを超えているなら、まずそこを直してください。形式をWebPに変えて、表示する大きさまで縮めるだけで半分以下になります。

次に学ぶこと

最後に整理します。

• JPEG：写真向け。軽いが劣化する。透過できない
• PNG：文字・図解・透過。劣化しないが写真だと重い
• GIF：短い動きだけ。静止画ならPNG
• SVG：ロゴとアイコン。拡大しても崩れない
• WebP：Web用の第一候補。軽くて透過もできる

形式が決まっても、画像の大きさが足りなければ結局ぼやけます。次は解像度とdpiの決め方で、必要なピクセル数の出し方を覚えましょう。Webと印刷で数字がまったく違うので、ここを押さえると入稿でつまずかなくなります。

書き出したデータをどう納品するかはデザインカンプの作り方と制作の流れで扱います。全体の並びはデザイン基礎コースの目次から確認できます。