こんにちわ、最近左だけ花粉症？のWebデザイナー otarie です。
今回は画像形式のJPEG、PNG、GIF、SVGについてのお話をしようと思います。
各画像形式についての特徴や、メリット、デメリットについて調べたことをまとめてみました。
・Joint Photographic Experts Groupの略
拡張子は「.jpg」または「.jpeg」
・静止画像データの圧縮形式：非可逆圧縮の画像フォーマット
インターネットでよく使用されている画像形式ですね。
JPEGは圧縮率が高く、フルカラー（約1,677万色）の画像を扱えるので、たくさんの色を必要とする写真や複雑なテクスチャーに向いている画像形式です。
グラデーションも綺麗に表現できます。
デメリットとして、JPEGは高い圧縮率で圧縮できるのですが、その際、多少の劣化を伴います。
圧縮率を上げるとファイルは小さくなるんですが、画質はブロックノイズのようになり劣化してしまう場合があります。
また、アイコンやアニメ調の平坦なイラストなどは、にじんだように汚くなってしまいます。
さらに、一度低解像度に圧縮した画像は、元に戻すこともできないので元データをバックアップしておく必要があります。
拡張子のjpgとjpegの違いは？
MS-DOS時代に拡張子が３文字までという制約があったためjpgを使用していました。
現在では、普及しているOSで３文字までの制約はなくなったのでjpegを使用することができるようになり、混在するようになっているようです。
注意点
UNIX上では大文字と小文字の識別が別ファイルとして認識されるので「.jpg」と「.JPG」の違いには気をつけましょう。
・Portable Network Graphicsの略
拡張子は「.png」
・GIFに替わるライセンス・フリーの画像形式として生まれた画像形式
：可逆圧縮の画像フォーマット
PNGは可逆圧縮で複数の透過処理ができる画像形式です。
フルカラーにも8bitカラーにもすることができます。
この画像形式は圧縮率が高く同じ内容のGIF画像より10％～30％程度ファイルサイズが小さくなります。圧縮によってデータが捨てられてしまうことがないので、データを完全に復元することができます。
また、ライセンス問題の不安がないのも特徴です。
デメリットはJPEG、GIFと比べると新しい技術になるので、古いPCやブラウザ、携帯では表示できない可能性があります。
また、フルカラーにするとJPEGよりファイルサイズが大きくなってしまいます。
アニメーションには対応していません。
PNG-8
Internet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。
GIFと同じ、インデックスカラーモードの256色+1色透過を使うことができて、グラデーションなどを含む画像などに対しては、GIFよりも圧縮率が高い場合が多いです。
PNG-24(32)
JPEGと同様にフルカラー（約1,677万色）の色を扱うことができて、さらにPNG-32ではアルファチャンネルを使用することができます。
注意点として、Photoshopでは、PNG-32をPNG-24とされているので勘違いしやすいですが、これは32bitのことです。
IE6に対応させるには、filterやJavaScriptを使用する手間がかかってしまい、ファイルサイズも他の画像フォーマットに比べて、重くなる傾向にあります。
・Graphics Interchange Formatの略
拡張子は「.gif」
・最大8bit（256色）までの色を扱うことのできる圧縮画像形式
256色以上必要としてないロゴやリンクボタン、アイコン、アニメ調の簡単なイラストなど、線の境界（輪郭）もキレイに作ることができる画像形式です。
データ容量も小さく、透過処理もできます。また、256色までのアニメーションを作ることができるのも特徴です。
デメリットは、色数に制限があるので、風景写真など多彩な色を使う場合では乏しくなってしまいます。
一つの画像で色を256色しか使用できないため、シンプルで色数が少ない画像の場合は、png形式よりファイルサイズを若干小さくできることもありますが、実際のところ、あんまり変わらないです。
・Scalable Vector Graphicsの略
拡張子は「.svg」
・静止画像データの圧縮形式：非可逆圧縮の画像フォーマット
SVGはJPEG・PNG・GIFとは異なり、ベクター画像なので、1ピクセル未満のオブジェクトでも画像を拡大・縮小しても画質が劣化せずにくっきりと綺麗に表示することができる画像形式です。
ベクタ形式
点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現するため、劣化せずに表示できます。
ラスタ形式
ラスタ形式は「ドット絵」なので、画像を拡大すると、輪郭がギザギザになります。
ですが、複雑に色や図形が組み合わさったデータ（写真など）の表現には、ベクタ形式よりラスタ形式の方が向いています。
JPEG、PNG、GIF、などはすべてラスタ形式の画像です。
また、SVGは拡大・縮小に強いので、レスポンシブWebデザインでとても有効です。
ロゴ画像などに使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
SVGは画像ファイルですが、テキストエディタで中身を見ることができるので、作成や編集も可能です。JPEG・PNG・GIFの画像ファイルをテキストエディタで開くと文字化けしてしまいます。
また、マークアップ言語である特徴を活かしてHTMLにSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない斜めや曲線の表現ができます。
デメリットは、写真や手書きのイラストなど、色や形状が複雑なオブジェクトの場合は、点や線の集まりでは表現しきれないので不向きです。
また、あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまいます。
いかがでしたか？
画像形式を全部理解するのがとても難しく、まだまだ勉強中ですが、Webデザイナーとして大事な知識だと教わってこうして色々調べて行くと、だんだんその大事さに気づいてきました。
また次回をお楽しみに～＾＾
