WebP・JPG・PNG の違いと使い分け（写真・ロゴ・SNS別）
更新日：2026年6月15日 / 情報源：Google Developers WebP公式・MDN Web Docs 2026年6月時点
先に結論（迷ったら）
- 写真・スマホ画像 → JPG（汎用性・容量バランス）
- ロゴ・図・スクリーンショット・透過画像 → PNG（劣化なし・透明対応）
- ブログ・サイト掲載 → WebP（同じ見た目で2〜3割軽い）
- メール・社内システム・古い相手 → JPG/PNG（WebP非対応リスク回避）
3形式の特徴を一覧で
| 項目 | JPG | PNG | WebP |
|---|---|---|---|
| 登場年 | 1992年 | 1996年 | 2010年（Google） |
| 圧縮方式 | 非可逆 | 可逆 | 可逆/非可逆 両対応 |
| 透過対応 | × | ○ | ○ |
| アニメーション | × | △（APNG） | ○ |
| 同サイズの容量 | 中 | 大（写真の場合） | 小（JPGより2-3割減） |
| 主要ブラウザ対応 | ○ すべて | ○ すべて | ○ Chrome/Edge/Firefox/Safari/iOS14+ |
| 古いシステム | ○ | ○ | ×（IE・古い社内システム） |
| 向いている内容 | 写真 | ロゴ・図・透過 | Web全般 |
用途別の選び方
写真をメール・LINEで送る
JPG一択。相手の環境を選ばず、画質80%なら見た目もきれい。WebPで送ると古いメーラーや会社のセキュリティソフトで弾かれる可能性があります。スマホで撮った写真も拡張子は最初からJPGなので、そのまま圧縮するだけでOK。
ロゴ・スクリーンショット・透過素材
PNG。可逆圧縮なので何度保存しても劣化せず、文字や輪郭がぼやけません。透明な背景（角丸ボタンや切り抜き画像）も再現できます。色数が多くない範囲（ロゴ・図・UI部品）ならPNGでも十分軽くなります。
ブログ・ホームページ掲載
WebP。同じ見た目でJPGの2〜3割減、PNGなら半減することも。Google検索のCore Web Vitals（ページ速度評価指標、LCP）の改善に直結します。WebP非対応の古い環境向けに「picture要素＋フォールバック」で配信するのが現代的な作法ですが、個人ブログならWebPだけでも実用上問題ありません。
SNS投稿（Instagram・X・Facebook）
JPGでOK。SNSは内部でWebPに自動変換されることが多いので、こちら側で頑張ってWebP化する意味は薄いです。投稿前に画質80%・最大幅1080pxに圧縮しておけば、アップロード時間と画質のバランスが取れます。
印刷物（チラシ・名刺・冊子）
JPG画質95%以上 or PNG。印刷は300dpiが基本、画面表示の72dpiとは要求が違います。圧縮しすぎるとモアレやノイズが出やすいので、印刷用途では「軽さ」より「画質」を優先してください。WebPは印刷工程の入稿システムで非対応のことが多いので避けるのが無難。
公的書類・申請書（マイナポータルなど）
提出先の指定どおり。多くの自治体・行政システムは JPG/PNG のみ受け付けます。WebPは公的システムでまだ対応が遅れており、提出後に「ファイル形式が不正です」と弾かれる事例があります。指定がない場合もJPG/PNGを選んでください。
変換時の落とし穴
JPG ↔ JPG の繰り返し保存で劣化する
JPGは非可逆圧縮なので、開いて加工して保存…を繰り返すたびに画質が落ちます。元のJPGを残しておき、加工は原本から派生させるのが鉄則。
PNG → JPG変換で透過部分が黒く塗りつぶされる
JPGには透明という概念がないため、PNGの透明部分は変換時に背景色（多くは黒や白）で埋められます。透過素材は必ずPNGかWebPのままにしてください。
WebPからJPG/PNGに戻すと容量が増える
WebPで小さくしたものを後からJPGやPNGに戻すと、元より大きくなることがあります。画質も完全には戻りません。送り先がWebP非対応とわかっているなら、最初からJPG/PNGで圧縮するのが正解。
スマホで撮った写真はもとから少し劣化している
iPhone・Androidとも、撮影時にJPG圧縮（または独自の高効率フォーマットHEIC）がかかっています。「原本」と思っていても完全な無劣化ではないので、印刷用途などはRAW撮影モードを使ってください。
使い分けて圧縮・変換する
サクッと画像圧縮は JPG・PNG・WebP の相互変換に対応。用途に合わせて選んで圧縮できます。
サクッと画像圧縮を使う →