ビットマップ形式とベクター形式

ビットマップとベクター形式の違い

平成30年度 第1回のウェブデザイン技能検定3級から、画像の形式に関する問題を解説していく。形式ごとに特徴があるので、今後、仕事やSNSなどで適切な形式の画像を選べるように、この問題を一緒に解きながら確認していこう。

第24問
ビットマップデータでないファイル形式はどれか。以下より1つ選択しなさい。

  1. PNG
  2. JPEG
  3. SVG
  4. BMP

※ 平成30年度 第1回のウェブデザイン技能検定3級 学科試験より引用

ビットマップデータ(形式)とは

問題文に「ビットマップデータ~」とあるので、まずはここを説明しておく。ビットマップをひとことで言うと「色のついた点が集まった画像」だ。身近な例を挙げるとデジカメで撮った写真がビットマップの画像だ。デジカメのスペックに“600万画素“と書かれていたら、横に3,000個、縦に2,000個の点が碁盤の目のように並んだ画像を撮影できるということだ。(3,000×2,000=600万)

ビットマップ形式の画像

また、「ビットマップデータ」でも「ビットマップ画像」でも「ビットマップ形式」でも同じ意味となる。厳密にはもちろん異なる意味になるが、会話の流れに合わせて、データなのか、画像なのか、それとも形式の話しなのかを判断して、強調したい部分を組み合わせて使えばいい。他の画像形式との比較の話しをしているのであれば「ビットマップ形式で~」と話せば誰にでも通じる。ウェブサイト制作の現場では、単に「ビットマップ」と呼ぶことが多い。

ビットマップ形式の画像はいくつもあるが、共通する特徴は、加工がしやすく、データの容量は大きく(重く)なる傾向がある。拡大には弱く、拡大すると画像のギザギザが目立ってしまうため、原寸大か、縮小して加工する方が適している。ウェブデザイン技能検定の実技試験ではAdobe社のPhotoshopを使用して加工することになる。

ビットマップは別名、「ラスター形式」や「ラスター画像」とも呼ばれ、この後に説明する「ベクター形式」と比較する際には、「ラスター形式」を使った方が話をスムーズに進められるだろう。

ベクター形式とは…ビットマップと何が違う?

次にベクター形式の画像を見ていこう。先に説明したビットマップ形式(ラスター形式)の画像は、色の付いた点の集まりだと話した。今度のベクター形式は点のデータを持っていない。線のデータで構成された画像なのだ。

高校の数学で「ベクトル」を教わったことを覚えているだろか。向きと大きさを持つ量だ。ベクター形式はベクトルなのだ。「あっちを向いた長い線と、こっちを向いた短い線を組み合わせて三角形を書く」といった画像である。もちろん、曲線も書くことができる。

特徴としては、拡大・縮小に強いこと。ビットマップ形式のように点の集まりではないため、拡大しても点を認識することができず、滑らかな曲線を維持することが可能だ。ベクトルの数を抑えることで容量の小さい(軽い)画像に仕上げることもできる。

ただ、良いことばかりでもなく欠点もある。写真は一瞬で撮影することができるが、ベクター形式で写真並の画像を作ろうと思ったら大変な労力と時間を要してしまい、とても現実的ではない。色の置き換えは得意だが、曲線の変形は手間がかかるため苦手と言える。

Adobe社のIllustratorを使ってベクター形式の画像を作成することもできるが、ウェブデザイン技能検定の実技試験では時間を浪費してしまうため避けた方がいいだろう。ベクター形式は、簡単なイラストや、時間をかけてでもじっくりと仕上げたいロゴマークなどに向いている。

PNGとは

さて、前置きが長くなったが、ここからは個々の問題を見ていこう。PNGはPortable Network Graphicsの頭文字で、ビットマップ形式の画像だ。「ピング」と読み、拡張子は「.png」となる。インターネットでは容量が大きいとダウンロードに時間がかかるため、小さいデータの方が好ましい。その点、PNGは画像データを圧縮(軽量化)することができるため、ウェブサイトに使う画像として適している。

補足として、Photoshopでは256色まで使える「PNG-8」と、約1,677色まで使える「PNG-24」の二通りのPNGを使うことができる。PNG-8は色数の少ないイラストなどに向いており、容量を抑えられるためイラストの保存では本命となる形式だ。

また、PNG-24はPNG-8では難しい多彩な表現が可能だ。容量は大きくなってしまうが、グラデーションを含む会社のロゴではPNG-24を使った方がキレイなものに仕上がるだろう。写真のようにとても色数が多い画像の場合は、容量がとても大きくなってしまうため、写真には次に説明するJPEGが向いている。

JPEGとは

JPEGはJoint Photographic Experts Groupの頭文字だが、試験のために綴りを覚える必要はない。「ジェイペグ」と読み、拡張子は「.jpg」または「.jpeg」のどちらでも構わない。写真と相性の良い形式なので、デジカメやスマホで撮影した画像はJPEGで保存されている。

その理由は、約1,677色を表現でき、圧縮時の効果が高く、非常に軽量な画像にすることが可能だからだ。デジカメやスマホ内の限られたメモリーを圧迫することもなく、インターネット上での送受信も早い。

圧縮率を高め過ぎると、滲み(にじみ)のような模様がでてしまうため、圧縮率の調整には少し注意が必要だが、写真の保存形式としては非常に使い勝手が良い。

SVGとは

SVGはScalable Vector Graphicsの略で、名前にVectorが入っていることから分かるように、ベクター形式の画像だ。見た目通りに「エスブイジー」と読み、拡張子は「.svg」となる。圧縮には対応していないが、他の形式と同様にウェブサイトでも表示が可能だ。

SVGにはビットマップ(ラスター形式)の画像と異なり、リンクを埋め込んだり、JavaScriptと組み合わせてアニメーション化したり、テキストエディターで編集できたりと、使いこなせばオリジナリティの高いものができるようになる。高解像度のディスプレイでベクター形式の長所が活きるため、今後活躍が期待できる形式といえるだろう。

ただし、3級の試験ではSVGの細かな特徴まで問われることはないので、ベクター形式であるという点だけを抑えておけば十分だ。

BMPとは

BMPはBitmapを略して綴りを短くしたもので「ビットマップ」と読む。名前の通り、ビットマップ(ラスター形式)の画像だ。この形式のキーワードは「無圧縮」。この形式で保存すると、どうしても重い画像になってしまうため、ウェブサイトに使うことはない。

古い形式であるため汎用性があり、Windowsでは未だに使うことがあるが、Macユーザーには不要だろう。

解答

では、もう一度、問題文を振り返ってみよう。もう一瞬で解けるはずだ。

第24問
ビットマップデータでないファイル形式はどれか。以下より1つ選択しなさい。

  1. PNG
  2. JPEG
  3. SVG
  4. BMP

※ 平成30年度 第1回のウェブデザイン技能検定3級 学科試験より引用

ビットマップデータ(ビットマップ形式・ラスター形式)ではない形式というと、SVG(ラスター形式)のひとつだけ。SVGの“V”はVector(ベクター)のことだったはずだ。

イラスト向きのPNG、写真向きのJPEG、ベクター形式のSVG、無圧縮のBMP。はじめて画像の形式を学習する際はこれだけ抑えておけばいいだろう。

この問いの答えは、「3. SVG」で納得してもらえただろうか。