snowpack-plugin-sharp

snowpack-plugin-sharp

Use sharp to optimize your images in Snowpack. This plugin will only transform images in production.

$ npm i -D snowpack-plugin-sharp sharp

Installation

const sharp = require("sharp");

// snowpack.config.js
module.exports = {
  plugins: [
    [
      "snowpack-plugin-sharp",
      {
        transformers: [
          {
            fileExt: ".jpg",
            apply: (file) =>
              sharp(file).jpeg({
                quality: 50,
                chromaSubsampling: "4:4:4",
              }),
          },
        ],
      },
    ],
  ],
};

---

Optionally, it is possible to create a second Image with 'preview-' prefix in the filename. This can be useful for generating low quality images for instance.

{
  fileExt: ".webp",
  withPreview: (file) => sharp(file).webp({ quality: 1 }),
  apply: (file) =>
    sharp(file).webp({
      quality: 60,
    }),
}

Further Optimization

While this plugin is useful in the build step, handling the image correctly on the Web is the other side of the coin. This library progressive-picture could be helpful in this case.