Webデザイン

【簡単解説】画像ファイルの拡張子の違いを比較してみました！

 

こんにちは、Takamiです！

最近iPhoneで撮影した画像をPCに取り込んだところ、PCで表示ができない…！ということがありました。調べたところどうやらファイルの拡張子の問題のようでした。

Webサイト制作においても、適切な画像ファイルの拡張子を選ぶときに迷ってしまうことはないでしょうか？

今回はそんな画像ファイルの拡張子について代表的なものの特徴や違いをまとめてみました！

Contents
  1. PNG
  2. JPEG
  3. GIF
  4. WebP
  5. SVG
  6. HEIC
  7. さいごに

PNG

PNGは画像形式の一つで「Portable Network Graphics」の略称です。
画像を保存すると「.png」と表示されます。

PNGの特徴としては

  1. 透過が可能
  2. ３種類（PNG-8、PNG-24、PNG-32）が存在し、それぞれファイルサイズと色の種類の多さが異なる。
  3. 画像を圧縮後、解凍しても元の画質を保持できる

が挙げられます。

そのため、画質がよく使い勝手のいい画像形式として重宝されます。

ただし、ファイルサイズが大きくなる傾向にあるためWebサイトでの挿入をする際は注意が必要です。

JPEG

JPEGは画像形式の一つで「Joint Photographic Experts Group」の略称です。
画像を保存すると「.jpg」「.JPG」「.jpeg」などと表示されます。

JEPGの特徴としては、

  1. 高画質で保存できる
  2. 圧縮して小さい容量で保存することができる。
  3. デバイスやソフトウェアを問わず使用でき汎用性が高い。

が挙げられます。

JPEGはその汎用性から最も一般的に使用されている拡張子であり、皆さんにもなじみの深い画像形式かと思います。

ただし保存を繰り返すと画質が劣化したり、PNGのように圧縮した画像を元に戻すことはできません。基本的にはWebサイトでも利用して問題ない画像形式ではありますが、何度も保存をした古いファイルを利用するのはお勧めできません。

GIF

GIFは画像形式の一つで「Graphics Interchange Format」の略称です。
画像を保存すると「.gif」と表示されます。

GIFの特徴としては、

  1. 透過が可能。
  2. アニメーションが作成可能
  3. 容量が小さい（その代わり色数が少ない）
  4. 画像を圧縮後、解凍しても元の画質を保持できる

が挙げられます。

簡単なアイコンだったり、短い時間のアニメーションを表現したいときに利用される画像形式です。

ただし色数が少ない拡張子のため、必然的に画質はJPEG、PNGと比較すると大幅に劣ります。そのため動画ほど容量を大きくせずにアニメーションを利用したい際など、利用シーンは限定されています。

WebP

WebPは画像形式の一つです。
画像を保存すると「.webp」と表示されます。

WebPの特徴として、

  1. 透過が可能
  2. アニメーションが制作可能
  3. JPEG以上に容量を圧縮できる

が挙げられます。

容量をJPEG以上に小さくできるだけでなく、透過・アニメーション作成も可能な形式であるため、使い勝手の面でもページ表示速度改善の面でもWebサイト利用に適していると言えます。

ただし、これまでサイト上に掲載してきたJPEG画像などをWebPに変換するのは手間であるため、まだWebPを利用していないサイトが多く存在するのも事実です。またWebPに対応していないブラウザも存在するため注意が必要です。

SVG

SVGは画像形式の一つで「Scalable Vector Graphics」の略称です。
画像を保存すると「.svg」と表示されます。

SVGの特徴として、

  1. 拡大・縮小しても画質が変わらない。

が挙げられます。

他の画像形式ではラスター形式といって、ピクセルというドットの集まりで画像を表現しているのに対し、SVGは座標と数式によって画像を表現している（ベクター画像）のため、拡大縮小しても画質が変わりません。そのためレスポンシブデザインのサイトとの相性が良いと言われています。

ただし、複雑なオブジェクトや写真など大量の画素が必要な画像は表現しきれません。また表示のたびに計算して描画処理を行うため表示速度が遅くなったりします。

HEIC

HEICは画像形式の一つで「High Efficiency Image File Format」の略称です。
画像を保存すると「.heic」と表示されます。

HEICの特徴としては、

  1. JPEGより40～50％程度容量が小さい。
  2. JPEG以上の色の種類を表現可能

が挙げられます。

画像形式の中でも特に新しく、iOS11以降のデバイスで撮影・作成した画像ファイルはHEICの拡張子になっています。

ただしこの拡張子は現状Windowsでは対応しておらず、Windowsのデバイスで画像を開くことができません。
そのためiOS以外のデバイスでHEIC画像を利用したい場合は、拡張子変換ソフトを利用してJPEGに変換を行う必要があります。HEICの変換ソフトについてはWebブラウザ上で利用できるものがあります。

HEICファイルをJPEGファイルへの変換できるアプリ

※ブラウザ上で利用できます。

さいごに

今回は画像形式について簡単に解説していきました。

皆さんが何気なく利用している画像も、形式一つで適切な利用シーンが異なったり、そもそも利用できなかったりします。

特にwebサイトを制作・運営する上では非常に重要なファクターの一つですので、是非覚えていってください！

それではまた！

RELATED POST