はじめに
「Webサイトで画像を使うとき、 JPG、PNGどちらがいいの？」
「JPGとPNGって何が違うの？」
そんな悩みはないでしょうか。
今回は、JPGとPNGの違いについて解説していきます。
ちょっと自己紹介
髭猿（ひげざる）@webディレクター
未経験からwebデザイナーに転職、現在はwebディレクター。
web初心者のうちに知りたかったことを中心に発信しています。
本記事のテーマ
今回の記事では
「JPG」と「PNG」の使い分けと、それぞれの違いについて解説します。
結論：基本的には「JPG」でOKです
まず結論から言うと、
webサイトは、「JPG（JPEG）」と覚えておきましょう。
ポイント①：
基本的には「JPG（JPEG）」でOK。
「JPG」がWebサイト向きな３つの理由
JPGを使用する理由は、下記の３つです。
理由①： ファイルが軽く、ページ読み込みが速くなる
1つ目の理由は、「ファイルが軽い」ことです。
これが最大の理由と言っても過言ではありません。
ファイルの重さは読み込み速度に影響し、Webサイトの読み込みが遅いと、ユーザーが離脱してしまうリスクや、SEO評価にも影響があります。（googleの公式ブログでも、 SEOに悪影響だと明言されています。）
理由②：表現できる色数が多い
2つ目の理由は、「色数が多い」ため、より自然な表現ができることです。
具体的には1677万色の色を再現でき、これは画像形式の中では多い部類です。
風景・人物・商品写真などのグラデーション表現が可能で写真に向いています。
理由③：互換性が高く、ほぼすべてのブラウザ・デバイスで表示可能
３つ目の理由は、「互換性が高い」ことです。
互換性が高い、というのは意外なようで大きなメリットです。
近年、JPGよりも軽くて高画質な画像形式はいくつか開発されていますが、互換性においてまだまだ対応ブラウザが少ないというデメリットがあります。
JPGとJPEGは別物？
「JPG」と「JPEG」は名前が違うだけで、中身は同じものです。
昔は拡張子が３文字までという決まりがあったため「JPG」が使われていましたが、3文字縛りがなくなってからJPEGも使われるようになった、という背景があります。
「PNG」は透明背景が必要なときに
では、JPGではなくPNGを使うべき場面はどんなときでしょうか？
アイコンなど透明な背景が必要なとき
それは「背景を透明にしたいとき」です。
ロゴやアイコンなど、背景を透明にしたいときはJPGではなく「PNG」を使用しましょう。
JPGは特性上、透明の表現ができないためです。
ポイント②：
背景を透明にしたいときは「PNG」と覚えておこう。
「JPG」と「PNG」の違い
JPGとPNGの違いを表にまとめるとこんな感じ。
繰り返しですが、
基本的には「JPG」でOK、背景を透明にしたいときには「PNG」と覚えておきましょう。
| JPG（JPEG） | PNG | |
|---|---|---|
| ファイルサイズ | 小さい（圧縮される） | 大きい（可逆圧縮） |
| 画質の劣化 | あり（非可逆圧縮） | なし（可逆圧縮） |
| 透明 | なし | あり |
| 主な用途 | 写真（風景や人物） | ロゴ・アイコン |
その他の画像フォーマットは？
JPGとPNGのほかにもWebでよく使われる画像フォーマットはいくつかあるので、さらっと見ておきましょう。
SVG （エスブイジー）
SVG （エスブイジー）はベクター形式の画像形式で、その特徴は自由に大きさを変えられる点です。
ベクター形式は、直線や曲線などを座標上の数値演算で表現するため、拡大・縮小をしても画質は一切劣化しません。
一方で、PNGやJPEG、GIFなどはラスター形式といい、ピクセル（画素）の集まりとして表現されています。
そのため、ラスター形式の場合、拡大しすぎるとギザギザが目立ってしまうので拡大には向いていません。
GIF （ジフ・ギフ）
GIF（ジフ・ギフ）は画像形式のひとつで、簡易的なアニメーションを表示することができます。
instagramやX（旧Twitter）の動くスタンプでも使用されているので馴染みがありますね。
表現できる色数は256色と少ないです。
WebP （ウェッピー）
WebP（ウェッピー）はgoogleが開発した新しい画像形式で、軽量かつ、表現できる色数が多く、さらに透過もできるという、革新的なものになっています。
ですが、新しい技術ということもあり、対応ブラウザが少ないことがデメリットです。
[PNG→JPG] 画像形式を変換したいときは？
画像の形式を変換する方法は主に２つです。
- web上にあるサービス
- 「photoshop」などの画像加工アプリ
webサービスの場合は、「PNG JPG 変換」と検索すると、どんな画像形式でも大体出てきます。
PNGをJPGに変換したい場合
「png jpg 変換」と検索すると、下記のようなサービスが出てきます。
画像をアップロードすれば、すぐに変換して新しい画像形式でダウンロードできます。
まとめ：基本は「JPEG」透明なら「PNG」
今回のまとめです。
まとめ：
基本的は「JPEG」、透明な背景なら「PNG」
Webサイトで使用する画像については、基本的にはこの考え方で良いです。
コメント
分かりやすかったです！
髭猿さんありがとうございました。