SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

これから身につけるWebサイト高速化テクニック

HTTPリクエスト数削減テクニック1: インラインイメージ編

これから身につけるWebサイト高速化テクニック(5)


  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて、Webサイト高速化に関する手法や技術について解説していきます。今回は、インラインイメージの基礎について紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 こんにちは、クラスメソッド株式会社の野中です。

 前回の『Webサイト高速化に必要な画像形式の基礎知識』では、基本的な画像の書き出し方法について紹介しました。

 この回からは数回に分けて、HTTPリクエストの削減テクニックについて触れていきます。

  1. インラインイメージ
  2. CSS Spriteとイメージマップ
  3. SVGとWebフォントアイコン
  4. 画像から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 schemedata:から始まります。

 サンプルコードを見てみましょう。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文字ずつに置き換えます。受け取った側でデコードすることによりバイナリデータに戻され表示されます。

次のページ
インラインイメージの使い方

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
これから身につけるWebサイト高速化テクニック連載記事一覧

もっと読む

この記事の著者

野中 龍一(クラスメソッド株式会社)(ノナカ リュウイチ(クラスメソッドカブシキガイシャ))

クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。http://dev.classmethod.jp/author/nonaka-ryuichi/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7303 2013/10/10 12:05

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング