はじめまして、某ITでデザイナーをしています。こはしといいます。
今回はよく使われる保存形式5つ(JPEG,PNG,GIF,SVG,ESP)について、備忘録として簡単にまとめましたのでお役立ていただければ幸いです。
JPEG(.jpg,.jpeg)
概要
Joint Photographic Experts Groupの略。（開発グループの名前がそのまま拡張子になっている）
ビットマップ形式の画像(色のついた画素を縦横に敷き詰めた画像)を8×8ドット単位の正方形で区切り、この正方形をひとつのブロックとして近い色に置き換えることで画像データの容量を格段に小さくする。
ただ、その際にデータを切り捨てているため繰り返すとノイズが生まれたり一度低解像度(品質100未満)に圧縮してしまうと元に戻すことはできない。（→非可逆圧縮）
用途
画像データを小さい容量で表示したい時に使用する。
使うメディア
Web
できること
自然な色味を保持したまま画像データの容量を小さくすることができる。
特徴
画像データの容量をかなり小さく圧縮できる。
24ビット（1670万色）まで色を扱うことが可能で、多くの色数を必要とする写真などの表現に向いている。
また、グラデーションのように色調が連続して変化する画像にも適している。
PNG(.png)
概要
Portable Network Graphicsの略。
「8ビットPNG」「16ビットPNG」「24ビットPNG」などがあるが主に使われるのは「8ビットPNG」。
8ビットPNGは、画像内に使える色の数が最大で256色という制限があるが、そのぶんファイルサイズを小さくできる。
24ビットPNGならファイルサイズは大きくなるがフルカラーで保存が可能になる。
ビットマップ形式の画像を無劣化で圧縮することができる。（→可逆圧縮、ロスレス圧縮）
用途
画像データを小さい容量で表示したい時、透明色を使った画像データを表示したい時に使用する。
使うメディア
Web
できること
ビットマップ形式の画像データを劣化なく圧縮することができる。（JPEGのようなノイズが入らない）
特徴
図やロゴなど直線や塗りつぶしで構成された画像に向いている。
透明色が使える。（半透明も表現可能）
可逆圧縮な分、容量は少し大きめ。
解像度72dpiでしか書き出せない。
比較的新しいファイル形式のため、古いブラウザだと表示されないことがある。
GIF(.gif)
概要
Graphics Interchange Formatの略。
独自の圧縮アルゴリズム『LZW』(=PNGと同じランレングス圧縮をさらに効率化した圧縮方法)を使っており、さらに色数が256色までのため、データ容量が非常に小さくなる。
また、WEBページとの親和性を高くする設計のため、インターネット経由の画像表示も負荷が少ない。
用途
画像データを小さい容量で表示したい時、単純なアニメーション表現に使用する。
使うメディア
Web
できること
1つのGIFファイルに複数の画像を入れることで、パラパラ漫画の原理を使って動画のように見せることができる。
特徴
図やロゴなど直線や塗りつぶしで構成された画像に向いている。
透明色が使える。ただし、PNGと異なり「完全な透過」「不透明」の2段階のみサポート（半透明は使えない）
SVG(.svg)
概要
Scalable Vector Graphicsの略。
JPEGやPNGがビットマップデータなのに対し、SVGはXMLをベースにした二次元ベクターデータ。
ベクターデータとは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって
再現する方式」のため、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っている。
用途
ロゴやアイコンなどの単純な画像を容量軽く美しく表示したい際に使用する。
使うメディア
Web
できること
レスポンシブデザインなどで画像の表示サイズが変わる際、PCとスマートフォンどちらの画面でも綺麗に画像を表示することができる。
特徴
拡大縮小しても画像が荒れず、後から編集がしやすいため、Webサイトでロゴ画像を表示するのに適している。
コードで表現できるためテキストエディタで編集が可能。
写真などの複雑な画像データの保存には向かない。
EPS(.eps)
概要
Encapsulated PostScriptの略。
Adobe社が開発したPS（PostScript）を基盤とした、ベクトルデータとビットマップデータ両方を含む画像ファイルの保存形式で、印刷の目的で開発された画像形式なので、高品質の印刷が保証できるとされている。
あらゆるグラフィックソフトで編集できる、安定性、汎用性ともに抜群なファイル。
用途
DTPなどの商業印刷データを作る際に使用する。
使うメディア
紙
できること
本来の高解像度データの他に、他のアプリケーションに貼り付けたときに表示するための低解像度のプレビュー画像を持っているため、EPSファイル自体を開かず他の対応アプリケーションで制作をしても制作した環境のまま色やレイアウトを保持して出力できる。
特徴
ビットマップとベクターデータの両方を含むことができる。
あらゆるソフトで扱えることから、広く普及しており、DTP業界では基本の保存形式として選ばれている。
印刷用なので基本的に解像度350dpiでしか使わない。
さいごに
もともと個人的な備忘録として作成したものなので表記揺れなどあるかもしれないです。
また、わかりづらいところやこれ間違ってるよ！というところがあればご指摘いただけると大変喜びます。
参考サイト
用途で分けよう！pngとjpegの特徴と相互変換する方法4つ
http://minto.tech/png-jpeg-henkan/
JPEG、GIF、PNG、TIFF、BMP…いろいろな画像ファイルと特徴
https://sole-color-blog.com/blog/103/
画像ファイル形式の基礎と特徴まとめ（JPEG・GIF・PNGなど）
https://liginc.co.jp/web/design/material/50037
aiとepsとpdfの違い
https://dtp.design-production.tokyo/227/
EPSとは
https://dtp.design-production.tokyo/240/
EPS（イーピーエス）ファイルって何ですか？
https://fukutomo.net/blog/archives/basics_print/685