今更聞けないWebデザイナーの基礎知識①　【画像形式】

皆さんは普段デジカメで撮った写真をパソコンで取り込む際、どのファイル形式を選択して保存しているでしょうか。

またフォトショップなどのグラフィックソフトで加工した写真を書き出すのに、画像や用途によってファイル形式を選んだほうがいいのをご存知でしょうか。

Webブラウザで使用されるJPEG、GIF、PNGなどのファイル形式は、それぞれに特徴があり、画像の種類や使われる用途によって使い分ける必要があります。

Webデザイナーには特に必須とされる知識ですが、なんとなく基本的すぎる気がして詳しくは聞けないでそのまま・・なんて人も中に入るかもしれません。

そんな人のために、今回はJPEG、GIF、PNGそれぞれに関する基本的な特徴とどのような場面で使うかを解説していきたいと思います。

今回の目次

それぞれの画像圧縮形式の特徴

JPEGとは、静止画像データの圧縮形式の一つで、24ビット（1670万色）まで扱うことができます。

このため、写真などたくさんの色数が必要な画像の保存に向いています。

しかし、JPEGは不可逆圧縮であるため、画像を加工して保存を繰り返すたびに画質が悪くなってしまいます。不可逆圧縮とは、圧縮して省略されたデータを、二度と元には戻せない仕様のことです。

特に、フォトショップなどでJPEGの画像を開き、「上書き保存」や「別名で保存」をするだけでも圧縮されてしまい、画質が悪くなってしまうので注意が必要です。２、３回の圧縮で目に見える劣化があるわけではありませんが、グラフィックソフトで低圧縮率に設定変更するなどの工夫は必要でしょう。

現在は主にアニメーションに使われることの多いGIFですが、もともとは昔ネット回線の帯域が狭かった時代に、容量が小さく、なおかつWeb上で閲覧できるように作られた画像形式です。

扱える色数が８ビット（256色）までと少ないので、色数をそんなに必要としないアニメーション、ロゴ、アイコンなどの使用に適しています。

GIFは、画像に使われている一色を透過処理することができ、本当は四角形の背景の色を透明にして、四角形でない画像に見せかけることが可能です。

GIFで動画を作る仕組みについてですが、1つのファイルに複数のGIF画像を入れることで、まるで連続した動画のように見せているのです。

PNGは、一時期GIFの特許取得者から特許使用料を払わなければならない時期があって、そのかわりとして開発された新しい画像圧縮形式です。

扱える色数を８ビットと24ビットに選択でき、画像の種類を問いません。

それに、複数の色を透明にでき、設定をすることによって半透明にすることもできます。

また、JPEGと違って可逆圧縮なので、圧縮によって失われたデータを復元することができます。

弱点と言えるところは、フルカラーだとJPEGより容量が大きなってしまったり、GIFのようにアニメーションを作ることもできないことです。

いかがでしたか？現段階では最新のPNG形式がメリットが多いので、使用頻度は高くなりそうですがPNGも万能ではありません。

特に加工する予定のない写真画像であればJPEGで保存したほうがいいでしょうし、簡易なアニメーションを作りたい場合はGIFを使うしかありません。

一つずつ基礎を固めていって、Webデザイナーとしてステップアップしていきましょう！