cmsでWebサイトを制作するにあたって事前にフロントエンドの開発環境が用意されているdevelopテーマというテンプレートを活用しています。そのテーマではwebpackやESLintなどの各種ツールの設定が最初から設定されていて、それらの設定がわからなくても最適化された状態で開発をすすめることができます。その一方で、それらの設定がわからなくても良いということは、いつまでたっても自分で設定ができないということです。今回はそんな設定の中でもwebpackによって設定されているインライン画像について自分なりに調べたのでまとめていこうと思います。インライン画像とはインライン画像とは、画像をBase64で変換して埋め込むことです。Base64として埋め込むことで、HTTPリクエストがなくなりWebサイトを高速化できるといったメリットがあります。通常、10個の画像を読み込むと10回のHTTPリクエストが発生するわけですが、画像をBase64に変換して埋め込むことで10回分のHTTPリクエストを削減することができます。画像をBase64に変換することのデメリットとして、データサイズが約37%増加するといったデメリットはありますので、全ての画像に有効ではありませんが、データサイズの小さいアイコンなどの画像には有効な施策になります。インライン画像の実装方法インライン画像の実装方法は色々あるのですが、今回はwebpackの機能を使用して実装してみたいと思います。用意しまして、以下の記述を追加します。以下の画像はbase64のテキストデータに変換され、8kbよりデータサイズが大きい画像はバンドルせず、外部ファイルとして出力します。指定したときの動作を自動選択してよしなにバンドルしてくれます。動作を説明しておきます。Base64に変換して出力できるようになります。使って実装していた処理で、画像をバンドルせずに外部ファイルとして出力できます。指定するときの注意点としては、デフォルトの設定だと出力された画像のファイル名がハッシュ値になってしまう点です。設定も記述しておくことをおすすめします。ブラウザで確認してみる先ほどで設定フィアルの書き方は説明したので、画像がBase64に変換できているかを実際にブラウザで確認してみます。上記の画像をみると、実際に画像がBase64に変換されているのがわかるかと思います。Base64化されているので、タイミングタブを確認すると、HTTPリクエストが発生していないのがわかります。利用して、画像をインライン化する方法を紹介しました。小さなアイコンなどの画像には有効な施策なのでぜひご自身のサイトに取り入れてみると、Webサイトの高速化に一役買ってくれるかと思います。覚書sass-migratorを活用して、node-sassをdart-sassへらく...一覧へ関連記事この記事のハッシュタグに関連する記事が見つかりませんでした。https://ui.appleple.blog/。