• コーディング ファクトリーHOME
  • Coding Methodology
  • 第116回 Data URI schemeを利用して、Webサイトの高速化を図ろう

コーディングメソドロジー

第116回 Data URI schemeを利用して、Webサイトの高速化を図ろう

近年、Webブラウザの進化や、それに伴うフロントエンドエンジニアの台頭で、クライアントサイドでもWebサイトの高速化や、ページ全体のパフォーマンスに対する意識が高まっています。サーバーにリソースをただ配置するだけではなく、様々なアプローチでパフォーマンスを工夫する事が必要です。その中の一つにHTTPリクエストを低減する事が、Webサイトのパフォーマンス向上のひとつの手段となっています。今回は、その具体的な方法として、画像データをHTMLやCSSファイル上のインラインデータとして埋め込む「Data URI scheme」をご紹介します。

図① 図② base64 形式で埋め込むため、実際には数百文字以上の文字量があります

■ Data URI schemeとは

画像データなど、本来サーバーに配置するような別データを、HTMLやCSSファイルにインラインとして埋め込む方法です。
図①のように、一般的に画像をWebサイトで表示する際は、HTMLのほかに、pngなどの画像ファイルをサーバーに置く必要があります。
Data URI schemeを利用すると、図②のようにインラインデータの形式でコードだけをHTMLファイルに埋め込む事で、画像の表示が可能になります。
結果、画像ファイルをDataURI schemeに置き換えた分、サーバーへのリクエスト数を減らす事ができます。
画像ファイルなどをbase64へ変換するには、javascriptなどのプログラミング言語での変換が必要ですが、Web上で変換できるツールもあるので、興味がある方は検索してみてください

■ Data URI schemeの使いどころ

Data URI schemeを利用することで、考えられるメリットとデメリットは次のとおりです。

メリット
  • インラインデータとして、HTMLやCSSファイルに埋め込む為、HTTPリクエストを低減できる
  • 同一ページで複数箇所使用する際、その箇所の数だけ、HTTPリクエストを低減できる
  • HTTPの同時接続数を減らす事ができるので、ページ全体の高速化が期待ができる
デメリット
  • その画像ファイル自体の容量が増加する
  • 画像データをインラインデータで記述するので埋め込んだ先のファイル容量も増加する
  • インラインデータをCSSに埋め込み過ぎると、レンダリングブロックの要因になりえる

上記の内容を踏まえると、使いまわせて変更自体が少ない画像(SNSのアイコンや矢印など)や、画素数が少ない画像(シンプルな企業ロゴや文字を画像にする場合)には、Data URI schemeの使用に向いているといえます。

■ gzipとの併用でデメリットをカバー

gzipとは、ファイル圧縮方法のひとつです。実際に、10数個のアイコン画像を共通cssファイルのbackground-imageとして扱った際、サーバー側で設定した、gzip圧縮と併用することで、ファイルサイズを圧縮、デメリット部分を低減し、結果的に大幅なページの高速化を実現できました。

運用しているサイトの状況にもよりますが、メリット、デメリットを踏まえて、サイト高速化の一つの手段として取り入れてみてはいかかでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム