JPG・PNG・WebPの使い分けと、ファイルサイズを小さくする方法

提出フォームに「500KB以下のJPG」と書かれていたり、ブログに載せた写真が重すぎると警告されたりすることがあります。形式を変えれば解決しそうに思えますが、形式の選び方を間違えると、かえってサイズが大きくなることもあります。この記事では、JPG・PNG・WebPの違いと画像に合った形式の選び方、そして目標サイズに合わせて小さくする手順を説明します。

3つの形式は圧縮方式と透明度が違います

形式	圧縮	透明な背景	動く画像	向いている画像
JPG	非可逆	非対応	非対応	写真
PNG	可逆	対応	通常のPNGは非対応	スクリーンショット、図表、ロゴなど線や文字がくっきりした画像
WebP	非可逆・可逆の両方	対応	対応	写真もグラフィックも

非可逆圧縮は、人の目に目立ちにくい情報を捨ててサイズを小さくします。写真には効果が大きい一方、文字や線のように境界がはっきりした画像では、輪郭がにじんだりノイズが出たりしやすくなります。
可逆圧縮は、元のピクセルをそのまま復元できるように保存します。画質は変わりませんが、写真のように色が複雑な画像ではサイズが大きくなります。
WebPは両方の方式を使えます。Googleは、同じ画質で比べると、非可逆WebPはJPGより25〜34%、可逆WebPはPNGより26%小さいとしています。ただし、結果は画像によって異なります。

画像の種類に合った形式の選び方

写真：JPGかWebPを使います。PNGで保存すると、画質は同じでもサイズが数倍になることがあります。
スクリーンショット・図表・文字の多い画像：PNGか可逆WebPが向いています。JPGで保存すると文字の周りがぼやけます。
透明な背景が必要なロゴ・署名：PNGかWebPを使います。JPGは透明度を扱えないため、透明な部分が白などの単色で塗りつぶされます。
単純な図形でできたアイコン・ロゴ・図表：できればSVGを使います。SVGはピクセルではなく線や図形を記録するベクター形式なので、拡大しても崩れず、サイズもごく小さく済みます。写真のように色が複雑な画像には向きません。
提出先が形式を指定している場合：その形式に従います。WebPは最近のブラウザーならほぼ対応していますが、古いソフトや一部の提出システムでは受け付けないことがあります。

実際の例として、このサイトでもツールページに入れる説明用の図を、最初はPNGで用意してから、WebPとSVGに切り替えました。色やグラデーションの多い図61枚は、WebPにしたところ合計が約36MBから約2.7MBになりました（約92%減）。1枚で1MBを超えていた図の中には、100KB前後になったものもあります。単純な図形で描いた画像ツールの図はSVGにしたところ、同じ図でPNGが34KBのとき、SVGは1KB未満でした。同じ図でも、内容に合った形式を選べば、画面での見た目はほぼそのままに、サイズだけを大きく減らせます。

形式を変えてもサイズが小さくならない場合

形式の変換は、画像を新しい形式で圧縮し直す作業であり、サイズを小さくする機能ではありません。次のような場合は、かえって大きくなったり、画質だけが落ちたりします。

JPGの写真をPNGに変えると、たいていサイズが大きくなります。可逆圧縮では、写真の複雑な色を効率よく小さくできないためです。
すでに強く圧縮されたJPGをもう一度JPGで保存すると、劣化がさらに進みます。サイズは少し小さくなっても、画質は元より悪くなり、捨てられた情報は元に戻りません。
画質の低い画像をPNGに変えても、画質は良くなりません。すでに失われた情報を、形式が取り戻してくれるわけではありません。

サイズを小さくするのが目的なら、形式よりも先に、次の2つを見るほうが確実です。

サイズを小さくする2つの方法：品質とピクセル数

品質は、非可逆圧縮でどれだけ情報を捨てるかを決める値です。ブラウザーで画像を作るときは0〜1の値で指定し、JPGやWebPのように非可逆圧縮を行う形式にだけ適用されます。PNGには品質の値がありません。品質を少し下げるだけで、目立った違いがないままサイズが大きく減ることも多いのですが、下げすぎると輪郭が崩れ、ノイズが出ます。

ピクセル数は、画像の横×縦の大きさです。横と縦をそれぞれ半分にすると、ピクセル数は4分の1になるため、サイズも大きく減ります。画面で見たり文書に入れたりする画像なら、スマートフォンのカメラの元の解像度が必要になることはあまりありません。

目標サイズに合わせるときは、次の順番で進めるのがおすすめです。

写真ならJPGかWebP、グラフィックならPNGというように、画像に合った形式を選びます。
実際に使うサイズよりピクセルがはるかに多い場合は、まず縦横を使うサイズに合わせて小さくします。
JPG・WebPなら、品質を下げながら、目標サイズに収まる中で最も高い品質を探します。
品質を下げても目標に届かないときは、ピクセル数をもう少し減らします。PNGは品質の値がないため、この方法だけが使えます。

KBが1,000バイトか1,024バイトかを確認しましょう

「500KB以下」というとき、1KBを1,000バイトとして数える場合と、1,024バイトとして数える場合があります。差は2.4%と小さいものの、上限ぎりぎりで保存すると、一方の基準では超えてしまうことがあります。提出先の基準がわからないときは、目標サイズを上限より少し低めにしておくと安全です。

小さくしたあとに確認すること

元の画像は別に保存しておきます。 小さくしたり圧縮し直したりした画像は、元の画質に戻せません。
結果は元の大きさで確認します。 小さなプレビューでは問題なさそうに見えても、大きく表示すると、文字がにじんでいたりノイズが出ていたりすることがあります。
透明な部分があった場合は、形式を確認します。 JPGで保存すると、透明な背景が単色に置き換わります。
写真の付加情報が消えることがあります。 ブラウザーで画像を描き直して保存すると、撮影日時や位置情報などのメタデータは、通常は一緒に保存されません。情報を消したいときには利点ですが、必ず残したい場合は元の画像を使ってください。