ブログ
【WEB制作の基本】画像ファイルの種類と特徴
Webサイトに画像をアップロードしたいけれど、どの画像ファイル形式を選べばいいか迷った経験はありませんか？
画像ファイルの形式は種類が多く、それぞれに特徴があって混乱してしまいますよね。
それぞれの特徴を理解していないと、画質が悪くなってしまったり、後からデータの復元ができなくなったりすることがあるかもしれません。
今回の記事では、画像ファイルの形式ごとの特徴と適切な用途について、解説していきます！
拡張子（画像ファイル形式）とは
画像拡張子とは画像データを表示したり圧縮したりするファイルの種類のことで、画像フォーマットとも呼ばれます。
代表的な画像ファイル形式には「.jpg」や「.png」、「.gif」などが挙げられます。
Webサイトの画像などのファイル名を見ると「ファイルの名前.png」のように拡張子がついているのを見たことがあると思います。
このファイル名の終わりの「.」以降の拡張子がそれぞれの画像ファイル形式の種類を表しています。
ビットマップ画像とベクター画像の違い
画像ファイル形式は画像の種類で見ると、以下のビットマップ画像とベクター画像の2つの種類に分けられます。
ビットマップ画像とは
ビットマップ画像とは、ピクセルという色情報がついた点の集まりで構成されている画像のことです。
写真などの色数の多い画像でもビットマップ画像であれば、一点ごとに色を微妙に変化させて、きめ細やかな色彩を表現することができます。
しかし、色数が多くて繊細な画像は、ピクセル数が多くて画質が良い分、容量は大きくなってしまいます。
また画像を拡大すると、ピクセルが足りなくなって輪郭の点がギザギザになったり、ぼやけてしまうのも問題点です。
一般的な画像ファイル形式であるJPGやPNG、GIFなどは全てビットマップ画像であり、Webサイトに用いられる写真画像の多くはビットマップ画像です。
ベクター画像とは
ベクター画像とは、画像の直線や曲線を数値として演算して、数式で表した画像です。
数式をコンピューターがその都度再現して表示するので、画像を拡大・縮小しても画質が劣化することはありません。
Webサイトで使用しているロゴなどのイラストは、複数個所に様々な大きさで使用することが多いです。
Webサイトに用いられるイラストやロゴマーク、アイコンなどの画像を、後で紹介するSVGという画像ファイル形式で表示しているＷebサイトも多いです。
拡張子（画像ファイル形式）の種類と特徴
JPG(ジェイペグ)
◆JPGのメリット
- 色数が多い(約1670万色)
- 圧縮倍率が指定できる
◆JPGのデメリット
- 非可逆圧縮である
- 背景透過ができない
◆JPGの用途
JPGは、一般的には色数が多い写真に用いられるファイル形式です。色数の多い、背景写真のように色鮮やかな写真などで使用されます。
PNG(ピング)
◆PNGのメリット
- 色数が多い(約1670万色)
- 可逆圧縮である
- 背景透過ができる
◆PNGのデメリット
- 容量が大きい
◆PNGの用途
PNGは、主にWebサイト上で画像を表示するなどするために開発された画像ファイル形式です。図解などの塗りつぶしの多いイラストやロゴマーク、アイコンなど背景を透過した画像で使用されます。
GIF(ジフ)
◆GIFのメリット
- アニメーションが表示できる
- 可逆圧縮である
- 容量が小さい
◆GIFのデメリット
- 色数が少ない(256色)
◆GIFの用途
GIFは、ファイル容量を小さく抑えるための工夫がされているファイル形式です。色数の少ない画像だけでなく、アニメーションを表示するために使用されます。
WebP(ウェッピー)
◆WebPのメリット
- アニメーションが表示できる
- 背景透過ができる
- 容量が小さい
◆WebPのデメリット
- 対応ブラウザが少ない
◆WebPの用途
WebPは、Google社が開発したWebに対応している画像ファイル形式です。画像のサイズが小さく、表示速度を速くできるという特徴があり、Web上の画像に使用されます。
SVG(エスブイジー)
◆SVGのメリット
- 拡大・縮小しても画質が劣化しない
- 後から色やサイズを変更できる
- 容量が小さい
◆SVGのデメリット
- JPGやPNGで保存するとSVGに戻せない
- SVGコードの知識が必要
◆SVGの用途
SVGは、ベクター画像の表示に当たる画像ファイル形式であり、輪郭のはっきりした写真、色数の少ないイラストなどに用いられることが多いです。 また、どんなに拡大してもきれいな線を保つだけでなく、ディスプレイに合わせてサイズを変更できるので、Webサイトのシンプルなイラストやロゴマーク、アイコンに使用されます。