はじめに
こんにちは、クラスメソッド株式会社の野中です。
前回の『Webサイト高速化に必要な画像形式の基礎知識』では、基本的な画像の書き出し方法について紹介しました。
この回からは数回に分けて、HTTPリクエストの削減テクニックについて触れていきます。
- インラインイメージ
- CSS Spriteとイメージマップ
- SVGとWebフォントアイコン
- 画像からCSS3
本記事では「インラインイメージ」の基本的な知識と使い方、使いどころについて解説します。
対象者
今回の対象者は主にコーダー、フロントエンドエンジニアです。デザインとコーディングを合わせて担当するWebデザイナーも対象です。
- コーダー・フロントエンドエンジニア
- Webデザイナー
- Webディレクター
- Web担当者
インラインイメージとは
インラインイメージとは.gifや.pngなどをHTMLからリンクして読み込むのではなく、画像を文字列に変換してそのデータそのものをHTMLやCSSのソースコード内に埋め込んでしまうというテクニックのことです。インラインイメージはURI scheme（後述）の一つ「data URI scheme」を使うことで実現できます。
1. URI schemeって？
みなさんがよく利用しているhttp:やhttps:、mailto:などがURI schemeといわれるものです。これらはコロン”:”の後に続くリソースの場所を示した値に対し、どのような手段でアクセスするべきかを表しています。
2. インラインイメージの良いところ
イメージタグのsrc属性にリソースのURLを指定する読み込み方法（以降は「リンクによる読み込み」）と比べ、インラインイメージの利点はなんといってもHTTPリクエストを減らせるところです。
HTTPリクエストが多いほど回線の影響を受けたり、同時接続数の制限による待機時間によりレイテンシ（遅延時間）が増加してしまいます。
3. インラインイメージの悪いところ
インラインイメージは、エンコードにより元データと比べてデータサイズが37%増加するというデメリットがあります。
また、古いInternet Explorer（以降IEとします）には対応していないことと、比較的新しいIEでも制限があり注意が必要です。
また、実際に構築・運用する際にもこれらのデメリットがあります。
- HTMLやCSSに画像データを直接埋め込むため、画像の変更が発生するとデータの差し替えが必要になる（ツールを使うことで改善できる）
- リンクによる読み込みと違い、data URI schemeで埋め込まれたデータ自体はキャッシュされない
※ブラウザの対応については後述します。
data URI schemeとは
data URI schemeはdata:から始まります。
サンプルコードを見てみましょう。iVBORw…と続く部分が文字列になった画像データです。
<img src="data:image/png:base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAIAAAC..." />
1. data URI schemeの書式
data URI schemeの書式がどのような構造になっているのか、上記のサンプルコードを分解してみましょう。
| data: | image/png | ;base64 | ,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAIAAAC... |
|---|---|---|---|
| URI Scheme | コンテンツタイプ | エンコード方式 | データ |
URI Schemeの後に続くコンテンツタイプにはPNGの他にJPEGやGIF、SVGなども指定できます。
また、この他に「;charset=文字コード」という文字コードの指定も可能です。基本的には省いてしまって構いません。
2. 指定できる主なコンテンツタイプ
この画像のコンテンツタイプなんだっけ、という時のために頻繁に利用する主なコンテンツタイプを紹介しておきます。
| 画像形式 | コンテンツタイプ |
|---|---|
| PNG | image/png |
| JPEG | image/jpeg |
| GIF | image/gif |
| SVG | image/svg+xml |
この他のコンテンツタイプは、必要に応じて調べてみてください。
3. Base64とは
最後に、Base64について解説しておきます。
Base64とは、IETFによりRFC2397で定義されたデータを文字列に置き換えるエンコード方式のことです。
例えば、電子メールではバイナリデータを扱うことができません。このような環境でバイナリデータを扱うためにBase64は利用されています。
文字列への変換は対象となるデータを6bitずつに分割し、変換表を使って4文字ずつに置き換えます。受け取った側でデコードすることによりバイナリデータに戻され表示されます。
