> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Asset modules

Rspack has built-in support for assets (e.g. images, fonts, videos, etc.), which means you don't need any loader to process them.

Unlike other module types, assets usually stand alone, so they are generated at the granularity of a module.

:::tip Module and Chunk

Other module types, such as JavaScript modules, are usually bundled into one or more chunks for final bundle generation. In the case of asset modules, it is almost impossible to be bundled, so they usually exist independently. This is one of the most straightforward reasons why it is called a "asset module."

:::

## Supported asset module types

- **`'asset/inline'`**: Converts an asset to a DataURI, using Base64 encoding, no encoding configuration is supported at this time.
- **`'asset/resource'`**: Converts an asset to a separate file and exports the URL address.
- **`'asset'`**:
  - Automatically selects `'asset/inline'` or `'asset/resource'` depending on the size of the asset, depending on the configuration
  - By default, the `'asset/inline'` mechanism is applied if the asset size is less than or equal to 8096 bytes, otherwise the `'asset/resource'` mechanism is used.
- **`'asset/source'`**: Converts and exports the asset file as a raw string.
- **`'asset/bytes'`**: Converts and exports the asset file as a binary data `Uint8Array`.

## Example

### Using `type: 'asset'`

Using `type: 'asset'` to automatically select a mechanism based on conditions:

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
      },
    ],
  },
};
```

By default, the `'asset/inline'` mechanism is applied if the asset size is less than or equal to 8096 bytes, otherwise the `'asset/resource'` policy is used.

If you wish to modify this behavior, you can use [`module.parser.asset.dataUrlCondition`](/config/module-parser.md#asset) to modify the global configuration, or use [`rules[].parser.dataUrlCondition`](/config/module-parser.md#assetdataurlcondition) to configure it separately for a specific eligible module.

### Replacing `url-loader`

Replacing `url-loader` with `type: 'asset/inline'`:

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.png$/,
-       use: [
-         {
-           loader: 'url-loader',
-         },
-       ],
+       type: 'asset/inline'
      },
    ],
  },
};
```

### Replacing `file-loader`

Replacing `file-loader` with `type: 'asset/resource'`:

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.png$/,
-       use: [
-         {
-           loader: 'file-loader',
-         },
-       ],
+       type: 'asset/resource'
      },
    ],
  },
};
```

### Replacing `raw-loader`

Replacing `raw-loader` with `type: 'asset/source'`:

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        resourceQuery: /raw/,
-       use: [
-         {
-           loader: 'raw-loader',
-         },
-       ],
+       type: 'asset/source'
      },
    ],
  },
};
```

### Using optimizers as loaders

There are times when we want to optimize a specific image, for example by compressing its size. We can still use these loaders.

For example, optimizing all files ending in `.png` with [image-minimizer-webpack-plugin](https://github.com/webpack/image-minimizer-webpack-plugin):

```js title="rspack.config.mjs"
import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';

export default {
  module: {
    rules: [
      {
        test: /\.png$/,
        use: [
          {
            loader: ImageMinimizerPlugin.loader,
            options: {
              // ...
            },
          },
        ],
        type: 'asset/resource',
      },
    ],
  },
};
```

The above condition uses `type: 'asset/resource'`, which will direct Rspack to complete individual file generation for all matching files and return the final asset URL address.