JPEGとは?ファイル形式の特徴と使い方【PNG・GIFと比較】

JPEGとは?ファイル形式の特徴と使い方【PNG・GIFと比較】

emi

emi

撮影した写真やイラストをパソコンで保存するときに、どの形式を選んでいますか?

形式といってもいろいろありますが、Webサイト制作では主にJPEG・PNG・GIFの3つの画像フォーマットが中心に使われています。これらはすべて主要Webブラウザで表示できますが、それぞれに特徴があり、用途によって使い分ける必要があるのはご存知でしょうか。

そこで今回は、Webサイト制作に使える主な画像ファイル形式と、その特徴について初心者の方にもわかりやすく紹介します。

※この記事は2022年5月に編集部が情報を更新しました

JPEGファイル形式の基礎

そもそもJPEGとは

JPEG(Joint Photographic Experts Group)とは、簡単にいうとファイル形式の一種で、写真などのデータを保存するのに向いています。読み方は「ジェイペグ」です。

もう少し専門的に説明すると、JPEGとは静止画像データの圧縮方式の一種で、規格を制定した組織の略称が方式名として使用されています。圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるため、デジカメ写真の記録に使用されることが多いです。
 

こんなものにJPEGが使われています
  • デジカメの写真データ
  • 証明写真の写真データ

JPEGの歴史

JPEGは国際標準化機構(ISO) 、国際電気標準会議(IEC)、国際電気通信連合(ITU)の合同作業部会「Joint Photographic Experts Group」が1992年に策定し、部会の名称がそのまま名前になりました。

当時のコンピュータのメモリは現在のものより小さかったため、圧縮してサイズを小さくするために不可逆圧縮が用いられました。

JPEGとJPGの違い

JPEGとJPGは同じものなので、2つに機能面の違いはありません。拡張子3文字制限がなくなった現在では、どちらも使用することができます。WindowsもMacでもデフォルトでは「.jpg」が表示されるので、迷ったときは「.jpg」で問題ありません。

JPEGとJPGの違い
▲すべて同じ画像ファイル形式として認識される

JPEGのメリット・デメリット

デジカメの普及により一般的に知られているJPEGですが、Web制作などの場面では以下の2つの特徴があります。

メリット:拡張子がたくさんある

使用するパソコンやソフトによって、有名どころでは「.jpg」や「.jpeg」、他にも「jpe」「jfif」「pjpeg」「pjp」などの拡張子が混在していますが、すべて同じものなので違いはありません。基本的には「.jpg」や「.jpeg」を使うのが良いでしょう。

かつてMS-DOSの時代は拡張子は3文字までという制約があり、その流れで現在でも拡張子は3文字で表記する習慣が残っているため「.jpg」を一般的に使用することが多いようです。

また、Windowsでは大文字と小文字が区別されません。したがって aaa.jpg も aaa.JPGも同じものとして認識されますが、UNIX上では大文字と小文字が区別されるので注意が必要です。

デメリット:上書き保存で画質が劣化する

JPEGで加工した画像は、何も気にせず上書き保存すると劣化する場合があります。

加工前の「LIG」のロゴ画像と加工後の「LIG」のロゴ画像を比較した画像

左が加工前、右がPhotoshopで保存を5回繰り返した加工後のものです(JPEG形式、高圧縮率で保存)。右の画像は文字の周囲が少し汚れているように見えませんか?

JPEGは不可逆圧縮を行うため、画質が劣化してしまうのがデメリットです。「不可逆圧縮」とは、一度圧縮すると元には戻せない方法のことを指します。

容量が多い画像データをとても小さくできるのがJPEGのメリットですが、圧縮の際に一部のデータを切り捨ててしまうため、画質が劣化してしまうのです。

《JPEG圧縮で画像が劣化する仕組み》

JPEGによる圧縮では、画像を8×8ドット単位の正方形で区切り、この正方形をひとつのブロックとして近い色に置き換えています。その際にデータを切り捨てているため、元に戻すことができません。また、圧縮しすぎるとブロック単位で色が均一化され、画像がモザイク状になってしまいます。

単に画像を開いて閲覧したり、画像のコピーを作成するぶんには劣化は起こりません。Photoshopなどの画像加工ソフトで開き、「上書き保存」や「別名で保存」を行う際に上記の圧縮処理が行われて画像が劣化します。数回の保存では劣化は目立たないので神経質になる必要はありませんが、仕事で画像加工する場合などは注意が必要です。

画像加工ソフトには圧縮率を選択できるものがあるので、目的に応じて使い分けられるように、設定を確認してみましょう。

画像編集ソフトの「JPEGオプション」画面のキャプチャ画像

JPEGの扱い方

圧縮率が高くなるほど画像サイズは小さくできますが、そのぶん画像は劣化してしまいます。JPEGではいくら低圧縮に設定しても多少の劣化は避けられないので、事前に容量と画質のバランスを見ながら圧縮比を試してから作業するようにしましょう。

上記に気をつければ、JPEGは写真の圧縮に適した非可逆圧縮方式であり、写真画像に限ってはJPEGのほうが見た目はそのままにファイルサイズが小さくなることが多いです。

JPEG/PNG/GIFファイル形式のメリットデメリット

写真などではあまり意識せずに保存することが多い画像データですが、Web制作となるとそれぞれのメリット・デメリットを理解して使い分ける必要があります。

メリット デメリット
JPEG
  • 写真を見た目をそのまま圧縮できる
  • 圧縮で画像が劣化してしまう
  • PNG
  • データを完全に復元できる
  • 透過処理ができる
  • 古いPCやブラウザに対応していない
  • GIF
  • データ容量が小さい
  • 透過処理ができる
  • アニメーションを作ることができる
  • 色数に制限がある
  • また、画像の形式は上記3種類以外にもあるので、目的に応じて自分なりに試してみるのもいいかもしれません。

    PNGファイル形式の基礎

    そもそもPNGとは

    PNG(Portable Network Graphics)とはWebでビットマップ画像を扱うファイルフォーマットとして開発されました。読み方は「ピング」もしくは「ピン」です。

    8bit(PNG-8)と24bit(PNG-24)を選択でき、8bitの場合はGIFと同様に256色でのグラフィックス表示に適した保存ができます。24bitでは、フルカラー(約1,677万色)の写真が保存できるほか、透過色を持たせられます。

    知っておきたいPNGの特徴

    Web制作などの場面で活躍することが多いPNGの特徴は以下の3つです。

    1. データを完全に復元できる

    PNG形式はデータを復元したときに、完全に元に戻すことができる圧縮方法(可逆性圧縮)です。

    《PNG圧縮でデータを完全に復元できる仕組み》

    たとえば「赤赤赤赤赤白白赤赤赤赤赤」というデータがあった場合、このままだと12文字分の容量ですが、「赤5白2赤5」と表現すると6文字分に削減することができますよね。これがPNG形式の圧縮方法(ランレングス圧縮)です。

    また、この方法は「赤5白2赤5」を「赤赤赤赤赤白白赤赤赤赤赤」に簡単に復元することができます。これが可逆性圧縮です。

    ただし、データを切り捨てる圧縮とは違い、容量が数倍大きくなってしまいます。

    2. 透過処理ができる

    透過色とは、指定した色に対して透過情報を一括して加えることができる機能のことです。背景が1色のみで背景を透明にしたいとき、背景色を透過色に指定すれば一括して背景を透明にすることができます。

    また、PNGは1ピクセルに対して8bitから16bitの透過情報を付加できるようになっている(アルファチャンネル)ため、α=0を透明、α=MAXを不透明と定義して、αが0<α<MAX の値を取ると、その色は半透明を表現することができるようになります。

    このように透過処理ができることがPNGの特徴です。

    3. 比較的新しい画像ファイル形式

    PNGは1996年に登場した比較的新しいファイル形式で、後述するGIF形式に対して多くの機能をサポートしたため、Webブラウザやグラフィックソフトでのサポートが進み、インターネットを中心に普及した背景があります。

    そのため、古いPCやブラウザ(IE6など)、携帯電話ではPNGに対応していない場合もあるため、画像データが表示されないことがあるのが問題です。

    PNGの扱い方

    イラストやロゴなどの保存はJPEGだと圧縮ノイズが目立ってしまうので、PNGのほうが適しています。また、ファイルサイズもかなり小さくなるので、これらの制作にはPNGのファイル形式が有効でしょう。

    また、加工を繰り返す画像はJPEGだと劣化が進んでしまうため、PNGでの保存が望ましいです。

    GIFファイル形式の基礎

    そもそもGIFとは

    GIF(Graphics Interchange Format)とはインターネット回線の帯域がまだ現在ほど大きくなかった時代に、容量をできるだけ減らし、かつWebページによる表示もできるように開発された画像フォーマットです。読み方は「ジフ」です。

    一時期使用に特許料が要求されたために使用が激減しましたが、このときにPNGが開発された経緯があります。

    知っておきたいGIFの特徴

    現在はアニメーションとしての認知度が高いGIFには、以下の3つの特徴があります。

    1. データ容量が小さい

    独自の圧縮アルゴリズム『LZW』を使っており、そして色数が256色までなので、データ容量が非常に小さくなります。また、Webページとの親和性を高くする設計のため、インターネット経由の画像表示も負荷が少なくなっています。『LZW』はPNGと同じランレングス圧縮をさらに効率化した圧縮方法です。

    2. 透過処理ができる

    一部のGIF形式は透過をサポートしているため、画像の一部またはすべてを透明にすることができます。ただし、PNGと異なり「完全な透過」「不透明」の2段階のみサポートしています(半透明は扱えません)。また、透過色の指定は1つのみです。

    3. アニメーションを作ることができる

    1つのGIFファイルに複数の画像を入れることで、パラパラ漫画の原理を使って動画のように見せることができます。ただし、色数は256色までですから、本格的なアニメーションとしては機能しません。

    GIFの扱い方

    色数に制限があるので、風景写真など多彩な色を使う場面では再現性が乏しくなるでしょう。代わりに単色が多いロゴや簡単なイラストでは、JPEG特有のノイズが少なくなり線の境界(輪郭)もキレイに作ることができます。データ容量も少ないため、Webサイトでよく使用されるボタンなどはGIF画像で作るとデータが軽くなります。

    よくある質問

    最後に、ここまでの内容を質問形式でおさらいしていきましょう。

    JPEGとはどんなもの?

    JPEGとは、簡単にいうとファイル形式の一種で、写真などのデータを保存するのに向いています。読み方は「ジェイペグ」です。

    JPEGとPNGはどちらがいい?

    JPEGは写真やグラデーションのような色調が緩やかな画像保存におすすめ。PNGはイラストやテキストなど、色の境がはっきりとするもの、または透明な部分をそのまま保存したいときにおすすめです。

    まとめ

    JPEG・PNG・GIFにはそれぞれメリットとデメリットがあって、扱う素材によって向き不向きがあります。

    簡単にまとめると、「写真はJPEG形式、イラストはGIF/PNG形式」と知っていれば、もう画像が汚くなって困ることはありません! デザイナーさんにも怒られない!

    それではまた。

     

    「ググってわからないこと」が一瞬で解決するかも?

    Webの知識を効率的に学びたい未経験からWeb業界への転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役クリエイターがマンツーマンで指導します!

    ▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
    デジタルハリウッドSTUDIO by LIG

    \キャリアアップ/
    デジタルハリウッドSTUDIO by LIGでWebクリエイターを目指す!」

    この記事のシェア数

    280

    emi
    emi 外部ライター 東京 / たにぐち えみ

    Javaのプログラマーから転職して、 現在はウェブのディレクターとして勤務中。 宇宙と数学と地下を愛する猫好きです。