[14-2] 画像形式について(GIF、JPEG、PNG の違い)

最終更新日:2017年10月14日  (初回投稿日:2011年05月16日)

今までのサンプルでも、GIF、JPEG、PNG といった画像形式が登場しています。
今回はこれらの画像形式の特徴と、どんな画像にどの形式が向いているかをまとめます。

ベストな画像形式を選ぶことで、
●画質がキレイ(ジャギーやムラが出ない、出にくい)
●ファイルサイズが必要以上にサイズが大きくなるのを防ぐ

といったメリットがあります。

「ビットマップ」と「ベクター」

画像は大きく分けて、
ビットマップ グラフィクス(bitmap graphics)
ベクター グラフィクス(vector graphics)があります。

ビットマップ グラフィクス

ラスタグラフィクス(raster graphics)とも呼ばれ、
画像をドットで表現したグラフィックデータです。拡大するとドットの集合であることがわかります。
描画ソフトで「ラスタライズする」というのは、ビットマップ化するってこと。
ブラシツールなどはベクターのままだと使えないので、ビットマップ形式にしてから使うための機能ですね。

ちなみに「ラスタ(raster)」とは「電源を入れたブラウン管の、走査線の軌跡による白い画面」のことだそうです。(ピンとこない…ブラウン管知ってる世代だけど)

ウェブで使うビットマップ グラフィクスは、「GIF」「JPEG」「PNG」です。

また、Google が開発している「WebP」(ウェッピー)もあります。
対応ブラウザは、Chrome, Opera, Android Browserとまだ少ないですが(2017年10月記)、ファイルサイズが小さいフォーマットです。

ちなみに、この他に ビットマップには、BMP、TIFF、PICT など があります。

ベクター(ベクトル)グラフィクス

ベクター グラフィクスは、画像を「点座標」とそれを結ぶ線・面の計算式で描き、それに塗りや線幅などの描画情報をプラスして表現した、言わば数学的な描画データです。
なので、どんなに拡大してもエッジはキレイで滑らか。

Illustratorなどで、ベジェ曲線で描画するあれです。

ウェブで使うベクター グラフィクスは、「SVG」です。

SVG に関しては、<svg>要素の記事で詳しく書いています。
[70-1] svg要素でベクターグラフィクスを埋め込もう
こちらをご覧ください↑(この記事では割愛します)

くっきりした 色数が少ない画像なら GIF

下の画像は GIF形式 で保存しています。ファイルサイズは 3.47K です。

アンチエイリアスもかけて無く、使用色は8色なので、GIFが最適。
このように クッキリはっきりした、色数の少ない画像は、GIFにするのがベスト。

ドット絵や、色数の少ないアイコン、マーク、文書の画像(白地にテキストとか)なら、JPEG より GIF のほうがクッキリして、ファイルサイズも小さくなります。
また、色数の少ないグラデーションなら、JPEG よりも GIF のほうが、ムラなくキレイな場合もあります。

GIF は 8bit カラーで 表示色数が 256色までなので、色数が少ない画像向きで、ファイルサイズが小さいんです。

ちなみに、同じ画像をJPEG形式で保存したのがこちら。
背景のドットなどが若干モヤっとして、ファイルサイズは 18.10K で GIF の 5倍です。

まあ、パット見はたいして変わらない(笑)けど、問題なのは「ファイルサイズ」
1つがたった何キロバイトの世界でも、たくさん集まれば違ってきます。
(時間経過でサーバに画像が蓄積したときに、3G なのと 18G なのじゃずいぶん違うから)

GIF には「透過」という機能もあり、背景を透明にしたりできます。
これは JPEG には不可。
PNG は可能で、しかも GIF より色数を多く扱えます。(PNG の話はこの後)

写真は JPEG

下の画像は JPEG形式 で保存しています。ファイルサイズは9.36k。

JPEG圧縮率は80%にしています。
オリジナル写真と比べると若干平坦にはなりましたが、ボトルのグラデーションは生きていて、全体にハイキーで柔らかい色の流れは表現できています。
このように 微妙な色調があり色数の多い画像は、JPEGにするのがベスト

JPEG は、24ビットカラーで 約1677万色表示できます。ですので GIF より微妙な色調を表示するのに向いています。

同じ画像を GIF にすると、グラデーション部分のムラやモアレが目立ち、ファイルサイズも 23.31k。JPEGより3倍近く大きくなってしまいます。

写真なら JPEG がいいですね。

透過なら PNG

下の画像はPNG形式。ファイルサイズは 76k です。

PNG は GIF と同じように 8bit も扱えるし、24bit、48bit も可能です。(48bit はディスプレイ側がまだムリかな)
JPEG と同じ色数を扱えて、しかも GIF のように透過が可能

24ビットカラー 約1677万色の表示で、透過が可能なのが PNGの最大のメリットです。

上の PNG画像の背景を HTML上で黒にしてみました。
GIFでも透過は可能ですが、8bit なので写真には向きません。
下部のパプリカの映り込み部分は、透明度70%ですが、そのままの透明度で表示できています。

高速化が期待できる WebP

Google 開発の WebP(ウェッピー)は、PNG や JPEG に比べて25%以上もファイルサイズが軽くなり、表示速度の高速化が期待できます。
JPEG と違って、非可逆圧縮でも透明部分が作れるそうです。

2010年9月に公開されましたが、今のところ対応ブラウザは、Chrome・Opera・Android Browser(2017年10月記)です。
他のメジャーブラウザ(Edge, Safari, Firefox)が対応すれば、PNG や JPEG に置き換わるフォーマットなんでしょうね。

参考:A new image format for the Web  |  WebP |  Google Developers
ブラウザ対応状況:Can I use | WebP

「GIF」「JPEG」「PNG」の特徴をまとめてみました。

特  徴 得意な用途 苦手な用途
GIF 8bit、256色まで表示
●動画が可能
●透過が可能
可逆圧縮(デコードで元の品質に戻る事ができる)
可逆圧縮については下で説明します↓
○くっきりしたイラストやアイコンなど色数が少ないものに最適
○アニメーションGIF
○透過
○インターレース(画素を飛び飛びに表示。最初はぼんやり、次第に鮮明にする)
▲256色までなので、写真など、色数が多い画像には不向き
JPEG 約1677万色表示(24bit)
不可逆圧縮(デコードで元の品質には戻らない→ファイルサイズを激減させる事ができる)
不可逆圧縮については下で説明します↓
○写真(ファイルサイズをかなり軽くできる)
○プログレッシブ(粗い表示から次第に鮮明にする)
▲くっきりしたイラストやアイコンなどは、鮮明さがなくなり不向き
▲透過は不可
PNG 8bit、24bit、48bit表示
(48bitなら約281兆色を表示可能)
●ピクセル単位で透過が可能
可逆圧縮
○劣化が少ない
○透過
○インターレース
 

「可逆圧縮・不可逆圧縮」については、すぐ下の項で触れています。

GIF(Graphic Interchange Format)

CompuServe社で画像交換用に開発された画像形式。
GIFの圧縮用アルゴリズム「LZW」は「Unisys社」が特許を持つため、GIF対応ソフトウェアを「販売/配布」するときは「Unisys社」に対してライセンス料が発生。
(GIF画像がらみの商売をしない限り関係ない話です♪)

JPEG(Joint Photographic Experts Group)

GIFと異なり、特許のない画像形式とされていたが、2002年 Forgent Networks, Inc. が特許権を宣言。
2006年に同社がJPEG特許に関するすべての訴訟で和解に達したと発表。

PNG(Portable Network Graphics)

特許料が必要なGIF問題を避けるため、圧縮アルゴリズムにライセンス料不要のdeflation方式を採用。(これはZip(圧縮フォーマット)でも採用されている方式)

「可逆圧縮」「不可逆圧縮」ってなに?

GIF、JPEG、PNGは 保存時に圧縮してファイルサイズを小さくしています。
ただし圧縮方法が違うんです。
GIF と PNG は「可逆圧縮」 JPEG は「不可逆圧縮」です。

ちなみに、圧縮はエンコード、その逆の伸張はデコードといいます。
広義では、エンコードは「ある形式のデータを、ある方式で別の形式のデータに変換すること」を言い、デコードはその逆。

「可逆圧縮」とは

読んで字のごとく「逆が可能」な圧縮です。
デコードで元の品質に戻すことができます
数学的な方法でファイルサイズを小さくしているので可能なんです。
(数学的方法とは、「AAAAAA」を「6A」って書いちゃう、みたいな。)
失うことがないので「ロスレス(loss less) 圧縮」ともいいます。
ただ、下で説明する不可逆圧縮に比べて圧縮率はたいしたことない。デコードに時間がかかるというデメリットもあります。

「不可逆圧縮」とは

「逆がムリ」な圧縮です。
デコードで元の品質には戻れません。
人が感知できない情報部分(コンピュータなら違いがわかる色数や音域など)を削除してファイルサイズを小さくする方法だからです。(捨てちゃったら戻せないので)
失ってしまうので「ロシー(lossy) 圧縮」ともいいます。
ただし、この方法だとめっちゃサイズダウンするので、圧縮率が高いんです。
(CDの音もこの不可逆圧縮だそうです)

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.