ファイルを保存する際、「JPEG」と「PNG」のどちらで保存すればいいのか悩む方も多いのではないでしょうか。
JPEGとPNGは、どちらも画像データを保存する際の画像ファイル形式です。適している画像ファイルが異なっており、JPEGは色数の多いデータに使用し、PNGは色数が少ないデータに使用するのがおすすめです。
この記事では、JPEGとPNGの違いやメリット・デメリット、そして使用用途について詳しく解説します。
画像の印象は、サイトの印象まで左右する重要なポイントです。ぜひ最後までお読みいただき、最適なデータ保存の参考にしてください。
サイトの成果改善でお困りではないですか？
「サイトからの問い合わせを増やしたいが、どこを改善すべきか分からない…」そんなお悩みをお抱えの方、ニュートラルワークスにご相談ください。
弊社のサイト改善コンサルティングでは、サイトのどこに課題があるかを実績豊富なプロが診断し、ビジネスに直結する改善策をご提案します。
目次
画像の圧縮形式「JPEG」「PNG」の違いとは
JPEGとPNGは画像の圧縮形式のことです。
画像は元データのままではファイルデータが大きすぎるので、圧縮する必要があります。その際に使用するのがJPEGやPNGなどの圧縮形式です。
JPEGとPNGの基礎知識や違いについて詳しく見ていきましょう。
「JPEG」「PNG」は拡張子のひとつ
JPEGとPNGは、拡張子のひとつです。
拡張子とは、ファイルの種類を識別するための文字列で、ファイル名と拡張子を「.（ドット）」で区切ります。
ファイルごとに代表的な拡張子を見ていきましょう。
画像ファイル
- .JPEG
- .PNG
- .GIF
音楽ファイル
- .mp3
- .wma
動画ファイル
- .mov
- .mp4
- .avi
このように、ファイルにはさまざまな拡張子が存在します。
ファイルを開くためには、拡張子によって専用のアプリケーションが必要です。例えば「.doc」のファイルはWordで、「.xsx」はExcelで開きます。
また、拡張子を変更するときも注意しましょう。なぜならファイルデータは拡張子によって作成したアプリケーションを判断しているため、安易に変更してしまうと、データが開けなくなったり、データが破損したりする可能性もあるからです。復元できないこともあるため、拡張子の変更は慎重に行ってください。
「JPEG」「PNG」の違いを比較
ここからは、JPEGとPNGの違いについて解説します。
JPEGはフルカラーの1,677万色を表現できる拡張子で、微細なグラデーションまで美しく表現可能です。カメラなどで撮影した画像の保存に向いています。
PNGは、256色と1,677万色の2つの形式が選択できるため、画像データによって使い分けします。
JPEGは、一度圧縮した画像を元の大きさに戻せない「非可逆圧縮」のため、保存後にやり直しがききません。もし画像を大きいサイズで使用する場合は、保存の前に慎重に確認しましょう。
加えて保存を繰り返すと画像が劣化してしまうため注意が必要です。
一方でPNGは、圧縮後も画像データを元に戻せる「可逆圧縮」で、保存を繰り返しても画像が劣化しません。
JPEGは透過が出来ないため、「背景を透明にしたい」「画像を切り抜いて透明で使用したい」場合はPNGで保存した方がいいでしょう。
フルカラーで画像を保存するとPNGの方がデータが重くなります。
そこで、フルカラーの画像はJPEG保存がおすすめです。背景を透過したい場合や、ロゴや文字を含む画像は、PNGで保存して綺麗に表現しましょう。
| JPEG | PNG | |
|---|---|---|
| 色数 | 1,677万 | 256色／1,677万色 |
| 圧縮 | 非可逆圧縮 | 可逆圧縮 |
| 透過 | 不可 | 可 |
| 容量 | 軽い | 重い |
| 主な用途 | カメラで撮影した写真 フルカラーの写真 |
Webサイトの写真画像 ロゴ 文字を含む画像 |
JPEGの特徴をわかりやすく解説
JPEGの特徴を以下の3つの項目から詳しく解説します。
- JPEGとは？
- JPEGの特徴やメリット・デメリット
- JPEGが活用される用途
JPEGとは
JPEGとは、Joint Photographic Experts Group（ジョイント・フォトグラフィック・エキスパーツ・グループ）の略語です。静止画像データを圧縮する形式のひとつで、拡張子は「.jpg（.jpeg）」で、「ジェイペグ」と読みます。
「ジェイペグ」には、「.jpg」と「.jpeg」の2種類が存在しますが、どちらも同じものと捉えて問題ありません。
なぜ2種類の拡張子があるのかというと、1980年代に普及していたOSの仕様に「拡張子は3文字まで」という規約があったためです。しかし、現代はそのような規約はなく「.xlsx」「.docx」などの4文字の拡張子も幅広く使用されています。
「.jpg」「.jpeg」は機能的に違いはありませんが、どちらを使うか悩んだ場合は、一般的に普及している「.jpg」を選ぶといいでしょう。
JPEGの特徴やメリット・デメリット
先述した通り、JPEGはフルカラーの1,677万色を表現できるのがメリットです。繊細な色合いが重なり合う、自然や動物を撮影した写真も美しく表現できます。
また目では分からない色の差異を削除して、重い画像を軽くできるのもメリットです。データサイズも軽くなるので、容量が気になる方はJPEGで保存しましょう。
しかし、デメリットとして以下の3つがあります。
- 何度も保存すると画像が劣化してしまうこと
- 透過ができない
- 一度圧縮した画像は元に戻せない
JPEGのデータは何度も圧縮（保存）してしまうと画像データが劣化してしまうため、編集や加工が必要な写真には向いていません。
また単色で表現するアニメーションやロゴなどは、粗く仕上がってしまう場合があります。加えて透明度の変更もできないため、背景を透明にする際は、JPEG以外の拡張子がおすすめです。
JPEGが活用される用途
JPEGのメリットやデメリットを解説したうえで、おすすめの活用用途を以下にまとめました。
- カメラで撮影した写真を保存するとき
- 色数が多い場所・人を移した写真を保存するとき
- フルカラーで画像を美しく保存したいとき
このように、JPEGはフルカラーの画像を保存するときに最適な拡張子となります。
グラデーションなどを美しく表現したいときにおすすめです。
PNGの特徴をわかりやすく解説
PNGの特徴を、以下の4つの項目から詳しく解説します。
- PNGとは？
- PNGの特徴やメリット・デメリット
- 「PNG-8」「PNG-24」「PNG-32」の違いとは？
- PNGが活用される用途
PNGとは
PNGは、Portable Network Graphics（ポータブル・ネットワーク・グラフィックス）の略称です。JPEGと同様に、画像データの保存に使われるファイル形式のひとつです。
PNGは、GIFに変わる拡張子として1996年に登場しました。
拡張子は「.png」と表記します。読み方は「ピング」であったり、「ピン」といいます。
PNGには、「PNG-8」「PNG-24」「PNG-32」の3種類が存在します。
それぞれの詳しい概要は以下の章で解説します。
PNGの特徴とメリット・デメリット
PNGのメリットをまとめると、以下の4点です。
- 画像が劣化しにくい
- 透過（透明化）ができる
- 色数が多いフルカラーの画像も対応している
- 単色のイラストやロゴに適している
PNGはJPEGと違って、同じ色を保存するのが得意なので、イラストなどの単色で塗りつぶす画像に最適です。また背景の透過もできるため、画像を切り抜いて背景を透明にし、スタンプのように扱うこともできます。
PNGは可逆圧縮を使用しており、何度保存しても画像が劣化しにくいのがメリットです。
JPEGはデータの圧縮の際にデータを削除するので劣化します。しかしPNGは保存の際にデータを削除しないため、画像の劣化がありません。
PNGのデメリットは、フルカラーの画像を保存する際にファイルサイズが重くなることです。
ファイルサイズが大きいと、送信に時間がかかったり、保存場所の容量を必要以上に使ってしまいます。保存容量には限りがあるため、データはできるだけ軽い方が好まれます。
そのためデータが重くなりやすいフルカラーの画像を保存するときは、JPEGで保存するのがおすすめです。繊細な色分けができて画像の表現も高く、ファイルサイズも軽くなります。
「PNG-8」「PNG-24」「PNG-32」の違い
PNGは表現可能な色数の違いによって「PNG-8」「PNG-24」「PNG-32」の3つに分けられます。
PNG-8
GIFと同様に256色を表現し、ファイルのサイズも「軽い」のがメリットです。色数が少ないイラストやロゴにも適しています。透過もできますが、画像と背景の境目が粗く見える可能性があります。
PNG-24
PNG-24は、JPEGと同様に1,677万色のフルカラーを表現することができます。グラデーションがある画像など、色数が多いデータに最適です。しかし色数が多い分、ファイルサイズは重くなります。
また、PNG-24には透過情報がありません。透明にすることはできるのですが、「透明を表現している」状態で、厳密な「透過」とは違います。
PNG-32
PNG-32は、PNG-24をより高画質にしたものです。1677万色のフルカラーで、透過も可能です。綺麗な状態で保存できます。
しかしファイルサイズが大きいためWebには適していません。
Webはデータの保存容量も限られるため、ファイルサイズは出来るだけ軽い方が好まれます。そのため、Webでは「PNG-8」もしくは「PNG-24」が主流です。
PNGが活用される用途
PNGは色数が少ないイラストや透過が必要なイラストや画像に最適です。
PNGが活用される用途を以下にまとめました。
- イラストやロゴなど色数が少ないファイルデータ
- 背景などを透過するデータ
- 高画質で色数が多いファイルデータは「PNG-24」もしくは「PNG-32」を使用
PNGは輪郭がはっきりとしているイラストなどに適しています。
画像はJPEG、イラストやロゴはPNGと覚えておくといいでしょう。
その他の画像形式4種類を紹介
画像圧縮形式の中にも、さまざまな拡張子が存在します。
JPEGとPNG以外の代表的な4種類の拡張子を紹介します。
- GIF
- TIFF
- BMP
- WebP
順番に見ていきましょう。
GIF
GIFとは、「Graphics Interchange Format」の略称です。読み方は「ジフ」で、拡張子は「.gif」と表記します。
256色で表現するため、色数の少ないロゴ、ボタン、アイコン、イラストなどに適しています。色の透過も可能で、「PNG-8」と同様の役割を果たします。
PNGと同じく可逆圧縮の画像形式なので、小さいファイルサイズに保存した後、元のサイズに戻すこともできます。
GIFの一番の特長は、アニメーション画像を作成できることです。
色数が少ないシンプルなアニメーションを作る際に活用できます。
TIFF
TIFFは「Tagged Image File Format」の略称です。読み方は「ティフ」で、拡張子は「.tif（.tiff）」と表記します。
TIFFは、サイズが大きなデータや高解像度の画像に使われます。データサイズが大きいため、Web業界で使用することは少なく、一般的には印刷業界で使用されることがほとんどです。
BMP
BMPは、「Microsoft Windows Bitmap Image」の略語です。読み方は「ビットマップ」もしくは「ビーエムピー」で、拡張子は「.bmp」です。
圧縮されていない画像ファイルなので、JPEGなどの圧縮された画像と比べると、劣化されずに綺麗な状態です。
TIFFと同様に、データサイズが大きいため、Webでの使用はおすすめできません。OSなどのプログラムが扱いやすいデータとなります。
WebP
WebPとは、Googleが開発したオープンな静止画像ファイルフォーマットです。
トラフィック量軽減とサイトの表示速度の短縮を目的に開発されました。
読み方は「ウェッピー」で、拡張子は「.webp」です。
画像が軽くなることで表示速度を上げ、SEOの向上も期待されています。
近頃は、次世代の画像フォーマットとして注目されています。
【種類別】画像の拡張子の選び方
A hand is reaching out and touching digital photo gallery
画像の拡張子の選び方を、以下の3つの項目から解説します。
- 色数が多い画像
- 色数が少ない画像
- 透過した画像
基本的に、画像の拡張子は「JPEG」を使うといいです。
しかし使用目的によって拡張子の使い分けが必要になることもあるため、概要を理解しておきましょう。
種類別に詳しく解説するため、実際に画像を保存する際の参考にしてください。
色数が多い画像
色数が多い画像やイラストには「JPEG」を使用しましょう。
JPEGは、フルカラーの1,677万色に対応しており、細かなグラデーションまで表現できます。自然や動物、人物にも対応しており、影まで美しく表現できるのが特長です。
フルカラーは「PNG-24」「PNG-32」も対応していますが、データが重くなってしまうため、JPEGの方が使い勝手がいいといえます。JPEGは、色数はそのままの状態で、圧縮率を変更できるため、高画質を保ったままファイルサイズを軽くすることができるのが魅力です。
画像の美しさを残したまま、ファイルのデータを軽くできるため、Webで使用する画像はJPEGで統一するのがおすすめです。
色数が少ない画像
色数が少ない画像はPNGがおすすめです。
PNGは色と色の境目までハッキリと表現できるため、粗が少なく美しい仕上がりとなります。
色数が少ない画像とは、例えば以下のようなものを指します。
- ロゴ
- アイコン
- グラフ
- 図
- サイトメニュー
サイトで使用されるグラフィックは、色数が少ないものが多いため、サイト制作の際などはPNGで統一するのもおすすめです。
透過したい画像
透過するファイルはPNGを使用しましょう。
透過とは、透明度を調整することです。「画像・イラストの背景を透明にしたい」「切り抜いた部分だけ透明にしたい」というときはPNGで保存しましょう。JPEGのファイルデータを、PNGにすることもできます。例えば、AdobeのPhotoshopを使った場合、JPEGの画像の一部を切り抜き、背景を透明に加工した際に保存するときに「PNG」で保存します。
PNGの3種類の中でも、PNG-24は透過情報がないため、PNG-8もしくはPNG-32で保存しましょう。
JPEGとPNGの違いは何？まとめ
JPEGは、表現できる色数が1,677万色もあるため、グラデーションがかかった写真やイラストなど、フルカラーの画像やイラストを扱うときに使用します。色数は変わらず、画像のサイズだけ圧縮することができるため、グラデーションを綺麗に表現したまま画像を軽くできるメリットもあります。
PNGは、単色をハッキリと表現できるため、色数が少ないファイルデータを保存する際に活用しましょう。JPEGだと色の境目が荒くなり、ぼんやりと見える可能性もあるため、ロゴや図、グラフなどの色数が少ないファイルの保存はPNGがおすすめです。合わせて透過したいファイルもPNGで保存します。
PNGもフルカラーで表現できますが、データが重くなってしまう短所もあります。その場合は、色数が多いものはJPEGを使いましょう。
画像の美しさは、ユーザーに与えるサイト全体の印象まで左右します。加えて画像を最適化することで、表示速度が変わり、その結果SEOに影響することも。
サイト運営を円滑にするためにも、JPEGとPNGの違いを理解して使いこなすことが重要です。
サイトの成果改善でお困りではないですか？
「サイトからの問い合わせを増やしたいが、どこを改善すべきか分からない…」そんなお悩みをお抱えの方、ニュートラルワークスにご相談ください。
弊社のサイト改善コンサルティングでは、サイトのどこに課題があるかを実績豊富なプロが診断し、ビジネスに直結する改善策をご提案します。
