JPEG・PNG・WebP・RAWの違いと使い分け方|画像形式の基礎知識
こんにちは、ツバサです。
「この画像、JPEGにする?PNGにする?」という場面が仕事でよく出てきます。なんとなく選んでいた部分もあったので、改めて各形式の違いを整理しておくことにしました。ECやSNSでの実務を意識しながらまとめています。
もくじ
主要な画像ファイル形式の比較一覧
| 形式 | 圧縮方式 | 透過 | アニメーション | 主な用途 |
|---|---|---|---|---|
| JPEG | 非可逆圧縮 | × | × | 写真全般、商品画像 |
| PNG | 可逆圧縮 | ○ | × | ロゴ、透過が必要な画像 |
| WebP | 非可逆・可逆両方 | ○ | ○ | ウェブ最適化画像 |
| GIF | 可逆圧縮 | ○(1bit) | ○ | アニメーション、リアクション |
| RAW | 非圧縮〜可逆 | — | × | カメラの生データ、後処理前提 |
| HEIC | 非可逆圧縮 | × | × | iPhone撮影の標準形式 |
JPEG(ジェイペグ)
写真に最もよく使われる形式です。「非可逆圧縮」といって、ファイルサイズを小さくする代わりに一部の画像情報を捨てています。圧縮率を上げるほどファイルサイズは小さくなりますが、画質が落ちていきます。
Webで写真を表示する用途では、品質設定80〜85程度(フォトショップや各ソフトの設定値)でファイルサイズと画質のバランスが取れるとされています。Amazon・楽天市場の商品写真にはJPEGが最も広く使われています。
JPEGを選ぶ場面
・商品写真(白背景)をECにアップする
・人物・風景・料理などの写真をSNSやブログに載せる
・ファイルサイズを小さくしたい
PNG(ピング)
「可逆圧縮」なので、圧縮しても画像情報が失われません。そのため同じ内容ならJPEGよりファイルサイズが大きくなりがちですが、透過(背景なし)に対応しているのがPNGの最大の特徴です。
テキストや細かい線が含まれる画像、ロゴ、UIスクリーンショットなどはPNGが向いています。JPEGで保存すると文字の周囲がにじみやすくなるため、テキスト入りの画像はPNGが原則です。
WebP(ウェッピー)
Googleが2010年に開発した比較的新しい形式です。JPEGより同画質でファイルサイズを約25〜34%削減できるとされています(Google Developers - WebP)。透過もアニメーションも対応しており、「JPEGとPNGの両方を代替できる」形式として注目されています。
2024年時点でChrome・Firefox・Safari・Edgeのすべてが対応済みで、ウェブサイトの表示速度改善(Core Web Vitals対策)を目的に採用するサイトが増えています。ただし、古いバージョンのソフトウェアで開けない場合があるため、納品ファイルや印刷データとしての利用は注意が必要です。
GIF(ジフ)
1987年に登場した古い形式で、最大256色しか使えないため写真には向きません。ただし、複数フレームを持つアニメーションに対応しており、「動くスタンプ」的な用途でSNSやSlackで今も広く使われています。
静止画としては画質が粗く、ファイルサイズも大きくなるため、写真目的での新規採用はほぼありません。
RAW(ロー)
デジタルカメラが撮影時にセンサーで受け取った生データをそのまま記録した形式です。メーカーによってCR2(Canon)・NEF(Nikon)・ARW(Sony)などの名称があります。
JPEGはカメラ内部で現像・圧縮されますが、RAWはその処理前のデータのため、後からLightroomやCapture Oneなどのソフトで露出・ホワイトバランス・色調を大幅に調整できます。特にホワイトバランスはRAWなら撮影後でも完全に変更可能です。
RAWで撮影するときの注意点
・1枚あたり20〜50MB程度になるため、SDカードや保存容量が多く必要
・そのままSNSやECにアップロードできない(JPEG変換が必要)
・専用ソフトがないと開けない(iPhoneの場合はiOS対応のRAW形式あり)
HEIC(ヒーク)
iPhoneのカメラが標準で使用する形式(iOS 11以降)です。JPEGより圧縮率が高く、同等の画質でファイルサイズを約半分にできます。ただし、WindowsやAndroidとの互換性に問題が生じることがあります。
iPhoneで撮った写真をWindowsで開こうとしたら形式が合わず開けなかった、という経験がある方も多いと思います。iPhoneの設定で「互換性優先」にするとJPEGで保存されるため、複数デバイスで使う場合はこちらの設定が無難です。
EC担当視点での使い分けまとめ
| 用途 | 推奨形式 | 理由 |
|---|---|---|
| Amazon・楽天の商品写真 | JPEG | 対応必須、ファイルサイズを抑えやすい |
| 透過背景の商品カットアウト | PNG | 透過対応、ロゴ合成用途 |
| Webサイト表示速度を上げたい | WebP | 同画質でファイルサイズ削減 |
| 商品撮影の元データ保存 | RAW | 後から現像・色調補正できる |
| SNSへの投稿 | JPEG | 汎用性が高く、SNS側で自動変換されることが多い |
この記事ではEC業務でよく使う形式を中心にまとめたが、プロのレタッチ現場ではTIFF・PSD・HEICなども用途に応じて使い分けられている。東京レタッチのnoteでは印刷入稿やグッズ制作を含めた8形式の比較が解説されている。
T いまさら聞けない…? 画像ファイル形式8種類の違い|東京レタッチ公式ノート note.com/tokyo_retouch/n/n2bb1d01e0599よくある質問
関連する記事
ツ RAWとJPEGどちらで撮るべきか|初心者が押さえておきたい違いと選び方 tsubasa-memo.github.io/raw-vs-jpeg.html ツ Amazon・楽天・メルカリ 商品画像ルール違反を防ぐ比較まとめ【2026年版】 tsubasa-memo.github.io/ec-image-rules.html ツ 商品画像を圧縮する方法|EC掲載前に知っておきたいファイルサイズの話 tsubasa-memo.github.io/compress-product-image.html ツ 背景切り抜き・白抜きの方法比較|AI無料ツールからプロ外注まで【2026年版】 tsubasa-memo.github.io/background-white.htmlよく読まれている記事
ツ 写真レタッチの外注料金まとめ|15社の相場を1ページに集約【2026年版】 tsubasa-memo.github.io/retouch-pricing-database.html ツ レタッチ外注サービス比較|個人でも依頼できるおすすめの7社【2026年最新版】 tsubasa-memo.github.io/retouch-services.html ツ 画像加工・写真編集の外注先はどこがいい?代行サービスの選び方 tsubasa-memo.github.io/image-editing-outsource.html ツ レタッチとは?写真の修正・補正・加工の違いをわかりやすく解説【初心者向け】 tsubasa-memo.github.io/what-is-retouch.html