menu

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

2020年7月20日

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

 

JPG

    JPGは、1670万色以上を扱うことができ、写真や複雑なイラストなどの保存に適した画像ファイルです。
    JPGは、JPEG形式で画像を圧縮して保存するため、ファイルサイズは軽くなりますが、元の画像よりも画質が悪くなってしまうというデメリットがあります。

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

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

 

GIF

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

 

PNG

    PNGには「PNG8」、「PNG24」、「PNG32」の3種類があります。
    「PNG8」は256色を扱い、「PNG24」と「PNG32」は、1670万色以上を扱うことができます。「PNG24」と「PNG32」は、複雑な画像の保存に適していますが、ファイルサイズが大きくなるというデメリットがあります。また、PNGは透過処理を行うことも可能です。

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

 

SVG

    SVGはベクター形式により、画像を数値化して管理します。そのため、拡大や縮小を行った場合でも画像がぼやけることなく綺麗に描画される点が特徴で、レスポンシブWebデザインに適した画像ファイルとされています。

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

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

CPTIMES

   

投稿一覧

pagetop