PC・モバイルのトラブル
WebPとJPGとPNG、実際にどれを使うべきか
写真、ロゴ、スクリーンショット、ウェブ向けに WebP、JPG、PNG を比べます。万能の最適形式はありません。用途、透明度、サイズで選びます。
すべての画像に最適なたった一つの形式はありません。写真は JPEG か WebP が合うことが多いです。透明度のあるグラフィック、ロゴ、輪郭のシャープな UI は PNG か WebP が合うことが多いです。
いまのウェブ配信では、その画像でサイズと画質の兼ね合いと互換性が成り立つなら、WebP は有力な候補になりやすいです。
WebP が常に最善とは限りません。PNG が常に最高画質とも限りません。JPEG が常に最小とも限りません。手元のファイルで結果を比べてください。
これは形式の選び方の案内であり、PNG のサイズトラブルシュートではありません。すでに PNG が大きすぎるなら PNGファイルが大きいのはなぜ？壊さずに小さくする方法 から始めてください。ここで問うのは、どの形式を選ぶかです。
まず検討しやすい出発点です。決まりではありません。
| 用途 | まず検討 |
|---|---|
| 写真 | JPEG / WebP |
| 透明度のあるロゴ | PNG / WebP |
| 文字や UI のスクリーンショット | PNG / lossless WebP |
| ウェブのヒーロー画像 | WebP / JPEG |
| ピクセルを正確に保つ | PNG / lossless WebP |
| 古い環境まで広く通したい | JPEG / PNG |
JPEG とは何か
JPEG は写真に広く使われる lossy 形式です。alpha 透明度はありません。画質とファイルサイズはトレードオフで、lossy の再エンコードを繰り返すと劣化が積み重なることがあります。JPG と JPEG は同じ形式です。普段の違いは拡張子であり、品質ではありません。
PNG とは何か
PNG は lossless 圧縮を使い、alpha 透明度を持てます。ロゴ、アイコン、UI、スクリーンショット、輪郭のシャープな図に向きます。写真を入れると PNG は大きくなりがちです。PNG は圧縮されています。非圧縮ではありません。
WebP とは何か
WebP は lossy 圧縮、lossless 圧縮、alpha 透明度に対応します。いまのブラウザでは広く使えます。WebP が常に小さいわけではありません。サイズは画像、エンコーダ、品質設定、lossy か lossless かで変わります。
WebP と JPEG、写真ならどちらがよいか
どちらも写真に使えます。JPEG は一般的で、多くの作業の流れに乗ります。WebP はエンコーダ、設定、画像次第で、見た目が近いまま競合する、あるいはより小さいファイルになることがあります。決まった節約率はありません。
WebP と PNG、透明度ならどちらがよいか
どちらも透明度を保てます。PNG は lossless で、ピクセルを正確に保ちたいときに予測しやすいです。WebP は lossy にも lossless にもでき、場合によってはサイズを下げられます。透明だからといって WebP が常に小さくなるわけではありません。
JPG と PNG、どちらを選ぶべきか
写真ならまず JPEG を検討します。ロゴ、アイコン、UI、透明度ならまず PNG を検討します。写真が多いスクリーンショットは JPEG や WebP の方が小さくなりやすいことがあります。文字や UI のキャプチャは PNG が合いやすいです。すべてのスクリーンショットを PNG にする必要はありません。
写真に向く形式はどれか
まず比べるのは JPEG と WebP であることが多いです。PNG にも写真は入れられますが、ファイルはずっと大きくなりがちです。それは傾向であり、法則ではありません。
ロゴに向く形式はどれか
ロゴは透明度、シャープな縁、平坦な色が必要なことが多いです。ラスターなら PNG か lossless WebP が候補になります。ベクターのロゴなら SVG が合うことがあります。ただし 画像変換 は SVG、HEIC、GIF アニメーション、RAW、PDF を変換しません。
スクリーンショットに向く形式はどれか
UI、文字、図表、平坦なグラフィックは PNG か lossless WebP が合いやすいです。写真が多いスクリーンショットは JPEG や lossy WebP の方が小さくなることがあります。強い lossy 圧縮は小さな文字を傷めます。
ウェブサイトに向く画像形式はどれか
WebP はいまのウェブで有力な候補になり得ます。それでも中身、透明度、互換性、サイズ、画質、プラットフォームの対応を見てください。JPEG と PNG も妥当な選択です。すべての素材を最初から WebP に変える必要はありません。
いちばん小さいファイルになる形式はどれか
場合によります。形式、lossy か lossless か、品質、寸法、複雑さ、alpha、エンコーダのすべてが結果を変えます。変換して比べてください。形式名だけで最小ファイルを決めないでください。
ファイルサイズを決めるのは形式だけではない
4000×3000 の画像をおよそ 1000×750 で見せるなら、寸法は形式と同じくらい効くことがあります。サイズはピクセル数に正確には比例しません。画像サイズ変更 が変えるのは幅と高さであり、形式ではありません。
lossy と lossless、いちばん効く違い
lossy は情報を一部捨ててサイズを下げます。JPEG は lossy です。WebP は lossy にも lossless にもできます。PNG は lossless です。lossless が常に見た目で優れるわけではありません。先の lossy で失った細部を取り戻すこともできません。
透明な背景に対応する形式はどれか
PNG と WebP は透明度を持てます。JPEG に alpha はありません。画像変換 で透明な PNG や WebP を JPEG にすると、その画素は背景色で埋まります。既定は白で、別の色も選べます。
画質がいちばんよい形式はどれか
絶対的な最善はありません。PNG と lossless WebP はピクセルを lossless に保てます。JPEG と lossy WebP は設定次第です。JPEG を PNG にしても失った細部は戻りません。
JPG を PNG にすると画質は上がるか
上がりません。JPEG 圧縮ですでに失った細部は戻りません。ファイルは大きくなることがあります。そのサイズ変化はどのファイルでも保証されません。
PNG を JPEG にする意味があるのはいつか
写真で透明度が不要で、ピクセルの正確さより小さいファイルを優先するときに意味を持つことがあります。透明度は失われ、lossy 圧縮がかかります。文字や線画にはアーティファクトが出ることがあります。
WebP に変える意味があるのはいつか
ウェブ配信、写真、グラフィック、透明度で、許容できる画質のままファイルを小さくしたいときに意味を持つことがあります。出力を確認してください。WebP が小さいファイルを保証するわけではありません。画像変換 の WebP は品質設定でエンコードします。典型的なブラウザの lossy 経路であり、lossless の保証ではありません。
いまの形式が用途に合い、サイズも問題なければ、変換する必要はありません。形式を変えること自体が最適化ではありません。lossy 変換を繰り返すと画質は落ち得ます。
画像形式を選ぶ簡単な手順
透明度が要るなら PNG か WebP。写真なら JPEG か WebP。シャープな文字、UI、平坦な図なら PNG か lossless WebP。まだ大きいなら圧縮、寸法、別形式を比べます。
- 形式を選ぶ
- 透明度が要る？ PNG か WebP
- 写真？ JPEG か WebP
- シャープな文字や UI？ PNG か lossless WebP
- まだ大きい？ 圧縮、リサイズ、比較
- 実際のファイルを比べる
ブラウザで JPG、PNG、WebP を変換する
NEXNARA 画像変換 は JPG、PNG、WebP のあいだで変換します。ピクセルの幅と高さはそのままです。
品質設定は JPG と WebP に効きます（既定 90%）。PNG は lossless です。透明度は PNG か WebP で保たれます。JPEG への変換では背景色で埋まり、既定は白です。
20 MB を超えるファイルは処理しません。HEIC、SVG、GIF アニメーション、RAW、PDF は受け付けません。
画像処理そのものはブラウザ内で行います。このツールではファイルを NEXNARA のサーバーへ送りません。広告やサイトのほかの機能はネットワークを使います。
寸法を変えずに画像を圧縮する
画像圧縮 は形式を保ちます。JPG と WebP は品質設定を使います。PNG は lossless に再エンコードされ、小さくなってもわずかであることが多く、透明度は保たれます。JPG や WebP の無劣化を約束するものではありません。上限は 20 MB です。表示サイズより画像がはるかに大きいなら、形式を変えるより 画像サイズ変更 の方が効くことがあります。
同じ絵で形式を比べたいなら 画像変換 を開き、まだ大きいなら圧縮するかリサイズしてください。
FAQ
WebP は JPG よりよいか
常によいわけではありません。どちらも写真に使えます。WebP は見た目が近いまま小さくなることもあれば、そうならないこともあります。JPEG はいまも広く互換です。
WebP は PNG よりよいか
常によいわけではありません。どちらも透明度を保てます。PNG は lossless で、ピクセルを正確に保ちたいときに予測しやすいです。WebP は場合によって小さくなります。
JPG と PNG、どちらを使うべきか
ほとんどの写真は JPEG です。ロゴ、UI、透明度、シャープな文字は PNG です。スクリーンショットは写っているもの次第です。
ウェブサイトにいちばんよい画像形式はどれか
WebP はいまのウェブで有力な候補になりやすいです。互換性、透明度、正確なピクセルが要るときは JPEG と PNG も妥当です。
WebP は透明度に対応するか
対応します。PNG も対応します。JPEG は対応しません。透明な画像を JPEG にするとその画素は埋まります。画像変換 の既定は白です。
JPG を PNG にすると画質は上がるか
上がりません。JPEG 圧縮ですでに失った細部は戻りません。ファイルは大きくなっても、見た目がシャープになるとは限りません。