PNG・JPG・WebP の選び方
2026 年 7 月 28 日確認
Boltpic
現在の Boltpic ツールの動作を説明し、関連する技術資料へリンクしています。画像・ブラウザ・端末によって変わる結果は、固定値ではなく条件とともに示します。
同じ画像でも、PNG・JPG・WebPのどれで保存するかによって容量と見え方は大きく変わります。差は画像の細部、出力サイズ、エンコーダー、品質設定に左右されるため、ひとつの比較値をすべてのファイルに当てはめることはできません。
WebP は有力な出発点ですが、いつも正解とは限りません。透過、細かな文字、写真の階調のうち何を守りたいかを先に考えると、選択を誤りにくくなります。
形式ごとに圧縮の仕組みが異なる
JPG は非可逆圧縮です。画像を 8 × 8 ピクセルのブロックに分け、人の目が気づきにくいディテール — なめらかな領域の微妙な変化や、影の中の質感 — を減らします。写真に向く一方、失われた情報は戻らず、再圧縮を繰り返すと劣化が重なります。編集用の原本を残し、配布用ファイルだけを書き出しましょう。
PNG は可逆圧縮とアルファ透過に対応しています。文字、線、ベタ塗りの多いスクリーンショットや図表をきれいに保てますが、色の変化が複雑な写真では非可逆形式より大きくなりがちです。
WebP は非可逆・可逆圧縮と透過に対応しています。写真では見た目の近い JPG より小さくなることが多く、透過グラフィックでは PNG の代替にもなります。現在の主要ブラウザは対応していますが、外部の投稿先が受け付けるかは別に確認してください。
JPG がいまも活きる場面
JPG の強みは幅広い互換性です。メール添付、文書への挿入、要件が不明なアップロードでは候補にしやすい形式です。送信先が形式や容量を指定している場合は、その条件を優先してください。
弱点も明確です。透過に対応せず、文字や線のような硬い輪郭ににじみが出ることがあります。品質を下げるときは、空のバンディングや肌のブロック状のムラを拡大して確認しましょう。
PNG を選ぶべきとき
スクリーンショット、UI モック、チャート、ロゴ、ドット絵など、輪郭や文字が重要な画像に向いています。ベタ塗り領域は効率よく圧縮され、背景を変えて使う透過ロゴにも扱いやすい形式です。
写真では PNG が大きくなることがあります。透過が必要な写真は PNG と WebP をそれぞれ書き出し、容量・見た目・送信先の対応を比べてください。
Web に載せるなら WebP が既定値
Web に載せる写真なら、まず WebP を試す価値があります。ファイルが小さければ転送時間が短くなり、画像の多いページほど効果が積み重なります。送信先が形式に対応しているか、書き出し後の画質に問題がないかも確認してください。
WebP が適切かどうかは送信先で決まります。Web では有力ですが、文書アプリやアップロードフォームが受け付けない場合があります。対応が不明なら JPG または PNG を用意し、要件が明記されていればそれに従ってください。
覚えておける判断表
| 画像が… | おすすめ | 理由 |
|---|---|---|
| Web サイトに載せる写真 | まず WebP と比較 | 小さくなる場合が多い |
| メール・文書に入れる写真 | JPG | 幅広く対応する写真形式 |
| 文字のあるスクリーンショット | PNG | 文字の輪郭を非可逆圧縮しない |
| 透過が必要なロゴ | PNG か WebP | どちらもアルファチャンネル対応 |
| 編集を続ける統合画像 | PNG | 画素は可逆。レイヤー付き原本は別に保管 |
画質を落とさず変換するコツ
変換時は次の 2 点を押さえてください。可逆形式から非可逆形式への変換は、編集途中ではなく最後の書き出しで行います。また、非可逆圧縮で失われた情報は、PNG に保存し直しても戻りません。強く圧縮された JPG を PNG に変えると、容量が増えても圧縮ノイズは残ります。
Boltpic の形式変換ツールは、選んだ画像を現在のブラウザ内で処理します。形式を選び、結果を比較してから新しいファイルをダウンロードしてください。再変換する可能性がある場合は、元ファイルを別に保管します。