Web画像に使えるJPEG・PNG・GIFの特徴【初心者向け】

JPEG PNG GIF

画像を保存するときにはその画像に適した画像フォーマット(画像形式)で保存するのが理想的です。

しかし、一言に画像といってもデジカメで撮った写真やイラスト画像や手書き画像など様々ですよね?

そこで今回はウェブサイトでよく見る「JPEG」「PNG」「GIF」に焦点を絞ってそのフォーマットの特徴を初心者の人にも分かるように解説していきたいと思います。

画像フォーマットの種類

画像フォーマットには、ウェブサイトで頻繁に使う「JPEG」「PNG」「GIF」以外にも「TIFF」「BMP」「RAW」などの画像フォーマットがあります。

しかし、後者は基本的にファイル容量が異常なまでに大きくなってしまったり、印刷用だったり、開くために専用のソフトが必要だったりとウェブサイトには不向きです。

また、最近ではイラストやロゴ画像を拡大してもぼけないで表示させることができる「SVG」という画像形式が全ブラウザでサポートされ始めたということで、こちらも要チェックしたいところであります!

  • JPEG(ウェブサイト向き)
  • PNG(ウェブサイト向き)
  • GIF(ウェブサイト向き)
  • SVG(ウェブサイト向き)
  • TIFF
  • BMP
  • RAW

拡張子とは?

拡張子はファイルの末尾に付いている3~4文字程度のアルファベット文字のことです。

この拡張子が付いていることでこのファイルがどんなファイルかを識別できるようになっています。

ウェブページに使われている「.html」やZIP形式ファイルの「.zip」なども全て拡張子になります。

画像の拡張子に大文字や小文字が使われている場合があると思いますが、基本的にWindowsでは大文字、小文字の区別はしていませんのでとくに気にする必要はありません。

しかし、UNIXは大文字、小文字を区別しますので気をつけた方がいいですね。

  • JPEGの拡張子は「.jpeg」
  • PNGの拡張子は「.png」
  • GIFの拡張子は「.gif」
拡張子の説明画像

PNGの特徴

PNGとはPortable Network Graphicsの略称でGIFの代わりとして1996年に新しファイル形式として生まれました。主にイラストやロゴや手描き画像のように色数の少ない画像に最も適しています。

ランレングス圧縮

PNGはランレングス圧縮を採用しています。

ランレングス圧縮を分かりやすく説明するには、下図のような「WWWWWXXXXYYY」といった画像データをもとに考えてもらうと理解しやすいと思います。

同じ特徴を持つデータを探してデータを符号化していくと「W5X4Y3」と表すことができるのがランレングスです。

ランレングス圧縮

ランレングスはデータを符号化して圧縮していく方法ですので、符号化データ「W5X4Y3」を「WWWWWXXXXYYY」のデータに戻すことも当然できるわけです。

画像の保存を繰り返しても画像劣化が起こらないのはこのためです。

これとは真逆なのがJPEGになります。

JPEGではランレングスのように圧縮時のデータを戻すことはできません。これは圧縮時にデータの一部を切り捨てて圧縮しているために失ったデータは二度と戻すことができないのです。

保存を行うごとに画像が劣化していくのはこのためです。

ちなみにPNGは下図のようなフラットな画像保存に最適です!

青空
  • 1677万色(24ビット)256色(8ビット)使用可能
  • 圧縮方式は可逆圧縮
  • 透過処理が可能
  • 画像劣化が起きない
  • 色数の少ない画像向き
注意
圧縮方法は可逆圧縮と非可逆圧縮に別けることができます。この圧縮アルゴリズムにはランレングス法(連長方)やLZWがあります。PNGやGIFのようにデータを完全に元に戻せる可逆圧縮。JPEGのように不要なデータを捨てて圧縮する方法に非可逆圧縮があります。

PNGでは背景の透過処理が可能

下の画像を見てもらうとイラスト以外の背景が白黒の格子状になって透過処理されているのが分かると思います。

これは、PNGの特徴の一つでもあります。

このように透過処理して背景を消すことでイラスト合成が可能になります。

カメのイラスト

GIFの特徴

GIFとはGraphics Interchange Formatの略称です。GIFもPNGと同様に背景の透過処理ができます。

PNGでは透明処理を全般的に行うことができるのですが、(PNGでは半透明にすることもできる)GIFでは透明か不透明のどちらかの選択しかありません。

GIFでは「LZW」といった技術を採用しているために画像容量を大幅に減らすことができますが、256色までのサポートのためデジカメ写真のような色数の多い画像には不向きです。

また、このフォーマットを使ってパラパラ漫画のようなGIFアニメが作れますので、興味のある人はやってみるといいと思います。

  • 256色(8ビット)
  • 圧縮方式は可逆圧縮
  • PNGと違い半透明にはできない
  • 色数の少ない画像向き
  • アニメーションや色数の少ない画像

LZWは1984年に発表されたが、1986年にユニシス社によるGIF特許問題で騒動が起き、その代わりとして新しい形式のPNGが登場してきた経緯があるようです。

JPEG(JPG)の特徴

JPEGとはJoint Photographic Experts Groupの略称で、主にデジカメ写真やグラデーションなどの色数の豊富な画像に最も適しています。

圧縮方法は非可逆圧縮を採用しているために保存(圧縮)されるたびに画像は劣化していきます。

下の画像のようにグラデーションがかかった綺麗な写真にJPEG保存がオススメです。

夕日
  • 1677万色(24ビット)
  • 圧縮方式は非可逆圧縮
  • 背景透過が不可能
  • 保存するたびに画像劣化を起こす
  • 写真画像に向いている

また、JPEGとPNGではフルカラーの1677万色を扱えるので、グラデーションがかかった綺麗な写真もPNGでいいと思われる方もいると思います。

しかし、ファイル容量がとんでもなく大きくなるのでやめた方がいいです。

それから、イラストやロゴ画像を逆にJPEGで保存するとノイズが入り、画像が汚く表示される恐れがあるのでコレもやめておいた方が無難です。

やはり、画像の特徴にあった形式を使うのが一番ですね。

まとめ

画像の最適化を図るためにもその特徴にあった画像フォーマットを選びましょう!それではまた

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください