画像のファイル形式・拡張子とは
画像ファイル形式
画像を保存するファイルの種類のことです。
画像拡張子
ファイル名の末尾の.（ドット/ピリオド）以降の部分のことです。
.jpegと.jpgの違いとは？
「〜（ タイトル）.jpg」と 「〜（ タイトル）.jpeg」というよく似た種類があります。
この2つは表記されている拡張子が違うだけで、機能面での違いはありません。古いWindowsがファイル拡張子を3文字にしており。「.jpg」と言う拡張子が長年利用されてきたためです。その後、4文字の拡張子がWindowsでも利用できるようになりました。
特に理由がなければ3文字のほうで大丈夫です。
ビットマップ画像とベクター画像について
画像の種類には、ビットマップ画像とベクター画像があります。
ビットマップ画像
ビットマップ画像は、ピクセル（色の付いた点）の集合体の画像です。
拡張子「jpg」「png」などは、ビットマップ画像です。
下記の画像を見ていただくとわかりやすいですね。
画像をピクセルの集合で描いているので、画質は解像度（画素の密度）で決まります。
画像を拡大すると、足りないピクセルを補完するため、曲線や斜め線の部分でギザギザ（ノイズ）が目立ちます。
スマホで撮影した写真を、デザインツールで拡大してみるとわかると思います。
ビットマップ系の画像編集ソフトとして有名なものに、AdobeのPhotoshop（フォトショップ）があります。
ベクター画像
画像の直線や曲線、配色などをベクター計算という数式で描画しています。
特徴として、画像を拡大縮小しても、画質が劣化しない（可逆圧縮）です。
Webサイトでは、主にアイコンや図形などに多く使われています。
拡張子「svg」がベクター画像です。
ベクター画像を描ける代表的な画像編集ソフトとしては、AdobeのIllustrator（イラストレーター）があります。
画像のファイル形式・拡張子一覧
トリペン先生よく使う拡張子などは、用途を理解して使い分けれるようになってください。
JPEG （ジェイペグ）
| 読み方 | ジェイペグ |
| 形式 | ビットマップ |
| 拡張子 | .jpg/.jpeg/.JPG/.JPEG/.jpe/.jfif/.pjpeg/.pjp |
| 推奨する用途 | 写真 |
特徴
・ データの容量が小さい
・ フルカラーなので色数の多い画像に最適
・ 上書き保存で画質が損なわれる（非可逆圧縮）
・ 圧縮率を指定できる
・ 拡張子の数が多い
・ 透過処理はできない
JPEGは主に写真で使われる画像形式です。圧縮率が高く、フルカラー（約1,677万色）の画像を扱えるため、写真の保存はほとんどJPEGになります。
デザインツールで圧縮率は指定することも可能です。
JPEGは透過が出来ないため、ロゴやアイコンのような背景を切り抜きたい時は使いません。
PNG
| 読み方 | ピング |
| 形式 | ビットマップ |
| 拡張子 | .png |
| 推奨する用途 | イラスト・ロゴ（背景が透過がいい場合） |
特徴
・ データを完全に復元できる
・ 1,677万色のフルカラー
・ 透過処理ができる
・ Web上で使える
・ データが大きくなりがち
PNGはJPEGに続いてWebで使われることが多いメジャーな形式です。GIFに代替する画像ファイル形式として開発されています。
透過機能を持ち、GIFのような256色の制限がないのが特徴です。GIFの代替で開発されていますが、GIFよりも性能が高く使いがってがいいです。
PNGは、1,677万色のフルカラー対応で、グラデーションや色数の多い画像に適しています。
ただ、画質は綺麗なのですが、JPEGやGIFに比べるとデータ容量が大きいのが難点になります。
PNGは3種類ある？
PNGには「PNG-8」「PNG-24」「PNG-32」という3種類が存在します。（どれも拡張子は同じ .png になります）
◎PNG-8
GIFと同じく256色を表現する事ができ、ファイルサイズも軽いのが特徴になります。
透過もでき、持っている色情報が少なく、若干フチが粗くなってしまうのが欠点。
単色のアイコンや色数の少ない画像に使いますが、写真やグラデーションといったものには使いません。
◎PNG-24
JPGと同じ約1,677万もの色を表現する事ができます。写真やグラデーションに向いている画像形式。
画像をキレイに保存できますが、その分データ量は大きくなってしまいます。PNG-24は透過情報を持たないので注意。
◎PNG-32
JPGと同じ約1,677万色と、258色の透明情報を持つ画像形式。
PNG-8でも透明は表現する事ができますが、前に説明した通り荒いため、透明を使う場合にはPNG-32を使うのがいいでしょう。
Photoshopで書き出す時は、「PNG-24」で「透明部分」を選択することで、 「PNG-32」 になり透明やグラデーションを綺麗に表現することができます。
GIF
| 読み方 | ジフ/ギフ |
| 形式 | ビットマップ |
| 拡張子 | .gif |
| 推奨する用途 | イラスト・ロゴ・アイコン・簡易なアニメーション |
特徴
・データ容量が小さい
・ 最大256色
・ 透過処理ができる
・ アニメーションを作ることができる
GIFとは、容量が小さく、Webページでの表示スピードが早いファイル形式です。
データの容量はとても小さく、アニメーションを作ることもできます。
ですが、画質は劣化してしまいます。基本的に、色数が少なく劣化しても問題ない画像で使いますが、そこまで頻度は多くないです。
APNG
引用元：https://ics.media/entry/3718/
| 読み方 | エーピング |
| 形式 | ビットマップ |
| 拡張子 | .png |
| 推奨する用途 | アニメーションGIFの置き換え |
APNGとはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる、次世代の新しい画像形式です。
APNG 32bitはフルカラーに加え、アルファチャンネルもサポートしているため、見た目もきれいです。さらに、可逆圧縮で圧縮されるため、PNG連番画像に比べてかなりデータ容量を圧縮できる特徴があります。
SVG
| 読み方 | エスブイジー |
| 形式 | ベクター |
| 拡張子 | .svg/.svgz |
| 推奨する用途 | シンプルなイラスト・ロゴ |
特徴
・ テキストデータ
・ アニメーションを作ることができる
・ 拡大縮小に強い（可逆圧縮）
・ スマホも同じファイルでOK
・ CSSで色やサイズ変更が容易
SVGは、XMLで記述する、ベクター画像のファイル形式です。
SVGは、画像でありながらマークアップ言語で記述されるテキストデータなので、テキストエディタで編集することができます。また、コーディングだけでアニメーションを作ることができるという特徴もあります。
SVGは Adobe Illustrator を使ってつくることができます。使い方に少しクセがありますが、用途によっては大変便利な形式なので、積極的に使いたいところですが、ブラウザによっては思うように表現できない場合があるため、特にIE（Internet Explorer）の対応などは考える必要があります。
WebP
| 読み方 | ウェッピー |
| 形式 | ビットマップ |
| 拡張子 | .webp |
| 推奨する用途 | JPEGやPNG、GIFの置き換え |
特徴
・ 高画質
・ データをかなり削減できる
・ 透過処理ができる
・ 可逆圧縮と非可逆圧縮どちらも対応できる
・ アニメーションを作ることができる
・ 対応ブラウザがまだ少ない
WebPは、軽くてキレイな新しい画像フォーマットです。
WebPの開発は、Googleが行なっています。
もっとも特徴的なのは、非可逆圧縮でもアルファチャンネル（透過処理）を扱える点です。
GIFやPNGのように透過した画像を作っても、WebPで書き出せJPEGの欠点を補うことができます。
ファイルサイズをかなり減らすことができるため、ページ読み込み速度の向上に期待できる拡張子です。
利用するには対応ブラウザを調べてからご使用ください。
参考サイト
さらにアニメーションにも対応しているため、GIFはもちろんAPNGとアニメーション画像形式での主軸を争っています。
WebPは他の画像ファイル形式と違い、サポートブラウザの種類が少ないのが現状です。そのため導入する場合は、非対象ブラウザに対するアプローチを考える必要が出てきます。
参考サイト
現在はまだサポートされていないブラウザもあるため使いづらい現状ですが、Safari（iPhone）が対応されるようになったら一気に普及する可能性があります。
画像の種類、拡張子まとめ
デザインやWebといった枠組であれば、画質以外にも「軽さ」「背景が透明」「拡大縮小に強い」「どんな環境でも表示できる」など。
活かせるシチュエーションはさまざまで、使い分ける必要があります。
トリペン先生時代の進化でWebPやAPNGなど、新しい形式もドンドン出てきています。
常に最新の情報収集を怠らないようにしましょう！
講座を完了したらクリックしてね！
質問してみる
コメント一覧 （2件）