rollup-plugin-sharp

A rollup plugin which scales and moves images to enable gatsby-image-like image lazy-loading

Usage

Config

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

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] |