こんにちは！ハナノです！（@K11936151）
一度は聞いたことがある「拡張子（画像フォーマット）」。
このような方は結構いらっしゃると思います。
Webサイトに画像をアップロードする際には適したファイル形式を選ばないと画質が悪くなってしまったり、データの復元が困難になってしまったりと不具合が生じる可能性があります。
それぞれの拡張子の特徴を理解し、適した運用をすることが重要です。
今回はそのような方向けにそれぞれの拡張子の特徴や適切な使い方を解説していきます。
そもそも拡張子（画像フォーマット）ってなに？
拡張子とはファイルの種類を認識するために
ファイル名の末尾につけられる文字列のこと。
出典；Wikipedia
という方もいらっしゃると思いますが、ここからは特に画像拡張子について詳しく説明していきたいと思います。
拡張子（画像フォーマット）とは
「画像データを圧縮したり表示したりするファイルの種類」
で”画像フォーマット”とも呼ばれます。
代表的な画像ファイル形式
・「.jpg」 ・「.png」 ・「.gif」 ・「.svg」
などが挙げられます。
画像ファイルのファイル名を見ると「ファイル名.jpg」のように拡張子が付いていると思います。
この「ファイル名.〇〇」の「〇〇」の部分が拡張子の種類であり、
それぞれの画像ファイル形式の種類を表しています。
拡張子は「ファイル形式」を示している単なる識別情報です。
”ファイル形式”と”拡張子”の名称は異なる場合がありますので注意が必要です。
画像の種類は2つある！？
実は画像は2つの種類に分類されます。
表示方法の異なる2つの種類の特徴をしっかりと理解しましょう。
2つの画像の種類
・ピットマップ画像
・ベクトル画像
それぞれの特徴を解説していきます。
ベクトル画像
ベクトル画像とは「点」と「線」の情報が”数値化”された画像です。
どれだけ拡大してもぼやけないのが特徴です。
画像を”拡大”や”縮小”してもその都度コンピュータが”数値化”されたデータを再現するので劣化することがありません。
主にwebサイトのロゴやイラストは、複数箇所に様々な大きさで使用される事が多いため「ベクトル画像」です。
ピットマップ画像
ピットマップ画像とは、点の集まりで構成される画像です。
”無数の点”が集まって一つの写真になります。
「Minecraft」の細かいverとイメージするとわかりやすいかもしれません。
「写真」がピットマップ画像の代表です。
点の集まりなので”拡大”すると天の細かさに限界がきて画像が荒くなってしまいます。
一般的な画像ファイル形式である「JPG」や「PNG」は全てピットマップ画像であり、webサイトに用いられる写真画像はほとんどがピットマップ画像です。
拡張子（画像フォーマット）の種類
一般的に使用される代表的な拡張子（画像フォーマット）は以下の4つです。
代表的な拡張子4つ
・JPG（JPEG） ・GIF ・PNG ・SVG
それぞれの拡張子の特徴と用途を解説していきましょう。
「JPG」「JPEG」
「JPG」「JPEG」（ジェイペグ）とは（Joint Photographic Experts Group）の略です。
「JPG」「JPEG」の「P」はphotographic（写真）という言葉が入っている通り、写真に適した拡張子です。
「JPG」と「JPEG」の違い
実は「jpg」と「JPEG」では文字数の違い以外に違いはなく同じです。
旧WindowsOSでは拡張子の文字制限が3文字まででした。
一方で、「Mac」や「Linux」では文字制限はないため、それらのOSで保存された画像は「.jpeg」となりますがそれらの画像をWindowsで保存する場合3文字の文字制限があるために「.jpg」と省略する必要がありました。
なお、現在のWindows OSでは文字制限がなく4文字の「.jpeg」であっても使用する事ができます。
多くの人が長年Windows OSで「.jpg」としてファイルを保存するのに慣れていたため廃止されませんでした。
「JPG」「JPEG」のメリット
「JPG」「JPEG」のデメリット
↓画像の圧縮について詳しくまとめた記事はこちら
画像圧縮とは？画像を圧縮する重要性やメリット・デメリット。適切に「画像圧縮」できていますか？
「JPG」「JPEG」の用途
以上の特徴から「JPG」「JPEG」ではこのような用途に向いていると言えます。
「JPG」「JPEG」が適した用途
・写真や色数の多いイラストを作りたい場合
・色鮮やかな写真を使用したい場合
「PNG」
「PNG」（ピング）とは（Portable Network Graphics）の略です。
主にwebサイト上での画像の表示を目的として開発されました。
それまで自由に使用できていた「GIF」が特許の問題で自由に使用できなくなってしまったため、「GIF」に替わる新しい拡張子として開発されたのが「PNG」です。
「PNG」のメリット
↓”無料”画像圧縮ツール「Image Optim」がオススメ！
オススメの無料画像圧縮ツール「Image Optim」の使い方・メリット・デメリット
「PNG」のデメリット
「PNG」の用途
以上の特徴から「PNG」ではこのような用途に向いていると言えます。
「PNG」に適した用途
・写真やロゴなどで、背面透過を活かした画像を使用したい場合
・何度も加工を行う場合
・元のデータに戻す可能性がある場合
「GIF」
「GIF」（ジフ）とは（Graphics Interchange Format）の略です。
ファイル容量がとても小さく軽いことやアニメーションを表示する事ができることなどが特徴です。
「GIF」のメリット
「GIF」のデメリット
「GIF」の用途
以上の特徴から「GIF」ではこのような用途に向いていると言えます。
「GIF」に適した用途
・色数の少ないシンプルなイラストやロゴには向いている
・動画のようなアニメーションで表示したい場合
↓筆者が使用しているオススメの「GIF」作成ツール
「GIPHY Capture」の使い方！Macの画面を簡単にGIF化できる！
「SVG」
「SVG」（エスブイジー）とは（Scalable Vector Graphics）の略です。
今まで紹介してきた3つの拡張子とは違い「SVG」は唯一「ベクトル画像」です。
データを“数値化”する事ができるのでどれだけ”拡大””縮小”しても画像がぼやけないのが特徴です。
「SVG」のメリット
「SVG」のデメリット
「DOM」とは？
「DOM」（Document Object Model） の略であり、HTMLやXML文書のためのプログラムインターフェイスです。
↓この方のブログが詳しく解説されています。
「SVG」の用途
以上の特徴から「SVG」ではこの様な用途が向いていると言えます。
「SVG」に適した用途
・後から色やサイズを変更する可能性がある場合
・同じ画像で拡大したり縮小したりする場合
・アニメーションで表示したい場合
まとめ；用途別に使い分けよう
今回は一般的に使われる事が多い主要な拡張子（画像フォーマット）について1つずつ紹介しました。
各拡張子の特徴と用途を理解していただけましたでしょうか。
それぞれの特徴をしっかりと理解し使い分けることで画像を最適な状態で使用する事ができます。
可逆圧縮と非可逆圧縮の違いや拡張子の特徴を知っておくだけでも取り返しの付かないミスを防げるのではないでしょうか。
↓AppleユーザーならAirDropを使わない理由はありません。
「AirDrop」iPhoneやMacで超簡単に動画や写真を”画質を落とさずに”送受信可能な神機能。
