Webデザインを学んでいる皆さん、画像はどの形式で保存していますか。画像には保存形式がたくさんある分、どの形式で保存したらよいのか迷ってしまうことはありませんか。
実は画像の種類によって、適しているデータ形式はそれぞれ違います。データ形式を適当に捉えていると、ストレージの容量を圧迫してしまったり、画像の質が落ちてしまったりするかもしれません。
この記事では、Webデザインで扱うことの多い画像データの形式4種類について説明していきます。
目次
Webデザインで扱う画像形式は大きく2つに分けられる
webデザインで取扱う画像データは、大きく2つに分けることができます。
１つは「ビットマップデータ形式（ラスターデータ）」、もう1つは「ベクターデータ形式（ベクトルデータ）」です。
細かい画像の種類について見ていく前に、この2種類のデータ形式について知っておきましょう。
ビットマップデータ形式（ラスターデータ）とは？
ビットマップデータ形式の画像は、ピクセルと呼ばれる小さな四角いマス目で構成されています。
ドット絵を思い出してみてください。
色の付いた細かい四角いマスを細かく配置することで、様々な図形や色を表現できています。
ビットマップデータ形式もこれと同じです。
1マスごとに別の色を付けることができるため、写真のような細かい色彩や、グラデーションのような複雑な色合いの画像を作成することができるのです。
写真画像は基本的にこのビットマップデータ形式として取扱います。
一方、ビットマップデータ形式の元は四角形なので、拡大するとその粗が目立つようになります。
パソコン上の画像は編集中に何度も拡大したり、縮小したりを繰り返すことがあります。
ビットマップデータはこのような編集作業を行っている最中に画像が荒れてしまい、品質が悪くなることがあるのです。
また、取扱う四角いマス目（ピクセル）が増えるとデータが重くなるデメリットもあります。
なお、Photoshopで扱う画像はこのビットマップデータ形式が中心になります。
⇒【フォトショップクリエイター能力認定試験問題集】Photoshopの実力を証明する資格。
ベクターデータ形式（ベクトルデータ）とは？
ベクターデータ形式の画像は、点の座標や線の数値データをもとにして描かれます。
数値データをもとにコンピューターが形を計算し、画面上に画像を表現します。
ベクターデータの元は、ビットマップデータのような四角い図形ではなく、数値データなのです。
そのため、どれだけ拡大や縮小を繰り返しても画像が荒れることはありません。
拡大、縮小をするたびにコンピューターがデータを計算し、画像を再表現するからです。
そんなベクターデータ形式の弱点は、複雑な画像に弱いことです。
数値データから作られているため、写真のようなたくさんの色が使われている画像の表現は苦手です。
ベクターデータは、シンプルな色と線で構成されているロゴデザイン向きの画像形式です。
なお、Illustratorが扱う画像は、このベクターデータ形式が中心になります。
⇒Illustratorクリエイター能力認定試験（イラストレーターの資格）を独学で突破だ！
ラスタライズってなに？
Photoshopではビットマップデータだけでなく、ベクターデータも取り扱えます（同じようにIllustratorでもベクターデータだけでなくビットマップデータも扱えます）。
たとえば、Photoshopにおいてテキストレイヤーなどはベクターデータとして取り扱われています。
Photoshop内にはビットマップデータ形式のレイヤーと、ベクターデータ形式のレイヤーが混在している状態です。
しかし、ベクターデータで表現されているレイヤーは消しゴム機能など一部の機能が使えません。
そこで、ベクターデータをビットマップデータ（ラスターデータ）に変換する処理を行います。これをラスタライズと言います。
ラスタライズを行うとコンピューターの画像を読み込む負担が軽減され、データが軽くなるというメリットがあります。
⇒Webデザインを左右する写真・イラスト素材はどこで手に入れる？
Webデザインで扱う画像形式4種類
ビットマップデータとベクターデータについて分かったところで、もう少し細かい画像形式を見てみましょう。
ここでは、Webデザインで主に使われる画像形式4種類について取り上げます。
４種類の画像形式
ビットマップデータ
ビットマップデータに属する画像形式には、次の3つがあります。
JPEG(ジェイペグ)
1677万色を表現できる画像形式で、たくさんの色を使っている写真等の保存に向いています。
JPEGは人間が知覚できないような色の違いをカットして、情報量を削減しています。そのため、比較的データを軽くすることができます。
一方画像の圧縮に非可逆圧縮という方法を使っているため、一度圧縮したデータを元に戻すことは不可能です。また、背景を透過することはできません。
拡張子は、.jpgもしくは .jpegです。
GIF（ジフ）
背景を透過することができる上、データも軽い画像形式です。
ただし、GIFの場合は256色までしか色を表現できないので、こまやかな色彩の画像には向きません。
そのためロゴやアイコン、ボタンパーツなど、シンプルな色合いの画像を保存するのに向いています。
また1つのGIFファイルに複数の画像を保存することで、パラパラ漫画のような簡単なアニメーション製作ができます。
JPEGと違い可逆圧縮形式を取るため、圧縮した画像を元の品質に戻すことができます。
拡張子は.gifです。
PNG（ピング）
PNGは比較的新しい画像形式です。
JPEG同様に1670万色を表現可能なPNG-2と、GIFと同じように256色で画像を表現するPNG-8の2種類があります。
JPEGとGIFの特徴を合わせ持っている画像形式といえます。
他にPNGは背景を透過することができたり、可逆圧縮で圧縮した画像をもとの品質に戻せたりとメリットがたくさんあります。
一方デメリットとしては、ファイルサイズが重くなることがあげられます。
拡張子は.pngです。
ベクターデータ
ベクターデータに属する画像形式には、SVGがあります。
4.SVG（エスブイジー）
拡大をしても画像が劣化しないベクターデータ形式で、アニメーションを設定することもできます。
SVGは画像ファイルでありながら、中身はコードの集まりです。
そのため画像編集ソフトをわざわざ開かなくても、テキストエディタで（CSSやJavascriptを使って）色等の設定を変えることができます。
基本的にはとても軽いデータ形式ですが、複雑な画像をSVGで表現しようとすると逆にサイズが大きくなってしまいます。
そのため、ロゴ、アイコン、図形などの単純なパーツを表現するときに使うと良いでしょう。
拡張子は.svgです。
⇒SVGアニメーション入門。イラスト制作ソフトで作ったアイコンをプログラミングで動かしてみよう
用途別にみる画像形式
写真を保存する
写真にはたくさんの色が使われています。そのため写真を保存するときは、1670万色が表現できるJPEGかPNG形式での保存が望ましいです。
基本的にはJPEGの方がファイルが軽くなりますが、圧縮を繰り返すと画質が下がってしまうので注意です。また色味の少ない写真の場合、PNGの方がファイルが軽くなることがあります。
ロゴやアイコンを保存する
ロゴやアイコンといった単純な画像を保存するには、GIFもしくはSVG形式での保存が向いています。最近はGIFより、SVG形式の方が人気です。
その理由の1つは、SVGがベクターデータ形式であること。高解像度のディスプレイが増えてきた現代では、どんなサイズでも綺麗に画像を表示できるベクターデータのロゴやアイコンは使い勝手が良いのです。
また、CSSやJavascriptで色や形を変えたり、アニメーション表現を付けることもできるので、表現の幅が広がるというメリットもあります。
印刷物に使う画像を保存する
チラシやパンフレットなど、印刷物に使う画像を保存するときはPNG形式が向いています。
非可逆圧縮で画質が低下しやすいJPEGを使うと、思わぬ場面で画像があれてしまう可能性があるからです。
