webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
最終更新日: Update!!
先日、クライアントワークで画像をBase64形式にエンコードして使うことがあり、それに合わせてwebpackの環境を準備したので備忘録として残しておきたいと思います。画像をBase64形式の文字列として扱うことで、HTTPのリクエストを減らすなどいくつかパフォーマンスの面でもメリットがみられますので、積極的に取り入れてみたいですね。
本記事ではwebpackの環境構築が整っている前提で進めています。詳しい環境構築については、下記の記事を合わせてご参考ください。TypeScriptやESlintの設定などは過去記事「webpackでESLintが使える環境を構築してみる」をご覧ください。
(参考記事)
webpackでTypeScriptの自動コンパイル環境を作成してみる
webpackでStylelintが使える環境を構築してみる
webpackで画像圧縮を自動化する環境を構築する
webpackでBrowserSyncを使った自動リロード機能を作成してみる
webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う
webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする
webpackでBabelを使ったJavaScriptトランスパイルの環境構築
では最初に今回のディレクトリ構成を見ていきます。ここでは下記のような構成をもとに進めています。ソースファイルが格納される「src」ディレクトリと、コンパイル後のファイルが格納される「dist」ディレクトリに分かれます。
これでCSS側で画像ファイルを読み込みます。今回はSassファイルをCSSにコンパイルする想定ですので、Sassファイルからの相対パスで対象の画像を指定します。
【src/scss/main.scss】
今回はwebpackで画像ファイルをバンドルしてBase64形式にエンコードしてCSSファイル内で扱う方法をまとめてみました。ウェブサイトに求められるパフォーマンスへの重要度は日々増してきている印象ですので、こういったテクニックを効果的に活用していきたいですね。
dist ┣ assets ┣ images ┣ stylesheets ┗ scripts ┗ index.html src ┣ img ┗ image.png ┣ scss ┗ main.scss ┗ ts ┗ main.ts node_modules .eslintrc.js .stylelintrc.json tsconfig.eslint.json tsconfig.json package.json webpack.config.js続いてwebpackの設定ファイルを用意していきます。webpackで画像をBase64形式にエンコードするには、画像アセットをJavaScriptで読み込む必要があります。そのため、webpack4系以前では「file-loader」や「url-loader」といった各種ローダーが必要になりますが、webpack5系以降であればそれらは不要でデフォルトの機能として用意されています。 その指定方法ですが、rulesのオプションで「type」を「asset」と指定するだけでOKというとてもシンプルなものになります。「test」で画像拡張子を指定することで、画像ファイルをバンドル対象のリソースとして扱うことができます。そして「output」のオプションで、バンドル対象の画像を外部ファイルとして扱う場合の出力先を相対パス指定で記述します。この際に、デフォルトでファイル名がハッシュ値となってしまうので、元のファイル名が保持されるように以下のように指定すると良いですね。 【webpack.config.js】※一部省略
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const StylelintPlugin = require('stylelint-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); ..... const directoryPath = { root: path.resolve(__dirname, ''), dist: path.resolve(__dirname, 'dist'), src: path.resolve(__dirname, 'src') } module.exports = { mode: 'development', devtool: 'source-map', entry: { main: `${directoryPath.src}/ts/main.ts`, }, output: { path: `${directoryPath.dist}/assets`, filename: 'scripts/[name].min.js', assetModuleFilename: 'images/[name][ext][query]' }, module: { rules: [ ....... { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { url: true, } } ] }, { test: /\.(sass|scss)$/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { url: true, sourceMap: true, importLoaders: 2 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'autoprefixer', { grid: true } ], [ 'cssnano', { preset: 'default' } ] ] }, } }, { loader: 'sass-loader', options: { sourceMap: true } } ] }, { test: /\.(gif|png|jpg|jpeg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 50 * 1024, }, }, }, ] }, resolve: { extensions: [ '.ts', '.js', '.json' ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'stylesheets/main.min.css' }), new StylelintPlugin({ configFile: `${directoryPath.root}/.stylelintrc.json` }), new CopyPlugin({ patterns: [ { from: `${directoryPath.src}/img`, to: `${directoryPath.dist}/assets/images/_min/[name]_min[ext]` } ] }), ....... ], target: [ 'web', 'es5' ], performance: { maxEntrypointSize: 512000, maxAssetSize: 512000 } }そのほか注意しておきたい点として、今回はCSS側で画像リソースをBase64に置き換える形になりますので、「css-loader」のオプションで、「url」の値をtrueにしておくことが重要です。これがfalseになると、JavaScript側で画像リソースを参照できなくなるため、必須となる指定です。そして、parserのオプションである「dataUrlCondition」では、Base64にエンコードする対象画像のファイルサイズの上限を設定することができます。Base64エンコードをするとファイルサイズが上がってしまうので、あまり大きな画像を変換してしまうとCSSファイルが肥大してしまうので、このように上限を設定し、上限を超えるものはエンコードせずに外部ファイルとして扱われるようにすると良いですね。 また、「type」の値については下記のオプションが用意されており、目的に応じて使い分けるようにします。
asset/resource | バンドル対象のファイルを外部ファイルとして扱う |
---|---|
asset/inline | バンドル対象のファイルをBase64エンコードしてコード内に直接埋め込む |
asset | asset/resourceの指定とasset/inlineの指定が閾値に合わせて自動で切り替わるようになる |
.example { width: 100%; height: 100vh; background: url(../img/image.png) no-repeat center center/cover; }先ほどのSassファイルをJavaScript側でインポートして、CSSファイルにコンパイルしていきます 【src/ts/main.ts】
import '../scss/main.scss';コンパイルされたCSSを見ると、URLパスで外部ファイルを参照している形ではなく、Base64形式にエンコードされて直接CSSのコード内に埋め込まれているのが確認できます。 【dist/assets/stylesheets/main.min.css】
.example{background:url(data:image/png;base64,iVBORw0KG....rkJggg==) no-repeat center center/cover;
今回はwebpackで画像ファイルをバンドルしてBase64形式にエンコードしてCSSファイル内で扱う方法をまとめてみました。ウェブサイトに求められるパフォーマンスへの重要度は日々増してきている印象ですので、こういったテクニックを効果的に活用していきたいですね。
sponserd
keyword search
recent posts
- レスポンシブ対応のインラインSVGを作成する
レスポンシブ対応のインラインSVGを作成する
- webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
- メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
- Vue.jsでStripe決済処理用のコンポーネントを作成する
Vue.jsでStripe決済処理用のコンポーネントを作成する
- GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
- JavaScriptで再帰関数を使ってネストした配列の深さを調べる
JavaScriptで再帰関数を使ってネストした配列の深さを調べる
- MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
- GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
categories