パソコン

画像の形式でjpeg・jpg・pngってあるけど違いは?ブログにはどれを使えばいい?

こんにちは、tetsuです。

こうしてブログを運営していると、何かと画像を使う機会が増えてきます。

ブログに使用する画像をよーく見てみると、画像の名前の末尾に、jpegやjpg、そしてpngといったちょっと意味の分からない横文字が表示されていますよね。

今回の内容は、jpeg・jpg・pngの違いやブログに適しているのもはどれなのか見ていこうと思います。

jpeg・jpg・pngって何のこと?

jpeg・jpg・pngというものは、拡張子と呼ばれファイルの識別をするためのファイル名なんです。

まず、jpegとjpgから見ていくと、この2つの違いは表示されてる名前が違うだけ。

機能などには違いはありません。

じゃなんでこんな紛らわしものが存在しているのかと言うと、OSのシステムの歴史が関係しているんですよ。

1980年代に普及していたMS-DOSというOSの仕様が関係しているのですが、このMS-DOSというOSでは、3文字までしか使えなかったからjpgとまでしか入力ができませんでした。

現在のOSでは、3文字と言う制約がないから「jpeg」と言う感じで、4文字使って問題がないってわけです。

企業でよく使われるMicrosoftのオフィスのWordやEXCELだって、末尾に「.docx」や「.xlsx」といった4文字の拡張子が使われていますね。

ただ、今でもMS-DOSの仕様を引き継いでいるWindowsでは「.jpg」と言う拡張子を使ってる事もあるそうです。

jpegとjpgには違いはない事がわかったところで、今度はjpegとpngの違いにつてい見て行きましょう。

JPEGの特徴

jpegですが、「Joint Photographic Experts Group」を略したもので、私たちがよく使ってるデジタルカメラなどで使われていますね。

jpegはフルカラーの1,677万色を表現することができると言う強みがあって、主に写真的なイメージデータを綺麗に表示させることが出来ます。

PNGよりもファイルサイズが小さくなるといった特徴があって良いことばかりだと思いそうですが、一度画像を圧縮して画質を下げてしまうと元に戻せないと言ったデメリットもあります。

その理由としては、jpeg形式は「不可逆圧縮方式」を採用しているため「ジェネレーションロス」といって、編集のたびに画像を劣化させてしまからなんです。

FAXされて来たものを、更にそのままFAXするイメージだと言われていますが・・・

これを回避するためには、編集途中のファイルは、そのファイルを作ったアプリケーションで保存をしておく事や圧縮率が違うものを、何枚か画像を保存しながら編集をすると言ったやり方もあります。

または、「PhotoShop」や「Illustrator」といったプロが使うようなソフトを使っても良いでしょう。

PNGの特徴

次に、pngですが「Portable Network Graphic」を略したものです。

pngは色数を256色に制限したり、フルカラーで表示することも出来て、写真のような色数が多いものは、JPEG以上に綺麗に表示することが出来ます。

しかし、PNGにもデメリットがあって、フルカラーにした場合は、JPEGよりもファイルサイズが大きくなってしまうという点です。

ただ、JPEGのように加工を繰り返しても、劣化せずに綺麗な画質を保つことができますし、透過も可能ですから、画像の透明度を自由に設定する時などに使われることが多いようです。

下の画像は、JPEGとPNGを比較したものです。
後ろにあるカップを透かしているかいないか、違いがわかると思います。

JPEGとPNGの違い

PNGには、3つの形式があります。

「PNG-8」「PNG-24」「PNG-32」と言うものです。

軽さを重視しさせたいのであれば、色数を制限した「PNG-8」を使い、画質を重視したいのであれば「PNG-24」と使うというのが一般的。

さらに、画質を重視し、なおかつ背景を透過させたい場合には「PNG-32」を使用するといいのですが、その分データ量は大きくなってしまうということ。

どの形式のPNGを使っても、拡張子は「.png」になります。

ブログにはどの形式を使えばいい?

ブログやホームページでフルカラーの大きな画像を使いたい時は、サポートする色数が多いJPEGが最適です。

PNGはどちらと言えば、テキストや線画など、色の境界がはっきりしたイメージに適してしるし、背景を透過できるというメリットがありますから、ロゴ等で使うことの方が多いようです。

まとめ

今回は、jpeg・jpg・pngといった画像の形式について、違などをみてきました。また、ブログで使用する画像にはどの形式のものが適しているのかについても見てきました。

この記事のまとめ
  • jpegとjpgの違いは表示されてる名前が違うだけで、1980年代に普及していたMS-DOSというOSの仕様上、3文字までしか使えなかったから。
  • jpegはフルカラーの1,677万色を表現することができるが、一度画像を圧縮して画質を下げてしまうと元に戻せない。
  • pngは色数を256色に制限したり、フルカラーで表示することも可能だがJPEGよりもファイルサイズが大きくなってしまう。
  • pngは、JPEGのように加工を繰り返しても、劣化しないし、透過も可能。
  • ブログやホームページで、フルカラーの大きな画像を使いたい時はJPEGが最適。
  • PNGはロゴ等で使うことの方が多い。

以上が、今回のまとめとなります。

拡張子って、今回の画像だけでなく、動画や音声ファイルといったものでも、沢山種類があります。

何をどう活用して行けばいいのか難しですが、最適な使いわけができれば、ファイルサイズを軽くし、かつ綺麗に見せることもでると思います。

そうすれば、ブログの表示速度などにも影響がでますから、ぜひ今回のjpegとpngをうまく使いわけて行きたいですね。