インライン画像でWebサイトを高速化しよう

自分は普段、a-blog cmsでWebサイトを制作するにあたって事前にフロントエンドの開発環境が用意されているdevelopテーマというテンプレートを活用しています。そのテーマではwebpackやESLintなどの各種ツールの設定が最初から設定されていて、それらの設定がわからなくても最適化された状態で開発をすすめることができます。その一方で、それらの設定がわからなくても良いということは、いつまでたっても自分で設定ができないということです。今回はそんな設定の中でもwebpackによって設定されているインライン画像について自分なりに調べたのでまとめていこうと思います。

インライン画像とは

インライン画像とは、画像をBase64で変換して埋め込むことです。Base64として埋め込むことで、HTTPリクエストがなくなりWebサイトを高速化できるといったメリットがあります。

例えば、通常、10個の画像を読み込むと10回のHTTPリクエストが発生するわけですが、画像をBase64に変換して埋め込むことで10回分のHTTPリクエストを削減することができます。画像をBase64に変換することのデメリットとして、データサイズが約37％増加するといったデメリットはありますので、全ての画像に有効ではありませんが、データサイズの小さいアイコンなどの画像には有効な施策になります。

インライン画像の実装方法

インライン画像の実装方法は色々あるのですが、今回はwebpackの機能を使用して実装してみたいと思います。

まず、webpack.config.js を用意しまして、以下の記述を追加します。

// webpack.config.js

module.exports = {
  output: {
    ...
    assetModuleFilename: 'assets/[name][ext]',
  },
  module: {
    rules: [
      ...
      {
        test: /\.(jpg|png|svg|woff|woff2|eot|ttf)(\?.*$|$)/,
        type: 'asset',
      },
    ],
  },
};

設定ファイルの rules の中にオブジェクトを作って、 type に 'asset' を記述します。そうすることで 8kb 以下の画像はbase64のテキストデータに変換され、8kbよりデータサイズが大きい画像はバンドルせず、外部ファイルとして出力します。

type に 'asset' を指定すると、webpackが type に 'asset/inline' を指定したときの動作と type に 'asset/resource' を指定したときの動作を自動選択してよしなにバンドルしてくれます。簡単に 'asset/inline' と 'asset/resource' の動作を説明しておきます。

'asset/inline' は、webpack4以下では url-loader を使って実装していた処理で、画像を Base64に変換して出力できるようになります。また、 'asset/resource' は、webpack4以下では file-loader を使って実装していた処理で、画像をバンドルせずに外部ファイルとして出力できます。'asset/resource' を指定するときの注意点としては、デフォルトの設定だと出力された画像のファイル名がハッシュ値になってしまう点です。output.assetModuleFilename で出力ファイル名を設定できるため、'asset/resource' を指定する際は、output.assetModuleFilename の設定も記述しておくことをおすすめします。

ブラウザで確認してみる

先ほどで設定フィアルの書き方は説明したので、画像がBase64に変換できているかを実際にブラウザで確認してみます。

上記の画像をみると、実際に画像がBase64に変換されているのがわかるかと思います。Base64化されているので、タイミングタブを確認すると、HTTPリクエストが発生していないのがわかります。

まとめ

今回は webpack を利用して、画像をインライン化する方法を紹介しました。小さなアイコンなどの画像には有効な施策なのでぜひご自身のサイトに取り入れてみると、Webサイトの高速化に一役買ってくれるかと思います。