ホームページ担当者なら必見！
画像の拡張子の違いをカンタン解説
今回は、知っておきたい画像の拡張子についてご紹介いたします！
そもそも拡張子とは？
画像や文章データなど、ファイルの種類を識別するためのものです。
末尾に「．（ピリオド）+英数字」で表されます。
末尾に「．（ピリオド）+英数字」で表されます。
JPG（またはJPEG）
日頃から耳にする機会が多い、最もポピュラーな拡張子ではないでしょうか。
デジタルカメラやスマートフォンでの写真など、幅広く使われている形式です。
デジタルカメラやスマートフォンでの写真など、幅広く使われている形式です。
特徴
■データサイズが小さい。
■写真や色数の多いイラストにオススメ（ベタ塗りが主体のイラストは不向き）。
■保存し直すたびに画質が劣化する。
■写真や色数の多いイラストにオススメ（ベタ塗りが主体のイラストは不向き）。
■保存し直すたびに画質が劣化する。
写真
データサイズが小さくてキレイ。圧縮するほど劣化します。
色数の多いイラスト
グラデーションなどもキレイに表現可能。
色数の少ないイラスト
ベタ塗り部分にノイズが入ることがあるので、あまりオススメできません。
ホームページでは……
■写真
■色数の多いイラスト
にオススメです！
GIF
インターネットで見かける動くアイコンやイラストは、この形式が使用されています。
アニメーションの設定が可能ですが、もちろん静止画でも使用可能です。
アニメーションの設定が可能ですが、もちろん静止画でも使用可能です。
特徴
■256色のみの対応。
■色数の少ないイラストやロゴマークなど、境界線がくっきりしている画像にオススメ。
■写真には不向き。
■透過処理が可能。
■アニメーションの設定が可能。
■色数の少ないイラストやロゴマークなど、境界線がくっきりしている画像にオススメ。
■写真には不向き。
■透過処理が可能。
■アニメーションの設定が可能。
写真
対応している色数が少ないため、なめらかな表現ができません。
色数の多いイラスト
同じイラストでも、グラデーション等の表現は苦手です。
色数の少ないイラスト
くっきりとキレイに表現でき、透過設定もできます。
ホームページでは……
■シンプルなイラスト
■ロゴマーク
■ロゴマーク
にオススメです！
PNG
どんな画像でも劣化することなくキレイに見せてくれる反面、画像の内容によってはデータサイズが非常に大きくなるため、注意が必要です。
特徴
■画質が劣化しない。
■色数の少ないイラストやロゴマークなど、境界線がくっきりしている画像にオススメ。
■写真や色数の多いイラストでは、JPGよりもデータが重くなる
■透過、半透明の処理が可能。
■色数の少ないイラストやロゴマークなど、境界線がくっきりしている画像にオススメ。
■写真や色数の多いイラストでは、JPGよりもデータが重くなる
■透過、半透明の処理が可能。
写真
キレイですが、上記JPG版の約5倍のサイズになりました。
色数の多いイラスト
こちらはJPG版の約3倍のサイズになりました。
色数の少ないイラスト
劣化せず、データサイズも小さく、透過や半透明の設定もできます。
ホームページでは……
■シンプルなイラスト
■ロゴマーク
■ロゴマーク
にオススメです！
BMP
最近は見かけることが減ってきましたが、Windowsをお使いの方なら目にしたことがあるかもしれません。
Webサイト上では使えない形式ですので、注意が必要です。
Webサイト上では使えない形式ですので、注意が必要です。
特徴
■Windowsの標準的な形式。
■画質が劣化しない。
■データサイズがJPGよりも大きい。
■画質が劣化しない。
■データサイズがJPGよりも大きい。
■RGBのみのサポートで、CMYKは非対応。
まとめ
拡張子名
| 色数
| 長所
| 短所
| 用途
|
JPG
| 1677万色
（24bit） | ・データサイズが小さい
・色数が多い
| ・保存し直す度に画質が劣化
| ・写真
・色数が多いイラスト
|
GIF
| 256色
（8bit） | ・透過処理が可能
・アニメーション設定が可能
| ・色数が少ない
・写真には不向き
| ・色数が少ないイラスト
・動きが必要な画像
|
PNG
| 1677万色
（24bit）
| ・画質の劣化がない
・透過や半透明の処理が可能 | ・データサイズが大きい
（JPEGと比較して） | ・色数が少ないイラスト
・透明色を使った画像
|
BMP
| 1677万色
（24bit） | ・Windowsの標準形式
・画質の劣化がない
| ・データサイズが大きい
・CMYKは非対応
| ・高解像度の写真
|
いかがでしたでしょうか。
今回ご紹介した画像の拡張子についての知識は必須ではありませんが、何かと役立つこともあるかと思います！
Webサイト更新のご担当者のみなさま、画像素材を撮ったり作ったりする際に、目的に合わせて保存形式を使い分けてみてはいかがでしょうか
