スマホで撮った写真をブログに上げる、商品画像を出品する、プレゼン資料に貼る── 画像を扱う場面は日常的にあるのに、JPEG・PNG・WebP・HEIC・SVGの使い分けは意外と整理されていません。このページでは、画像フォーマットの全体像と 「圧縮するとなぜ画質が落ちるのか」「何を選べばいいか」を整理します。
画像フォーマットの全体マップ
現在よく使われる画像フォーマットは、大きくラスター(点の集まり)とベクター(数式で描く)に分かれます。
| 形式 | 種別 | 得意 | 不得意 |
|---|---|---|---|
| JPEG | ラスター | 写真・グラデーション | 透明背景不可・文字が滲む |
| PNG | ラスター | 透明背景・文字・図形 | 写真ではJPEGより重い |
| WebP | ラスター | 写真・図形どちらも軽い | Excel・古いツールが非対応 |
| HEIC | ラスター | iPhone写真(高効率) | Windows・Androidで開けない |
| GIF | ラスター | 短いアニメーション | 256色まで・写真には不向き |
| SVG | ベクター | ロゴ・アイコン・図形(拡大しても劣化しない) | 写真は表現できない |
なぜ画像は圧縮できるのか
画像は大量のピクセル(点)の色情報の塊です。 例えば1920×1080の写真は約207万ピクセルあり、各ピクセルに3バイト(RGB)のデータがあるため、 無圧縮なら約6MBになります。これを縮める手法は2系統あります。
- 可逆圧縮(PNG・WebP無損失モード):「同じ色が連続する部分」を効率よく記録する。元の画質を完全に保つが、写真ではあまり縮まない。
- 非可逆圧縮(JPEG・WebP・HEIC):人間の目に分かりにくい色の細かい変化を「間引いて」記録する。劇的に縮むが、画質はわずかに落ちる。
写真には非可逆圧縮(JPEG・WebP)が向き、文字や図形には可逆圧縮(PNG・WebP無損失)が向きます。 誤った組み合わせ──たとえば文字だらけのスクリーンショットをJPEGで保存する──と、 文字が滲んで読みにくくなります。
用途別の選び方フロー
- SNS投稿(X・Instagram):JPEG(品質80%)またはWebP。1枚あたり1〜2MBに抑える。
- メール添付:JPEG(品質75%)。複数枚なら全体で10MB以内に。
- Webサイト掲載:WebP優先。フォールバック用にJPEG/PNGも用意。表示サイズ以上に大きくしない。
- 商品写真(フリマ・EC):JPEG(品質85〜90%)。背景透過が必要ならPNG。
- ロゴ・アイコン:SVG最優先。SVGが使えない環境向けにPNGも用意。
- 印刷用途:JPEG(品質95%以上)または無圧縮TIFF。Web用に縮めた画像は印刷で荒れるので使い回さない。
- iPhoneで撮った写真の配布:HEIC→JPEG変換してから渡す。Windowsユーザーが開けないトラブルを防ぐ。
解決アプローチの全体マップ
| やりたいこと | 使うツール |
|---|---|
| ファイルサイズを小さくしたい | 画像圧縮 / WebP変換 |
| 表示サイズを小さくしたい | 画像リサイズ |
| iPhoneのHEICを開きたい | HEIC→JPEG変換 |
| PNG ↔ JPEG ↔ WebP を変換 | 画像フォーマット変換 |
| 背景を透明にしたい | AI画像背景削除 / 白背景透過 / 指定色透過 |
| 写真の顔を隠したい | 顔自動モザイク / 部分モザイク・ぼかし |
| プライバシー情報(位置情報)を消したい | 画像GPS・Exif情報削除 |
| 画像内の文字を取り出したい | 日本語OCR(画像→テキスト) |
各ツールはすべてブラウザ内で完結するため、家族写真や個人情報を含む画像も 外部にアップロードせずに加工できます。詳しい仕組みやコツは下の記事一覧から 各カテゴリ記事を参照してください。