画像を保存するとき、形式を何となく選んでいませんか？
- 写真をPNGで保存したら、ファイルが異常に重くなった
- ロゴをJPEGで渡したら、背景が白く残ってしまった
- スクリーンショットをJPEGにしたら、文字がにじんで読みにくい
こうした失敗のほとんどは、ファイル形式の選び方で防げます。
この記事では、デザイナーを目指す初心者向けに、主な画像形式の違いと使い分けを解説します。
前回の「ベクターとラスターの違い」が分かっていると、さらに理解が早くなります。
結論：まずこの3つだけ覚える
迷ったら、まずはこの対応で大丈夫です。
- 写真 → JPEG（またはWeb掲載ならWebP／AVIF）
- 透過が必要な画像、文字や輪郭が大事な図解・スクリーンショット → PNG
- ロゴ、アイコン、図形 → SVG
| 形式 | 種類 | 圧縮 | 透過 | アニメーション | 得意なもの |
|---|---|---|---|---|---|
| JPEG | ラスター | 非可逆 （劣化する） | × | × | 写真、グラデーションの多い絵 |
| PNG | ラスター | 可逆 （劣化しない） | ○ （半透明も可） | △ （APNG） | 図解、スクリーンショット、切り抜き |
| GIF | ラスター | 可逆 | ○ （半透明は不可） | ○ | 色数の少ない簡単なアニメ |
| SVG | ベクター | － （テキスト形式） | ○ | △ （CSS等で可） | ロゴ、アイコン、図表 |
| WebP | ラスター | 可逆・非可逆の両方 | ○ | ○ | Web掲載全般（軽さ重視） |
| AVIF | ラスター | 可逆・非可逆の両方 | ○ | ○ | Web掲載の写真（さらに軽く） |
まず知っておきたい2つの言葉：非可逆圧縮と可逆圧縮
形式選びの軸になるのが「圧縮」の仕組みです。
- 非可逆圧縮
ファイルサイズを小さくするために、人の目が気づきにくい情報を捨てる方式。捨てた情報は元に戻りません。JPEGが代表例です - 可逆圧縮
情報を捨てずに小さくする方式。何度保存し直しても画質は落ちません。PNGやGIFが代表例です
ここから分かる大事なルールが1つあります。
JPEGで保存を繰り返すと、そのたびに少しずつ画質が落ちていきます。 編集の途中データは後述する「作業用データ」で残し、JPEGは最後の書き出しにだけ使うのが基本です。
JPEG：写真の標準形式
色の変化がなめらかな写真やイラストを、小さいファイルサイズで保存するのが得意です。約1677万色を扱えます。
向いているもの
- 写真全般
- グラデーションの多いイラストや背景画像
- 容量を抑えたいWeb掲載画像やSNS投稿
苦手なもの
- 透過（背景を透明にできません）
- 文字やロゴなど、くっきりした輪郭。境界の周りにモヤモヤしたノイズ（モスキートノイズ）が出やすく、文字が汚く見える原因になります
- 保存の繰り返し（その都度劣化します）
なお、JPGとJPEGは同じ形式です。拡張子の文字数が違うだけで、中身に違いはありません。
PNG：透過と「くっきり」の形式
可逆圧縮で劣化せず、背景を透明・半透明にできます。
向いているもの
- 透過が必要な切り抜き画像、ロゴやアイコンの書き出し
- 文字の入った図解、表、スクリーンショット
- 輪郭をはっきり残したいイラスト
苦手なもの
- 写真。情報を捨てない分、同じ写真でもJPEGの何倍も重くなります。「写真のPNGが重い」のは故障ではなく、形式の性質です
色数を256色までに制限したPNG-8と、フルカラーのPNG-24（透過付きはPNG-32と呼ばれることもあります）がありますが、初心者のうちは「PNG＝劣化せず透過できる形式」という理解で十分です。
GIF：色数は少ないけれど、アニメができる形式
扱える色は最大256色まで。
その代わり、簡単なアニメーションが作れて、透過もできます（半透明は扱えません）。
写真には向きませんが、色数の少ないアイコンや、短いループアニメでは今も使われます。
ただしWebでは、動画形式（MP4／WebM）やWebPアニメのほうが軽くてきれいな場面も増えています。
SVG：ロゴとアイコンの本命
前回の記事で解説したベクター形式で、実体は図形を描く命令を書いたテキスト（XML）です。
向いているもの
- ロゴ、アイコン、ピクトグラム、シンプルな図表やイラスト
- 大きさが変わる前提のWebパーツ。どれだけ拡大してもぼやけません
- 色をコード（CSS）から変えたいアイコンなど
注意点
- 写真には向きません。無理にSVG化すると、かえって重く、表現も変わります
- SVGの中にラスター画像を埋め込むこともできるため、「SVG＝必ずベクター」とは限りません。中身が写真なら実質ラスターです
- フォントはアウトライン化しておかないと、環境によって文字の見た目が変わることがあります
WebP・AVIF：Web掲載の新しい選択肢
どちらも「JPEGやPNGより軽く、きれいに」を目指した新しいラスター形式です。
- WebP
Googleが開発。非可逆・可逆の両方に対応し、透過もアニメも扱えます。同程度の画質でJPEGより25〜35％、PNGより約26％小さいというデータがあります。現在は主要ブラウザで広く使えます - AVIF
さらに圧縮効率が高い新しい形式。写真をより小さくできますが、書き出しに時間がかかったり、対応環境がWebPより少し狭かったりします
実務での使い分けは、こう考えるとシンプルです。
- Webサイトに掲載する
→ WebP（余力があればAVIFも）が有力。
古い環境向けにJPEG／PNGの予備（フォールバック）を用意することもあります - 相手に納品・共有する、印刷に使う
→ まだJPEG／PNGが無難。
WebPやAVIFは「開けない」「入稿で使えない」場面が残っているからです
「新しい形式＝いつでも正解」ではなく、置く場所と渡す相手で決めるのがポイントです。
判断する基準は、3つの質問で決める
保存するときは、この順番で自問すると迷いません。
- 図形やロゴなど、ベクターで作ったものか？
→ はい：SVG（元データはAIなどで別途保管） - 背景の透過が必要か？文字や輪郭のくっきり感が大事か？
→ はい：PNG（Web掲載で軽くしたいならWebPも検討） - 写真か？
→ はい：JPEG（Web掲載ならWebP／AVIFも検討）
アニメーションが必要なら、色数の少ない簡単なものはGIF、写真系や長めのものは動画形式、という分岐も覚えておきましょう。
大事な実務ルール：作業用データと書き出しデータを分ける
初心者がプロと差がつくのは、実はここです。
- 作業用（マスター）データ
PhotoshopのPSD、IllustratorのAIなど、レイヤーやパスが編集できる形式。劣化しない形で手元に残す - 書き出し（配布・掲載用）データ
JPEG、PNG、SVG、WebPなど、使う場所に合わせてマスターから書き出したもの
JPEGで受け取った画像を編集してJPEGで保存し直す、という繰り返しは画質を落とします。
「元データは編集できる形式で残し、配布形式は都度書き出す」。
この習慣だけで、データのトラブルはかなり減ります。
印刷が関係する場合は、入稿先の指定形式（PDFやTIFFなど）に従うのが原則です。形式ごとの正解より、提出先のルールが最優先、と覚えておきましょう。
初心者がやりがちな失敗4つ
1. 写真をPNGで書き出してサイトが重くなる
透過が要らない写真はJPEG（またはWebP）で十分です。PNGの重さは画質の良さと引き換えではありません。
2. ロゴをJPEGで渡して、背景が白く残る・輪郭がにじむ
JPEGは透過できませんし、輪郭にノイズも出ます。ロゴは元データをSVGやAIで、書き出しが必要ならPNGで渡しましょう。
3. スクリーンショットや図解をJPEGにして文字が読めない
文字と直線が多い画像はPNGの領域です。容量より読みやすさを優先します。
4. WebPで納品して、相手が開けない
掲載先がWebでも、相手の制作環境や入稿システムが対応しているとは限りません。納品形式は事前確認が安全です。
よくある質問
Q. 一番画質がいい形式はどれですか？
「劣化しない」という意味ではPNGなどの可逆形式ですが、写真では容量が膨らみます。画質の良さは「劣化のなさ」だけでなく容量とのバランスで決まるため、用途ごとに最適解が変わります。
Q. ロゴはPNGとSVG、どっちで渡せばいいですか？
両方あると確実です。SVGが使える環境（Webなど）ではSVG、Office文書などSVGが扱いにくい場面では大きめのPNG、という渡し方が現場では一般的です。
Q. WebPに全部変えたほうがいいですか？
自分のWebサイトの掲載画像なら有力な選択肢です。ただし納品・印刷・相手の環境が関わるデータはJPEG／PNGのほうが安全な場面が多く、使い分けは残ります。
JPEG・PNG・SVGの違いと使い分け・保存形式のまとめ
- 写真はJPEG、透過とくっきり感はPNG、ロゴとアイコンはSVGが基本
- JPEGは非可逆圧縮で、保存を繰り返すと劣化する。編集用データは別に残す
- GIFは256色まででアニメが得意。WebP・AVIFは軽さが強みの新しいWeb向け形式
- 決め方は「ベクターか」「透過が要るか」「写真か」の3つの質問
- 最終的には、置く場所と渡す相手（と入稿ルール）で決まる
形式選びは地味ですが、ファイルの軽さ、見た目のきれいさ、相手の扱いやすさを同時に左右します。
逆に言えば、ここを押さえるだけで「データの扱いが分かっている人」という印象につながります。
次に学ぶなら、「解像度（dpi・ppi）」と合わせて、書き出しサイズの決め方まで押さえると、Webデータ作りが一気に実務レベルに近づきますよ。
