WEBサイトで扱う画像ファイルの種類
【こちらの記事は、約4分程でお読みいただけます。】
こんにちは。技術担当の工藤です。
今日は、webで使われる画像フォーマットについて解説します。
画像の拡張子の違い
webサイトで扱える画像には、いろんな種類があります。
「GIF」「JPG」「PNG」などです。
それぞれ、特徴があります。うまく使い分けていきましょう。
GIF
Graphics Interchange Format（略してGIF）。
読み方は「ジフ」。「ギフ」もしくは、「ジーアイエフ」と読まれることもありますが、設計者が「ジフ」が正しい発音であると発表しました。
特徴
- 画素数は２５６色以下。そのため、データ容量が小さいです。
- 透過処理が可能
- アニメーションを作ることが出来る
使われる場面
単色のロゴや、簡単なイラスト（ドット絵）、アイコンなどは境界線のノイズが少なくなりキレイに作る事が出来ます。
あとは、単色のボタンなどにも使われることがあります。最近は、単色ならCSSでやってしまうほうが早いですが。
簡単なアニメーションにも使われますが、256色しか使えないので本格的なアニメーションに使うには機能しません。
Flashなどで再現されていましたが、Flashがセキュリティ上制限されたことで、パラパラ漫画風にとどめるGIFアニメーションが、再び台頭してきています。
JPEG
Joint Photographic Experts Group(略してJPEG）
読み方は、「ジェイペグ」。
拡張子には、JPEGやJPGなどがよく使われます。昔、拡張子には三文字制限という制約があった名残でJPGが使われているそうです。
特徴
- 画像を固定サイズの8×8画素のブロックに分割し、その正方形を一つのブロックとして近似色に置き換えます。そのため、圧縮率を上げるとブロックの境界にブロックノイズと呼ばれるノイズが生じます。
- GIFに比べて画素数が圧倒的に多いので、写真などの色数がものすごい数になる画像に向いている
- 透過出来ない
- 非圧縮なので、再保存する度に画質が劣化していく
使われる場面
特徴にもかきましたが、写真などの画素数の多い画像に使われます。写真のほとんどはJPGだと思われます。
グラデーションのボタンなどにも使われていました。今では、CSSで再現することも多いです。
PNG
Portable Network Graphics（略してPNG）は、GIFとJPEGの良い所をうまい具合にとった画像ファイルフォーマットと言えます。
読み方は、「ピング」や「ピン」と多く読まれています。
特徴
- 透過処理できる
- 圧縮方法により、データを復元できるが、ファイルサイズも大きい
- 比較的新しい画像ファイルなので、IE6やフューチャーフォンなどではPNGに対応していない場合も
使われる場所
PNGはGIFの変わりに作られました。
もともとGIFの著作権問題で、開発されたフォーマットです。なので、透過処理が可能となっています。
透過処理が必要な、写真などにつかったり、イラストやログなどにも使われます。
これからの、画像にはPNGファイル形式が有効かと思われます。
SVG
Scalable Vector Graphics（略してSVG）は、XML（Extensible Markup Language）をベースとした、二次元ベクターイメージ用の画像形式の一つです。
特徴
- ベクターデータなので、画像をズームしても画像が荒れない
- XMLなのでテキストエディッタで編集出来る
- アニメーションに対応していて、特殊な効果を掛けたり出来る
- 比較的新しいフォーマットなので、IE８以下は対応していない
使われる場所
最近では、アイコンなど大きさが可変する画像などに使われる事が多いです。
他にもロゴ、アニメーションを組み込む時など、スマフォサイトなんかでは多く使われています。
写真などの色数の多い画像には不向きです。
SVGを使えば、こんなアニメーションが作れます。
http://tympanus.net/Development/AnimatedSVGIcons/
終わりに
Web製作者は、JPEG、GIF、PNG、SVGの特性を理解し、適切に画像を扱えるように心がけましょう。
簡単にまとめると、「写真は、JPEG。イラストは、GIFかPNG。ロゴは、GIFかPNGかSVG。アイコンは、GIFかPNGかSVG」
とおぼえておけば困ることはないかと思います。
色々な保存方法を試してみて、一番最適な画像を探しましょう。その際に、再保存した場合オリジナルデータは別に保存しておきましょう。
