はじめに
こんにちは、クラスメソッド株式会社でWebを担当している野中です。前回はWebサイトの高速化を行うにあたり知っておきたい「HTTPの仕組み」について紹介しました。
HTTPの仕組みについて何となく理解できたでしょうか？ この連載で紹介していく高速化テクニックの解説を理解するために必要ですので、都合の良い時に読んでおいてください。
「いつ読むか？ 今でしょ！」なんてね（笑） もう古いですね。
対象者
この記事では、特にWebデザイナーを対象としています。
フロントエンドエンジニアの方はWebデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。
- Webデザイナー
- フロントエンドエンジニア
- Webディレクター
- Web担当者
ビギナーも含めた広い層に向けて解説しているので、当たり前と思われる説明も多く含まれます。また、各画像形式の仕様について深く解説はいたしません。あらかじめご了承ください。
※本記事に間違いや解説に分かりづらい部分があれば、@nonaka_ryuichiまでご連絡いただけるとうれしいです。
画像最適化の全体像
今回からWebサイトのレスポンスを改善するために、3回に渡って画像の最適化に必要な知識とテクニックについて紹介します。
画像最適化を行う上で改善できるポイントは3つあり、関連していくつかのテクニックがあります。ここでは全体像を把握しておきましょう。
-
ファイルサイズを抑える
- それぞれの画像形式について特性を知り、適切な画像形式を選択する
- ムダなメタデータの削除する
- 人の目には分からない程度に画質を調整し、ファイルサイズを抑える
-
リクエスト数の削減
- インラインイメージを利用する（HTML・CSS）
- CSS Spriteを利用する
- SVGでHTMLに埋め込む
- Webフォントアイコンを利用する
- イメージマップを利用する
- 画像を使わずCSS3で対応する
-
レンダリングの負荷軽減
- 実際の表示サイズと画像のサイズを合わせる
- 画像のサイズ（width,height）を指定する
解説の流れ
次の流れで画像最適化を解説します。
- 画像形式の基礎知識
- 最適な画像書き出しの基本
- 画像に関する高速化テクニック
それでは、画像最適化1回目「画像形式の基礎知識」について解説を始めます。
コンピューター上で利用できるグラフィック形式のお復習い
ほとんどの方がご存じかと思いますが、コンピューター上で利用できる代表的なグラフィック形式には、ラスター形式とベクター形式の2種類があります。
簡単にまとめると、ラスター形式は色付きタイルを縦横に並べた集まり、ベクター形式は点を数学的な計算によって得られる線でつないだ図形です。
ラスター形式は拡大すると荒くなりますが、処理がシンプルなのでコンピューターへの負荷が低いのが特徴です。ベクター形式はどれだけ拡大してもなめらかな線を維持することができますが、図形の計算が発生するので機器への負担となります。
本記事では3つのラスター形式GIF/JPEG/PNGと、ベクター形式SVGについて紹介します。それぞれの画像形式を理解しておくことで画像の切り出しを行う際に画質を維持しつつ、ファイルサイズをどのように落とすことができるか判断できるようになります。
それでは、それぞれの画像形式について詳しく見ていきましょう。
GIF（Graphics Interchange Format）
まずはアニメーションする画像としておなじみのGIF形式について紹介します。
現在一般的に利用されているGIFは、GIF89aというバージョンです。
| バージョン | GIF87 | GIF87a | GIF89a（現在利用されている） |
|---|---|---|---|
| 圧縮形式 | 可逆圧縮形式 | ||
| 圧縮技術 | LZW | ||
| データ形式 | ラスター形式 | ||
| 拡張子 | .gif | ||
| 一般的な色深度と色数 | 8bit（256色） | ||
| インデックス化 | 対応 | ||
| 透明色（Transparent） | 非対応 | 非対応 | 対応 |
| 透過処理（Alpha Channel） | 非対応 | ||
| 段階的表示 | 非対応 | 対応（インターレース） | 対応（インターレース） |
| アニメーション | 非対応 | 非対応 | 対応 |
GIFの特徴
GIFは色数が256色に限定されており、写真のような色数の多い画像には向きません。
GIFの大きな利点は透明色（Transparent）を指定できることです。これはCSSの背景色や背景画像と合わせて利用することでJPEGではできない表現を可能にします。ですが、最近はPNGを利用することが多いかもしれません。
補足
GIFは水平方向に連続する同じ色を圧縮します。つまり、横方向のストライプは圧縮率が高く、縦方向のストライプは圧縮率が低くなります。
蛇足ですが、圧縮技術のLZWは一時期特許で問題となりました。現在は失効しているので問題なく利用できます。
GIF形式が向いている用途
- べた塗りの多い画像（PNGと比較しましょう）
- アニメーション画像
