https://github.com/gobeli/rollup-plugin-sharp
https://github.com/gobeli/rollup-plugin-sharp
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gobeli/rollup-plugin-sharp
- Owner: gobeli
- Created: 2019-08-29T12:19:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T08:26:56.000Z (over 3 years ago)
- Last Synced: 2025-04-08T08:53:24.653Z (about 1 year ago)
- Language: TypeScript
- Size: 613 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rollup-plugin-sharp
A rollup plugin which scales and moves images to enable [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/)-like image lazy-loading
## Usage
**Config**
```js
import sharp from 'rollup-plugin-sharp'
export default {
...
plugins: [
...
sharp({
include: ["**/*.jpg"], // defaults to .png, .jpg and .gif files
fileName: "[hash][extname]" // defaults to [name].[hash][extname]
})
]
}
```
**Import**
```js
import image from "./image.jpg";
console.log(image.src); // public url to image i.e: image.ff84eb7eb7196ae2.jpg
console.log(image.placeholder); // data-url placeholder image, i.e: data:image/png;base64,iVBORw0KGgoAAAANSUhEU...
console.log(image.width); // height of the image in pixels, i.e 1024
console.log(image.height); // width of the image in pixels, i.e 1024
```
## Options
| Name | Type | Description |
| ------------- | ------------------------------------------ | -------------------------------------------------------------------------------- |
| include | `string \| RegExp \| (string \| RegExp)[]` | files to include |
| exclude | `string \| RegExp \| (string \| RegExp)[]` | files to exclude |
| publicPath | `string` | public path for the `src` attribute |
| destDir | `string` | destination of the processed image files |
| minifiedWidth | `string` | width of the minified placeholder image |
| fileName | `string` | template for the exported file names, accepts `[name]`, `[hash]` and `[extname]` |