[14-2] GIFとJPEGの違い

写真やイラストなどの画像をウェブで表示するのに、 GIFとJPEGなどの画像形式がありますが、
その画像に「ベストな形式」を選ぶ必要があります。
今日は、
「ウェブで使用する画像形式。それぞれの特徴。ベストな形式の選び方」をやりましょう。

ベストじゃない画像形式を選ぶと、
●画質が美しくない!(ジャギジャギしてたり、ムラがあったり)
●ファイルサイズがデカイ!(表示が遅い、ビジタのCPUに負担をかける)
といったデメリットがあります。

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

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

●ビットマップグラフィクスは「ラスタグラフィクス (raster graphics)」とも呼ばれ、
画像をドットで表現したグラフィックデータです。言わば原始的な描画データです。
Photoshop(Adobe)などのペイント系ソフトで作る方法がこれ。拡大するとドットの集合であることがわかりますね。

ちなみに「ラスタ(raster)」とは「電源を入れたブラウン管の、走査線の軌跡による白い画面」のことだそうです。(わかるようなわからんような…。)

●ベクター(ベクトル)グラフィクスのベクトルとは、大きさと向きを示す値です。
画像を、点座標とそれを結ぶ線・面の計算式で描き、それに塗りや線幅などの描画情報をプラスして表現した、言わば数学的な描画データです。
Illustrator(Adobe)などのドロー系ソフトで作る方法がこれ。ベジェ曲線で描画するあれです。どんなに拡大してもエッジは滑らかでキレイですよね。

ちなみにベクター形式ソフトで、グラフィクスにフィルターかける前に「ラスタライズ」するって言いますよね。
これはビットマップ化するってことです。ベクターのままじゃフィルターかけるのが無理なのでドットマトリクスにします。

ウェブで使うのはビットマップ「GIF」「JPEG」「PNG」

ウェブでは「ビットマップ」形式がメイン。
ほとんどのブラウザが今のところビットマップしかサポートしてないから。

ビットマップ以外には、 SVG(Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス))という、 ベクター形式(Illustrator とかで作るベジェ曲線のアレ)の画像ファイルもあり、1部のブラウザがサポートしてきています。

そしてビットマップのなかでもブラウザは「GIF」「JPEG」「PNG」をサポート。
というわけで、ウェブ制作で使う画像形式は、たいていこの3つになります。

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

GIF形式がベストな画像

GIFがベストな画像

左の画像はGIF形式で保存しています。
ファイルサイズは3.47k
56kbpsのモデムで0秒の表示です。

(モデム使ってる人はもう多くないけど、一応まだ私は56kモデムをバロメータにしています)

使用色は8色で、アンチエイリアスもかかっていませんから、
保存時の色数が少ないので、GIFがベストな画像形式です。

このように「クッキリはっきり」した、色数の少ない画像は、GIFにするのがベスト。
JPEGにすると↓、見た目はモヤ〜とするし、何と!ファイルサイズも大きくなってしまいます。

GIFがNGな画像

同じ画像をJPEG形式で保存したのがこちら。
ファイルサイズは18.10kで、なんと5倍になってしまいました。
56kbpsのモデムで2秒の表示です。

ロボットの背景の薄いピンクのドットパターンを、上のGIF画像とよく見比べてください。上のGIF画像はクッキリ、下のJPEG画像はモヤ〜っとしてます。ロボットの輪郭線(黄褐色の太い線)も、変ですね。クッキリ感がなくなって。

ファイルサイズだけでなく、画質もGIFのほうが勝ちなのがわかりますね。

JPEG形式がベストな画像

JPGがNGな画像

では今度はJPEGが最適な画像の番です。
左の画像はJPEG形式で保存しています。
ファイルサイズは9.36k
56kbpsモデムで1秒の表示です。

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

このように微妙な色調があり色数の多い画像は、JPEGにするのがベスト
GIFだと↓、見た目がぎくしゃくし、ファイルサイズも大きくなってしまいます。

JPGがベストな画像

同じ画像をGIF形式で保存したものが左。
ファイルサイズは23.31k。JPEGより3倍近く重くなってしまいました。
56kbpsモデムで3秒の表示です。

ボトルのグラデーション(グリーンの部分)や、背景のグレーのグラデーション部分(グラスの足の左右)が変ですよね。ムラっぽくて。(モアレが出てます)

ファイルサイズも画質もJPEGのほうがGIFより勝ちです。
写真はやっぱりJPEGがいいですね。

PNG形式がベストな画像

PNGがベストな画像

最後はPNGファイルです。
左の画像はPNG形式。
ファイルサイズは66.35k
56kモデムで10秒の表示で、圧倒的に重いです。
(今回は背景を透明処理しているから、でもありますが)

ただ、画質の劣化はありませんから、大事な商品写真などにベストな形式です。

そして、PNGだと下↓のように、透明処理を生かした表現ができます!
これ(透明効果)がやりたかったらPNGしかないです。

PNGがベストな画像2

左は、上の画像を<div>で囲み、その<div>の背景に
黒(#000)を指定したものです。
背景色が黒の上に表示されたPNGは、自分の背景が透明なので、下の黒を透過して、このような表示に。

同じ画像を、いろいろな背景色の上に置いても、透明効果がそのまま生きてます。
背景色に合わせて、画像を何枚も用意しなくて良いってことですね。

この画像、下記のようなHTMLソースで表示されてます。

<div style="padding:10px; background:#000">
<img src="http://blog-imgs-37.fc2.com/h/o/n/honttoni/110503_3.png" width="200" height="240" />
</div>

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

ざっとまとめてみました。
「可逆圧縮・不可逆圧縮」が聞き慣れない言葉でしょうか。これは画像だけでなく音データなどの圧縮にも使うので、雑学として知ってて損は無いっす。

特  徴 得意な用途 苦手な用途
GIF 256色まで表示
●動画を保存できる
●背景を透明にできる
●インターレース表示
(だんだん鮮明になる表示)ができる
可逆圧縮
(デコードで元の品質に戻る事ができる)
可逆圧縮については下で説明します↓
○くっきりしたイラスト
○アイコン
○アニメーションGIF
○透明GIF
○インターレースGIF
▲256色までなので、写真など、色数が多い画像には不適当。
▲グラデーションもなめらかでなく不適当。
JPEG 約1,678色表示(24bit)
不可逆圧縮
(デコードで元の品質には戻らない→ファイルサイズを激減させる事ができる)
不可逆圧縮については下で説明します↓
○写真(ファイルサイズをかなり軽くできる)
○グラデーションもなめらかに表示できる
▲くっきりしたイラストやアイコンなどは、鮮明さがなくなり不向き。
▲アニメーションや透明効果はムリ
PNG 24bit、48bit表示で、約1,678色とそれ以上の色数を表示できる
●各ピクセルごとの透明度を設定できる
●可逆圧縮
ほとんど圧縮しないらしいです)
○画質を劣化させたくない画像に最適
○透明効果を使いたい画像に最適。GIFよりも高度な透明効果が使える
▲ほとんど圧縮しないのでファイルサイズがデカイ。
大きい画像は要注意
▲アニメーションも可能だそうだが、ほとんどのブラウザは対応していないそうです。

ちなみに
★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(圧縮フォーマット)でも採用されている方式。)
・W3Cによって推奨されている。
・PNGの読み方は、ピンやピングと読む人もいます。私は「ピーエヌジー」って読んでます(まんまですが)。

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

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

「可逆」「不可逆」どちらにもメリット・デメリットがあり、
どっちがイイってわけでもないです。それぞれの特徴をまとめました。

ちなみに、圧縮はエンコード、その逆の伸張はデコードといいます。
広義では、エンコードは「ある形式のデータを、ある方式で別の形式のデータに変換すること」を言い、デコードはその逆。
メールの送受信などでよく使われる言葉ですが、「データ圧縮」や「暗号化」などでも、エンコード・デコードと言います。

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

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

まとめますと、
「可逆圧縮」 = ○品質劣化が少ない ▲圧縮率は低い ▲デコードに時間かかる
「不可逆圧縮」= ▲品質劣化あり   ○圧縮率は高い

ってことです。

画像形式変換ソフト

私はFireworks(Adobe)を使っています。このような変換形式をシミュレーションできるソフトがいちばん便利ですよね。
「画像形式変換ソフト」はフリーソフトもあるようですので検索してみてください。
また、画像形式変換サイトもあります。「Fileminx」は画像だけでなく音データ、テキスト、動画も形式変換できて便利っぽいです。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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