拡張子について(JPG、GIF、PNG、SVG)

menu

2020年7月20日

今回は、画像ファイルの拡張子である「JPG、GIF、PNG、SVG」についてご紹介します。

■JPG

Webサイトでは「容量の大きい画像ファイル」よりも「容量の軽い画像ファイル」の方が好まれるため、JPGで保存した画像を使用することが多いです。

・「JPG」と「JPEG」に違いはあるの？
「JPG」と「JPEG」に違いはありません。
Windows 95 が販売される以前に Microsoft社が販売していた「MS-DOS」というOSでは、
拡張子を3文字しか扱うことが出来なかったため「.jpeg」が「.jpg」に短縮されました。
拡張子は異なりますが内容に違いはないため、どちらを使用しても問題ありません。

■GIF

GIFは256色まで扱うことができ、ロゴやアイコンなど、簡単なイラストの保存に適した画像ファイルです。透過処理を行うことが出来ます。また、GIFはアニメーションを作成できるため、画面にちょっとした動きを出したり、動くバナーを作ることが出来ます。

■PNG

・PNGの開発背景
GIFのデータ圧縮方法に特許権があったため、
一時期、GIFは一般の使用者に対して特許使用料が発生する事態が懸念されていました。
そのため、PNGはライセンスフリーで使用できるGIFの代用として開発された経緯があります。
現在は、GIFの特許権が失効しているため、誰でも自由にGIFを使用することができます。

■SVG

SVGは、ロゴやアイコン、図形などの表示に向いていますが、さまざまな色を表現する写真のような画像には向いていません。写真は多くの色を使用しているため、SVGで表現しようとすると計算に時間が掛かり、Webサイトの動作がとても重くなってしまいます。そのため、複雑な画像の表示はJPGなど、他のフォーマットを使用するようにしましょう。

また、SVGはテキストデータとして使用することも出来ます。HTMLファイルに、SVGタグで色や形を指定して画像を描画することが可能です。もちろん、他の画像ファイルと同様に、HTMLファイルに<img src=”img.svg”>と、埋め込んで使用することも出来ます。SVGは奥の深い拡張子なので、興味がありましたら是非調べてみてくださいね。