※当サイトではアフィリエイト広告を利用しています

その他

【 JPG / GIF / PNG 】画像ファイル形式のちがい

【 JPG / GIF / PNG 】画像ファイル形式のちがい

画像ファイルの種類はJPG、PNG、GIFなど、いろいろな種類がありますよね。
今回は画像ファイルのちがいについて、まとめてみたいと思います。

JPG / GIF / PNGのちがい

まずそれぞれの特徴について列挙したいと思います。

JPG (Joint Photographic Experts Group)

JPG(Joint Photographic Experts Group)の主な特徴です。

JPGの特徴:

  • 読み方:ジェイペグ
  • 拡張子→.jpg / .jpeg
  • 色数→フルカラー 24ビット(1670万色)
  • 保存すると劣化してしまう。
  • 透過させることができない。
  • 色数の多い写真向き。

GIF (Graphics Interchange Format)

GIF(Graphics Interchange Format)の主な特徴です。

GIFの特徴:

  • 読み方:ギフ
  • 拡張子→.gif
  • 色数→8ビット(256色)
  • 透過させることができる。
  • アニメーションさせることができる。
  • アニメーションを導入したいとき向け。

サイトをみているとたまにアニメーションつきの画像がありますがGIFなんですね。
また自分で画像を選んでGIFを作れるサイトもあるようです。

PNG (Portable Network Graphics)

PNG(Portable Network Graphics)の主な特徴です。

PNGの特徴:

  • 読み方:ピング
  • 拡張子→.png
  • PNGの種類によって、8ビット(256色)にもフルカラー 24ビット(1670万色)にもできる。
  • 保存しても劣化しない。
  • 透過させることができる。
  • 色数が多いと、JPGよりファイルサイズが大きくなりやすい傾向にある。

PNGはPNGの中でも、PNG-8やPNG-24など種類がいくつか分かれているようです。

今回は詳しいちがいについて言及しませんが、
PNG-8は8ビット(256色)でファイルサイズも軽めなので、
色数が少なく背景を透過させることも多いロゴなどに使われることが多いようですね。

またPNGは透過可能で、保存しても画像が劣化しないため、
JPGとGIFのよいとこどりなかんじがしますが、
色数が多いとJPGよりもファイルサイズが大きくなりやすいので注意が必要なようです。

まとめ

今回はJPG / GIF / PNGのちがいをまとめてみました。

今のところ大雑把ではありますが、
以下のようなかんじで使い分けていこうかなと思います。

  • JPG→色の多い一般的な写真
  • PNG→色が少なく透過も必要な場合が多いロゴやテキストなど
  • GIF→アニメーションをつけたいとき

PNGはフルカラーもできるようですが、JPGよりサイズが大きくなりやすいです。

そのため透過させない限りは、写真系→JPG、色数が少ないもの→PNGで
分けるのがいいのかなという印象を受けました。

PNGは種類が分かれているのが奥深いですね。
種類についてももう少し勉強してみたいと思います。

以上、画像ファイル形式のちがいについてでした。

参考:HTMLクイックリファレンス web画像について

【簡単に画像圧縮】Tiny PNGの使いかた【PNG / JPG】
【簡単に画像を圧縮できるサイト】Tiny PNGの使い方【PNG / JPG】画像データの重さは ページの読み込みスピードに影響するのでできるだけ軽くしたいですよね。 今回は無料で簡単にPNG/JPGファイルを圧縮してくれる「Tiny PNG」というサイトの使いかたをまとめます。...