# @rollup/plugin-image

> Import JPG, PNG, GIF, SVG, and WebP files

Latest version **3.0.3** (published 2023-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rollup/plugin-image
pnpm add @rollup/plugin-image
yarn add @rollup/plugin-image
bun add @rollup/plugin-image
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2023-10-05 |
| First published | 2019-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.0.0 |
| Dependencies | 2 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3756 |
| Author | Rich Harris |
| Maintainers | shellscape, rich_harris, guybedford, lukastaegert |
| Keywords | rollup, plugin, images, modules |

## Links

- npm: https://www.npmjs.com/package/@rollup/plugin-image
- Repository: https://github.com/rollup/plugins
- Homepage: https://github.com/rollup/plugins/tree/master/packages/image/#readme
- Issues: https://github.com/rollup/plugins/issues
- npm.io page: https://npm.io/package/@rollup/plugin-image

## Dependencies (2)

- [mini-svg-data-uri](https://npm.io/package/mini-svg-data-uri.md) ^1.4.4
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.0.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.0.3 (latest) — 2023-10-05
- 3.0.2 — 2023-01-20
- 3.0.1 — 2022-10-21
- 3.0.0 — 2022-10-09
- 2.1.1 — 2021-08-24
- 2.1.0 — 2021-07-26
- 2.0.6 — 2020-12-14
- 2.0.5 — 2020-05-11
- 2.0.4 — 2020-02-04
- 2.0.2 — 2020-02-01
- 2.0.1 — 2020-01-07
- 2.0.0 — 2019-11-20

## README

[npm]: https://img.shields.io/npm/v/@rollup/plugin-image
[npm-url]: https://www.npmjs.com/package/@rollup/plugin-image
[size]: https://packagephobia.now.sh/badge?p=@rollup/plugin-image
[size-url]: https://packagephobia.now.sh/result?p=@rollup/plugin-image

[![npm][npm]][npm-url]
[![size][size]][size-url]
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

# @rollup/plugin-image

🍣 A Rollup plugin which imports JPG, PNG, GIF, SVG, and WebP files.

Images are encoded using base64, which means they will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost.

## Requirements

This plugin requires an [LTS](https://github.com/nodejs/Release) Node version (v14.0.0+) and Rollup v1.20.0+.

## Install

Using npm:

```console
npm install @rollup/plugin-image --save-dev
```

## Usage

Assuming a `src/index.js` exists and contains code like the following:

```js
import logo from './rollup.png';

console.log(logo);
```

Create a `rollup.config.js` [configuration file](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:

```js
import image from '@rollup/plugin-image';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [image()]
};
```

Then call `rollup` either via the [CLI](https://www.rollupjs.org/guide/en/#command-line-reference) or the [API](https://www.rollupjs.org/guide/en/#javascript-api).

Once the bundle is executed, the `console.log` will display the Base64 encoded representation of the image.

## Options

### `dom`

Type: `Boolean`<br>
Default: `false`

If `true`, instructs the plugin to generate an ES Module which exports a DOM `Image` which can be used with a browser's DOM. Otherwise, the plugin generates an ES Module which exports a `default const` containing the Base64 representation of the image.

Using this option set to `true`, the export can be used as such:

```js
import logo from './rollup.png';
document.body.appendChild(logo);
```

### `exclude`

Type: `String` | `Array[...String]`<br>
Default: `null`

A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files in the build the plugin should _ignore_. By default no files are ignored.

### `include`

Type: `String` | `Array[...String]`<br>
Default: `null`

A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.

## Meta

[CONTRIBUTING](/.github/CONTRIBUTING.md)

[LICENSE (MIT)](/LICENSE)

---
_Source: https://npm.io/package/@rollup/plugin-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._