JPEG ・ GIF ・ PNG の違い。じつは曖昧にしか知らないかも…。

こんにちは。

今日は「画像の形式」について発信します。

 

Webの世界では

・JPEG
・GIF
・PNG

主にこの3種類の画像形式が使用されていますが、
これらの違いは何でしょうか。

 

「とりあえず…人物とかの画像はJPEGで…」
「イラストとかはGIF?」

 

と、なんとなくは分かっていても、
明確な役割は知らないなー、という方も多いのではないでしょうか。

 

そこで、まずは各形式の特徴を表にまとめました。

  JPEG GIF PNG
 色数  1670万色 256色 280兆色
 圧縮(≒劣化) あり
(また、圧縮率を調整可能)
 基本なし
(色数を調整可能)
なし
 RGB (Web)対応  ○  ○  ○
 CMYK (印刷)対応  ○  ×  ×
 ファイルサイズ  小~中 (圧縮により変動)  小  中
 主な使用用途 ・データ転送速度を
重視する場面での「写真」
・印刷される可能性のあるもの
 ・ロゴやイラスト
  (2~3色)
 ・アニメーション表現
・透過表現
・色数の多いイラスト
・データ転送速度を
重視しない場面での「写真」
 透過表現  ×  △
(半透明は非対応)
 ○
 アニメーション  ×  ○  △
 使用を避けた方が良い用途  ・ロゴやイラスト
(ぼける)
 ・フルカラー写真
(色を表現しきれない)
・印刷される可能性のあるもの
 ・写真を多く使用しているサイト
(ファイルサイズが大きくなり、
表示速度が下がるため、
JPGが望ましい。)
・印刷される可能性のあるもの

ポイントはPNGがサポートしている色の多さです。

280兆色って。

なにそれ多すぎる。

‥それはそれとして、

よくある疑問を以下にまとめてみました。

 

よくある疑問

▼≪ 透過表現する時って、GIFでもPNGでも同じようなもんでしょ? ≫

→ 結構違います。

GIFは「半透明」に対応していません。
なので透明ではない「塗りの部分」と、「透明部分」の「境界」が、
バキっとしてしまい、荒れてしまったりします。

「GIFの透過表現はイマイチ」です。

 

▼≪ JPEGより圧倒的に色数が多いんだから、写真は全部PNGで良いんじゃないの? ≫

→ 場合によりけりです。

PNGは、もちろん写真も完璧に美しく表現できます。
しかし写真の場合、PNGではJPGより「ファイルサイズ」が大きくなる傾向にあります。

– – – – – – – – – – – –

Webサイトにおいて重要な「表示速度」は、画像のファイルサイズによって大きく左右されるため、
「PNGの方がキレイっしょ♪」として、写真を全部PNGにしてしまうと、
写真全部をJPGにしたサイトよりも読み込みが遅くなってしまいます。

なので

◇ 基本的にWebサイトにおいては、「 写真 」はJPGが最適

◇ 「読み込み速度なんかより、画質が命!」というWebサイトでの写真はPNGが最適

◇ 読み込み速度とか気にしない写真(メールで友達に送るなど)はPNGが最適

となります。

また、PNGは印刷に適さないため、

読み込み速度とか気にしない場面だけど、
印刷される予定がある写真、はJPGが最適となります。

ややこしいですね。

– – – – – – – – – – – –

また、Webでよく使用される「単一のグラデーション」や、
「色数の多いイラスト」レベルだと、PNGの方がキレイで、
かつファイルサイズもJPEGより抑えられたりします。

この場合はJPGを使用する理由はありません。

 

▼≪ PNGの方が圧倒的に色数が多いのに、なんでデジカメはJPG保存が基本なの? ≫

→ PNGが印刷に対応していないためです。
PNGは「CMYK」をサポートしていないため、印刷にはまず使用しません。

よってJPG保存がデジカメの基本、となっています。

 

▼≪ PNGもボケずらいんだから、ロゴとかもPNGで良いんじゃないの? ≫

→ 2~3色の場合はGIFの方がファイルサイズが軽くなりやすいです。
ただ4色以上になってくると、もうPNGがGIFより軽くなってきたりします。

========================

以上となります。

それでは またー。

The following two tabs change content below.
Macbee

Macbee

Macbee

最新記事 by Macbee (全て見る)

関連記事

コメントは利用できません。

ピックアップ記事

ピックアップ記事

  1. 2016-9-28

    アレンジ豊富!自宅で簡単おいしい!ジュースのような日本酒サングリア♪美肌効果も◎

    果物の季節がやってきました! 昨年ブームになった日本酒サングリア。 今年も梨だけでなく様々なフル…

ピックアップ記事

  1. 2016-9-28

    アレンジ豊富!自宅で簡単おいしい!ジュースのような日本酒サングリア♪美肌効果も◎

    果物の季節がやってきました! 昨年ブームになった日本酒サングリア。 今年も梨だけでなく様々なフル…

ピックアップ記事

  1. 2016-6-28

    【売れっ子への道渋滞中】若手芸人高齢化について考える。其の一

    若手といえば何才くらい?テレビで体を張って笑いを取る若手芸人たち。「若手」という言葉を聞けば、誰もが…
ページ上部へ戻る
Top