SVG（Scalable Vector Graphics）
最後にベクター形式のSVGについて紹介します。SVGは2001年9月4日にSVG 1.0が W3Cから勧告されました。後にHTML5に関連してSVGの注目度が高まり、現在ですべてのモダンブラウザが対応しています。
ちなみにInternet Explorerではバージョン9から対応しています。
SVGの特徴
SVGはXMLで記述されたベクターデータです。拡大・縮小しても劣化がないというラスターにはない利点があり、さらにレイヤー機能を持つのが特徴です。
ラスター形式と違い、ピクセルごとにデータを持たずアンカーポイントを基準にオブジェクトの形が計算され描画されます。そのため、どれだけ大きく引き延ばしてもファイルサイズは変わりません。ただし、何層ものレイヤーと複雑なオブジェクトで作られたSVGの場合はファイルサイズが肥大化してしまうこともあるので注意しましょう。
SVGのソースコード
SVGがどのようなXMLでできているのか、SVGファイルをテキストエディタで開いて確認してみましょう。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="595.28px" height="603.529px" viewBox="0 0 595.28 603.529" enable-background="new 0 0 595.28 603.529"
xml:space="preserve">
<rect x="211.411" y="252.941" fill="#8FC31F" width="287.06" height="287.059"/>
<polygon fill="#E83828" points="163.867,309.309 306.329,62.558 448.791,309.309 "/>
<circle fill="#036EB8" cx="197.293" cy="366.47" r="142.941"/>
</svg>
<rect /> <polygon /> <circle />とオブジェクトが定義されていることがわかります。これらのオブジェクトはJavaScriptから操作できます。
ちなみに、SVGはIllustratorを使うことで簡単に書き出すことができます。
拡大縮小に強いSVG
ラスター形式とSVGの違いは、拡大してみるとよく分かります。ラスター形式は拡大すると荒れてしまいますが、SVGは拡大しても滑らかです。
SVGが向いている用途
- JavaScriptで動的に変化するグラフ
- 複数のサイズでアイコンを用意しなければならない場合
画像別の対応ブラウザ
上記で紹介した画像形式について、ブラウザ対応表を作ってみました。バージョン表記のないものは特に問題にならないので最新のバージョンを指します。
| 形式 | Chrome | Firefox | Safari | Mobile Safari | Android | IE | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| バージョン | iOS6 | iOS5 | iOS4 | 4.0 | 3.0 | 2.0 | 10 | 9 | 8 | 7 | 6 | |||
| GIF | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| JPEG | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| PNG 8 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| PNG 24 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| PNG 32 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
| SVG | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ | × | ○ | ○ | × | × | × |
その他の画像形式
上記で紹介したもの以外にも、さまざまな画像形式があります。普及には至っていませんが、Googleが開発しているWebPという形式があり、今後利用する機会が訪れるかもしれません。
WebP
WebP（ウェッピー）はGoogleが開発している画像フォーマットです。JPEGやPNGに比べ圧縮率が高く、可逆圧縮・非可逆圧縮のどちらにも対応しています。
残念ながら、今のところGoogle ChromeとAndroidでしか利用できないので、実用には向きません。
その他
その他にも多くの画像形式があります。気が向いた時に調べてみてはいかがでしょうか？
- TIFF（Tagged Image File Format）
- Windows bitmap（Microsoft Windows Bitmap Image）
- RAW（Raw image format）
- PostScript
- PICT（QuickDraw Picture）
色深度とファイルサイズの関係
最後に画像の色深度とファイルサイズが、どのように関係するかについて触れておきます。
色深度（いろしんど）とは、ピクセルごとのビット数を表します。色深度が上がれば1ピクセルごとのビット数も増えるので、見た目は同じでもファイルサイズが増えます。
例をみてみましょう。
PNG-8/24/32の場合
100×100pxの画像をそれぞれ書き出してファイルサイズを比較してみます。
| カラータイプ | サンプル | マット（カラー） | ファイルサイズ |
|---|---|---|---|
| PNG-8 |
|
有り（#ffffff） | 212Byte |
| PNG-24 |
|
有り（#ffffff） | 422Byte |
| PNG-32 |
|
有り（#ffffff） | 444Byte |
同じ見た目のPNGでも、色深度が違うだけでファイルサイズが大きく違います。
1ピクセルごとのビット数が増えるわけですから、画像サイズが大きいほど色深度の差によるファイルサイズの違いも大きくなります。
色深度のことをよく考えて書き出しを行いましょう。
まとめ
今さらな情報も多々ありますが、意外と知らなかったことが多いのではないでしょうか？ 自分でまとめていても勉強になることがありました。
今回のポイントをWebデザイナーの視点でまとめます。画像形式やカラータイプによって画像の向き不向きがあります。適切な画像形式を選択し、色深度を画像のタイプに合わせて調節することで、ファイルサイズを抑えることが可能です。それぞれの画像形式の特性を理解し、画像の品質を保ちながらファイルサイズを抑えるテクニックを身につけましょう。
次回は本記事で学んだ画像形式の基礎知識を使い、Photoshopを使った最適な画像書き出しの基本について解説します。
用語解説
- 可逆圧縮形式：元のデータにビット単位で完全に復元できる形式
- 非可逆圧縮形式：元のデータに近い状態に復元できる形式
- アルファチャネル：一般的に不透明度を表す
- 段階的表示：GIFやPNGのインターレースは画像を一定の区切りで飛び飛びに転送し段階的に表示する。また、JPEGのプログレッシブはDCTの低域から転送し低解像度から徐々に高解像度にしていくこと
- インデックス化：画像内の色やアルファをインデックス配列で管理し画像を表現する
本連載は下記記事の増補改訂版です。
