リスティング広告の運用代行についてのノウハウやテクニックを公開します!

jpg・gif・pngって何?画像の種類や違いを解説!

画像拡張子

パソコンで画像ファイルの一覧などを見てみると、ファイル名の後に拡張子と呼ばれる「.jpg」「.gif」「.png」「.tif」など画像によって異なる拡張子が付いていると思います。
このように画像ファイルには「JPG」「GIF」「PNG」といった種類(形式)があり、それぞれ特徴があります。
 
今回はホームページやブログで使用できる形式の画像ファイルの特徴と適した使い方を簡単にご紹介したいと思います。

写真データはJPG(ジェーペグ) 

JPGは最もポピュラーな画像形式です。
1,677万色のフルカラーを表現できファイルサイズの圧縮に優れているので、一般的な写真の保存形式で最も使われています。
皆さんもデジカメで撮影した写真はJPG形式で保存している方が多いと思いますし、スマートフォンで撮影した写真もJPGで保存されます。

ファイルサイズを節約できるJPGですが、保存する度ファイルを圧縮してしまうため、保存を繰り返すと画質が劣化してしまいます。
印刷物に使用するような高品質な写真の場合は画像管理に注意が必要です。

ホームページやブログの掲載する写真では表示速度を優先する必要があるので、ある程度圧縮をして軽いファイルサイズにしたJPGファイルを使用するとよいでしょう。

JPEG画像サンプル

jpgサンプル jpgサンプル   

 

見比べると130KBまで圧縮した方の写真はブロックノイズやモスキートノイズと呼ばれる画質劣化が生じていますが、webで使用する写真であればある程度圧縮したものでも問題無いと思います。

イラストや図形はGIF(ジフ)

GIFは256色までの対応が可能で、イラストや図形、アイコンなど輪郭がはっきりとした画像、単色ベタ面を多く含む平坦な画像に向いています。
反対に色数が少ないため写真やグラデーション表現には向いていません。

 

またGIFは複数の画像を使用してアニメーション表現ができます。
最近はあまり見かけませんが、点滅するアイコンやボタンはGIFアニメーションで作られています。

GIFとJPG画像の比較

gifサンプルgifサンプル

フラットで色数の少ないイラストなどはGIFの方がシャープに表現できています。

JPGではノイズが発生するのでぼやけた印象になってしまいます。
ファイルサイズもGIFの方が少なくなっています。

GIFに変わる利便性の高いファイル形式PNG

PNGは、GIFの代替として開発されたファイル形式ですのでGIFのようにイラストや図形などに向いていますが、JPEGと同じように写真やグラデーションを使ったイラストでも使うことができる形式です。
圧縮率が高いためGIF画像よりファイルサイズを小さくすることができます。

 

しかし、フルカラー写真ではファイルサイズがJPGより大きくなってしまうため、注意が必要です。
JPGと違い保存を繰り返しても画質が劣化しないことと、透過要素がある画像を保存できる、という特徴があります。
 
一般的にはまだ扱う機会の少ないファイル形式かもしれませんが、「画質が劣化しない」「複数の透過色を指定できる」「GIFよりファイルサイズが軽くできる」などにGIFファイル変わってお目にかかる機会が増えるファイル形式だと思います。

JPGとPNG画像の比較

pngサンプルpngサンプル

見た目にはどちらがJPGかPNGかは分かりません。

ただ、ファイルサイズはPNGが大きくなってしまいます。

GIFとPNG画像の比較

gifサンプル pngサンプル

 
グラデーションの表現に注目してみるとPNGのほうが滑らかに表現できています。
ファイルサイズもPNGの方が若干少なくできました。

「WEBマーケティングを活用して集客の問題を解決したい」
「ホームページの成果をもっと伸ばしたい」
「採用の問題を解決したい」
など、お気軽にお問い合わせください!