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]