JPG・PNG・WebPの違いと選び方:画像を軽くするための基礎知識
ブログやWebサイトに画像を載せるとき、メールで写真を送るとき、「どの形式で保存すればいいのか」と迷ったことはないでしょうか。画像の形式にはそれぞれ得意・不得意があり、正しく選ぶだけでファイルサイズが何分の一にもなることがあります。
3つの形式の比較
| 形式 | 圧縮の方式 | 透明 | 向いている画像 |
|---|---|---|---|
| JPG(JPEG) | 非可逆(画質を少し落として小さくする) | × | 写真 |
| PNG | 可逆(画質を落とさない) | ○ | スクリーンショット、図、ロゴ、文字の入った画像 |
| WebP | 非可逆・可逆の両方 | ○ | 写真・図のどちらにも使える |
JPG(JPEG):写真のための形式
JPGは、人の目には気づきにくい細かな情報を省くことで、写真を大きく圧縮できる形式です。保存するときに「画質(品質)」を指定でき、数値を下げるほどファイルは小さくなります。
- 写真なら、画質60〜80%程度でも見た目の違いはほとんど分かりません。
- 文字や線がくっきりした画像では、ふちにもやもやしたノイズが出やすくなります。
- 保存し直すたびに少しずつ画質が落ちるので、元の画像は別に残しておきましょう。
PNG:くっきりした画像のための形式
PNGは、画質をまったく落とさずに保存できる形式です。透明な部分を持てるので、ロゴやアイコンにもよく使われます。
- スクリーンショットや図、文字の入った画像は、JPGよりきれいに、しかも小さく保存できることが多いです。
- 写真をPNGで保存すると、JPGの何倍もの大きさになってしまいます。
- 色の数を256色以下に減らす「減色」をすると、見た目をほとんど変えずに大きく小さくできます。てのひらPDFの画像圧縮は、この減色に対応しています。
WebP:軽さを重視するなら
WebPは、Googleが開発した比較的新しい形式です。写真向けの非可逆圧縮と、図向けの可逆圧縮の両方に対応し、透明も使えます。同じくらいの画質なら、JPGやPNGより小さくなることが多いのが特長です。
現在の主要なブラウザはすべてWebPの表示に対応していますが、古い画像編集ソフトや一部のサービスでは開けない・アップロードできないことがあります。人に送る画像や、どこで使うか分からない画像は、JPGやPNGにしておくと安心です。
そのほかの形式
- HEIC(HEIF):iPhoneの写真の標準形式です。JPGより小さく保存できますが、Windowsや一部のサービスでは開けないことがあります。開けないときは「HEIC→JPG変換」でJPGにできます。
- AVIF:WebPよりさらに小さくできる新しい形式です。対応しているソフトはまだ限られます。
- GIF:256色までしか使えない古い形式です。短いアニメーションに使われます。
形式よりも効く「画像の大きさ」
ファイルサイズに一番大きく影響するのは、実は形式よりも画像の縦横のピクセル数です。スマホの写真は長い辺が4000ピクセル以上あることも珍しくありませんが、Webページで表示するなら1200〜1920ピクセル程度で十分です。縦と横のピクセル数をそれぞれ半分にすると、データの量はおよそ4分の1になります。
使う場所に合わせて、まず画像リサイズで大きさを整え、それから画像圧縮で画質を調整するのが効果的です。
迷ったときの選び方
- 写真 → JPG(画質70〜80%)。とにかく軽くしたいならWebP
- スクリーンショット・図・文字入りの画像 → PNG(減色すればさらに軽く)
- 透明な部分がある画像 → PNGまたはWebP
- 人に送る・どこで使うか分からない → JPGまたはPNG