とあるWEB会社のwebディレクターのemiです。

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

そこで今回は、WEBサイト制作に使える主な画像ファイル形式と、その特徴についてまとめます。

JPEGファイル形式の基礎

そもそもJPEGとは

JPEG（Joint Photographic Experts Group）とは静止画像データの圧縮方式の一種です。規格を制定した組織の略称が方式名として使用されています。

圧縮率が高く、フルカラー（約1,677万色）の画像を扱えるため、デジカメ写真の記録に使用されることが多いです。

知っておきたいJPEGの特徴

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

1. 拡張子がたくさんある

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

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

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

2.　上書き保存で画質が劣化する

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

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

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

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

JPEG圧縮で画像が劣化するしくみ

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

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

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

JPEGの扱い方

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

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

PNGファイル形式の基礎

そもそもPNGとは

PNG（Portable Network Graphics）とはWEBでビットマップ画像を扱うファイルフォーマットとして開発されました。

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

知っておきたい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/PNG/GIFファイル形式のまとめ

いかがでしたか？　写真などではあまり意識せずに保存することが多い画像データですが、WEB制作となるとそれぞれのメリット・デメリットを理解して使い分ける必要があります。また、画像の形式は上記3種類以外にもあるので、目的に応じて自分なりに試してみるのもいいかもしれません。

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

それではまた。