プログラミングの勉強日記
2020年7月5日 Progate Lv.148
ポートフォリオ作成中
画像の拡張子について気になったので調べてまとめてみた。
拡張子とは
ファイル名の末尾の.（ピリオド）以降の部分のこと。PDFファイルはpdf、Word文書はdocなどである。拡張子はそのファイルが何のファイルであるかを判別して、ファイルをクリックしたときにそのファイルに対応するアプリケーションが開くようになる。
画像の種類
画像にはベクター画像（ベクトル画像）とビットマップ画像（ラスター画像）と呼ばれるものがある。
ベクター画像（ベクトル画像）
ベクター画像は画像の線や点、色をベクター計算という数式で描くものであり、拡大縮小しても画像がぼやけることがない。ベクター画像は点と点を結ぶ線が画像を構成している。
なので、ベクター画像はロゴや文字、イラスト、図表などに最適である。しかし、無数の色が含まれる画像は再現が難しいので、風景などの複雑な画像には向いていない。（写真はベクター画像では再現することはできない。）
ビットマップ画像（ラスター画像）
ビットマップ画像は正方形の点（ピクセル）の集まりで構成される画像である。画質は解像度で決まる。ビットマップ画像はピクセルの塗りつぶしが画像を構成する。
ピクセルの集まりなので、拡大していくとピクセルの細かさに限界がきて画像が荒くなってしまう。（拡大するとぼやけてしまう）
しかし、きめ細やかな色表現ができるので、写真や絵画、グラデーション画像などに適している。
画像の拡張子の種類
拡張子には、JPG/PNG/GIF/SVGなどがある。
JPG
まず最初にJPGについて説明する。JPGはJoint Photographic Experts Groupの略であり、「ジェイペグ」と読む。形式はビットマップ画像である。用途は写真。
拡張子：.jpg/.jpeg/.JPG/.JPEG/.jpe/.jfif/.pjpeg/.pjp
特徴：データの容量が小さい。フルカラーなので色数の多い画像に最適。上書き保存で画質が損なわれる。拡張子の数が多い。透過処理はできない。
※ファイルを小さくすることはできるが、保存の回数とタイミングに注意が必要。
色や景色、食べ物などの自然物の写真に適している
PNG
次にPNGについて紹介する。PNGはPortable Network Graphicsの略であり、「ピング」と読む。形式はビットマップ画像である。用途はイラストやロゴ。
PNGは、可逆性圧縮なので画質が劣化せず、データを復元する際には完全に元通りにすることができる。
拡張子：.png
特徴：データを完全に復元できる。フルカラー。透過処理ができる。Web上で使える。
※画像のファイルサイズが重いと、転送量が増えるのでサーバーに負担がかかり、ページ表示速度に影響が出る。
画像キャプチャや描き図版、概念図などの人工物に適している
GIF
次にGIFについて紹介する。GIFはGraphics Interchange Formatの略であり、「ギフ・ジフ」と読む。形式はビットマップ画像である。用途はイラスト、ロゴ、アイコン。
GIは容量が小さく、Webページでの表示スピードが早いファイル形式であり、GIF87」、「GIF87a」、「GIF89a」の3種類ある。JPEGと違い「可逆圧縮」の画像形式なので、一度低画質で保存しても元の画質に戻すことができる。
拡張子：.gif
特徴：データ容量が小さい。最大256色。透過処理ができる。アニメーションを作ることができる。
※GIFはの最も大きな特徴は、アニメーション画像を作成できる点であり、色数の多くないシンプルなアニメーションを作成する際に最適。
SVG
最後にSVGについて紹介する。SVGはScalable Vector Graphicsの略であり、「エスブイジー」と読む。形式はベクター画像である。用途はシンプルなイラストやロゴ。
SVGは、XML（eXtensible Markup Language:拡張可能なマークアップ言語）で記述する2次元のベクター画像のファイル形式。SVGは、画像でありながらマークアップ言語で記述されるテキストデータなので、テキストエディターで編集することができる。
拡張子：.svg/.svgz
特徴：テキストデータ。アニメーションを作ることができる。ロゴやアイコンやグラフなどは、SVGを使うと軽くてキレイに表現できる。
※ベクター画像なので、複雑なイラストではファイルサイズが大きくなるため、向いていない。
参考文献
https://www.pc-master.jp/sousa/kakuchousi.html
https://saruwakakun.com/design/photoshop/image
https://webtan.impress.co.jp/e/2018/04/17/28977
https://www.innovation.co.jp/urumo/jpg_png/