こちらは「点（ビット）」の集合により構築された画像となります。
主に写真やイラスト、絵画などはほとんどがこのラスター（ビットマップ）画像で表されています。

特徴としては以下の通りです。

ラスター（ビットマップ）画像の特徴

格子状の点の集まりで作られている。

点一つ一つに色や濃度、明るさなどの情報が与えられている。

一つ一つの点の集合なので、風景画や写真のような色が細かい画像でも表現できる。

拡大しすぎると、点の大きさの限界に到達してしまい画像が荒くなってしまう。

解像度やサイズの大きいラスター（ビットマップ）画像であれば、多少拡大してもそこまで荒くはならないが、その分容量が大きい。

ベクター画像より容量は基本的に大きい。

画像を編集するには、基本的に元の画像に上塗りをすることになる。

特徴を見ると、私たちにとってはより身近な画像でもあると感じられます。

例えば、ただの1本線が描かれた画像であっても、ラスター画像であるなら拡大しすぎるとギザギザに見えます。
たまにWebサイトを見ているときに、文字が不自然にぼやけている箇所があったりもしますが、それはラスター画像を拡大したものである可能性が高いかもしれません。

細かな表現ができることは大きなメリットですが、表示の仕方により劣化してしまう可能性が高いのがデメリットと言えるでしょう。

こちらは点と「線（ベクトル）」の集合により構築された画像となります。
より具体的に表すと、点と線の情報をコンピューターが数値化し、画面上に表示している画像となります。
ロゴや図形のように線と塗りだけで簡単に表される画像は、コンピューターにより簡単に数値化が出来るので、主にこのベクター画像が用いられます。

特徴としては以下の通りです。

ベクター（ベクトル）画像の特徴

点や線の集まりで作られている。

点や線、色や形にはその全てに複雑な計算式が与えられており、その計算によって表現される。

計算による表示となるので、複雑でないロゴやイラスト、単純な図形などの表現に適している。

コンピューターによる計算は、画像の拡大縮小の度に行われているので、拡大縮小による画像の劣化を気にすることはない。

複雑な計算式を用いるため、風景画や写真のような色や濃淡が複雑な画像の表現には膨大な計算量が必要となり、写真などのベクター化は現実的ではない。

データ容量は基本的に軽い。

画像の編集は数値の設定を変えるだけで可能。

こちらは、特徴だけ見るとラスター画像とりは少しイメージしにくいかなと思います。

ベクター画像であれば、画像を拡大しても特に画像が荒くなったりすることはありません。

拡大縮小による画像の劣化がおきないことは何事にも変えられない非常に重要なメリットかとは思いますが、写真など複雑な処理を必要としそうな画像に関しては基本的に表現できないことがデメリットとなります。
できたとしても、容量がすごいことになるかなと・・・(^^;

画像の拡張子によって、それぞれラスター（ビットマップ）画像なのかベクター（ベクトル）画像が決まっています。
殆どはラスター（ビットマップ）画像となりますが、詳しく見ていきましょう！

拡張子→「.jpg」「.jpeg」「.JPG」「.JPEG」

特徴・メリットとしては色数がフルカラー約1670万色を表現することができ、写真などに最も適した画像であるという点でしょう。
お手持ちのカメラなどで撮影した写真は基本的に「JPEG」が使用されています。

容量に関しても、場合によっては「PNG」を使用するよりも軽くなることがあり、圧縮率を1/5~1/30で指定し色と色の境い目を自然にぼやかし、圧縮して画像の容量を小さくすることもできます。

デメリットは「非可逆圧縮」という点にあります。
言葉は難しいですが、つまりは「圧縮してしまったJPEGは元に戻せない」ということです。
更にはサイズの変更や、上書き保存でも画質が劣化してしまうので、繰り返しの編集や加工を必要とするデータとしては向かないという点がデメリットかと思います。

他にも「PNG」と違って背景透過できない点が挙げられます。

しかしながら、上記でも申したように場合によっては「PNG」よりも相当容量が軽くなるので、使用の際は必要以上の編集やデータのやり取りを避け、画質の劣化を避けながら上手く利用すると良いでしょう！

拡張子→「.png」

特徴・メリットとしては「JPEG」とは違い、背景の透過が可能（または基本的に透過されている）という点でしょう。
例えば丸い形の写真。
白い背景に置いてしまえば、見た目では「JPEG」も同じ丸かもしれませんが、黒背景にしてみると・・・「JPEG」の方は実は四角形になっています（笑）

人物のみや、食べ物などの素材のみを切り抜いた写真をサイトで扱いたいときには「PNG」で間違いないでしょう！

他にも可逆圧縮である点が特徴となります。
言葉は難しいですが、何度も加工して編集しても、データの復元が可能なので、「JPEG」と違って画像の劣化はしないよと覚えておけば大丈夫でしょう！

デメリットは、使用する画像の種類によっては「JPEG」よりも容量が大きくなってしまうことでしょう。
「JPEG」と同じくフルカラー約1670万色が表現できますが、比較的単純な画像は得意とするところではあり、グラデーションがかかっていたり、風景写真のような色鮮やかな写真などは苦手としているところとなります。

写真の使用の際は基本的に「JPEG」を使用し、切り抜きなど背景透過したい画像の場合は「PNG」を使用する等、用途に合わせた使い方を心がけましょう！

判断が微妙な際は、「JPEG」「PNG」どちらも用意し、ファイルサイズを見比べるのが良いかもしれません！

拡張子→「.svg」「.svgz」

特徴・メリットとしてはやはり唯一の「ベクター画像」であるということでしょう。
「WebP」が主流になると思うと言いはしましたが、「JPEG」「PNG」が仮に廃れたとしても、「SVG」に取って代わるものはなかなか出てこないのではないでしょうか。
それほどに「ベクター画像」であること自体が大きな特徴であり、魅力であります。

上記でも説明しましたが、やはり画像を拡大しても画質が劣化しないという点が最強にして最大のメリットです。
それに容量も比較的小さいです。
さらに言えば、レスポンシブ時にも様々な大きさに対応が出来るので、別記事「【初級編】Webサイトパフォーマンスにお悩みの方へ、今から実践できるサイト高速化「画像の取り扱いについて1」」で紹介したように、各端末に合わせた適切なサイズの画像を用意する、といった手間を省くこともできます。

これだけみるとかなり有用なフォーマットですが・・・。

デメリットはなんと言っても「写真のような複雑な色情報等が多い画像はSVGとして（ほぼ）利用できない」と言った点でしょう。
計算で処理をしているため、いくらコンピューターでもあまりに複雑すぎる処理には莫大な計算量を必要としてしまいます。

Instagramのアイコンは怪しいところです。グラデーションがかかっているので・・・。

基本的に単色のシンプルなアイコンやロゴには適していますが、心配であればSVGに変換した後にファイルサイズを見てみましょう。
大体は一桁KBぐらいの容量になるかと思いますので、仮に5桁KBぐらいの容量になっていたとしたら、SVGの使用は避けたほうがいいかもしれませんね。

拡張子→「.webp」

特徴・メリットとしては「JPEG」「PNG」のいいとこ取りハイブリッド版ということでしょう。
つまり、写真などの色鮮やかな画像であったとしても比較的画質を落とすことなく軽い容量で保存ができ、なおかつ背景透過も可能ということです。

Google社が開発しただけあって、ファイルサイズを小さくすることが前提とされており、「WebP」の使用でサイトのWebサイトパフォーマンスを上げることが可能でもあります。
Google社自身はほぼ同等の画質で、「PNG」よりも約26％、 「JPEG」より約25〜34％軽くできると発表しています。

こちらのサイトのようなツールで画像変換できますので、変換前後の画質を見比べていただければと思います。

【SYNCER】サイトへ
【squoosh】サイトへ

特にこれといったデメリットはないようにも思いますが、挙げるとするならば、日に日に各ブラウザへの対応は完了していってはいますが、それでも100%対応とまでは行っていない点でしょう。
現在もIEには対応していない状態です。
そんな中でも、現代の先進的なサイト（楽天市場やWikipedia等にも）にはどんどん導入されていっているようです。

また、「JPEG」「PNG」のように手軽に編集することが難しく、現在では専用ソフトによる変換ぐらいにしか対応していない（既存のPhotoshopのような画像編集ソフトが専用プラグインの使用でないと対応できなかったりする）点もデメリットかと思います。

こちらの記事【極秘】ページ高速化でお悩みの方へ画像圧縮便利ツール紹介でも紹介した画像圧縮ツールには対応していない（かも？）ので、もしかしたら今現在でも場合によっては「JPEG」「PNG」のほうが同じぐらいの画質で容量を軽くすることもできるかもしれません。
まぁ、「WebP」への変換の際にクオリティも定めて圧縮できたりするので、さほど問題ではないかもですが（笑）

しかしながら、そんなデメリットは全て時間が解決してくれるでしょう！！！
対応ブラウザも確実に増えると思いますし、もっと手軽に編集・変換できる時代がきっとやってきます。

次世代のフォーマットとして、必ずしも抑えておきたいですね！

WebPの変換についても、必ずや別記事にてまとめていきますので、お楽しみに！