jaredLunde / snowpack-plugin-resize-images

Resize your build images with Sharp and Snowpack

---

snowpack-plugin-resize-images

Resize your images with Sharp and Snowpack

# 🔆 Note there is a peer dependency for Sharp
npm i -D sharp snowpack-plugin-resize-images

---

Quick start

🔆 This plugin resizes images based on matching glob patterns. Your image originals will be unaffected as the processing only happens at build/dev.

This plugin runs in both snowpack dev and snowpack build

// snowpack.config.js
module.exports = {
  plugins: [
    [
      'snowpack-plugin-resize-images',
      /** @see "Plugin Options" below */
      {
        /**
         * Glob pattern
         * @see https://github.com/isaacs/node-glob#glob-primer
         */
        '**/300x250/**': {
          /**
           * A Sharp method. This is the same as:
           * ```
           * sharp(input).resize({
           *  width: 300,
           *  height: 250,
           *  options: {
           *   fit: cover
           *  }
           * })
           * ```
           */
          resize: {
            // Sharp method options
            width: 300,
            height: 250,
            options: {
              fit: 'cover',
            },
          },
          /**
           * Another Sharp method. This is chained to the method before it.
           * That is:
           * ```
           * sharp(input).resize({
           *  width: 300,
           *  height: 250,
           *  options: {
           *   fit: cover
           *  }
           * }).jpeg({
           *  quality: 90
           * })
           * ```
           */
          jpeg: {
            quality: 90,
          },
        },
        // Convert all images in the /webp/ directories
        // to webp with a quality of 90
        '**/webp/**': {
          webp: {
            quality: 90,
          },
        },
        '**/placeholder/**': {
          /**
           * This is the same as:
           * ```
           * sharp(INPUT).blur(30)
           * ```
           */
          blur: [30],
        },
      },
    ],
  ],
}

Plugin Options

type SnowpackPluginResizeImagesOptions = {
  /**
   * This is a mapping of glob patterns and their sharp methods
   * and options. See the Sharp documentation for a complete list of
   * methods and their respective options.
   *
   * @see https://sharp.pixelplumbing.com/api-output
   */
  /**
   * Matches image patterns
   */
  [globPattern: string]: {
    /**
     * Chains a method to sharp e.g.
     * `sharp(FILE).sharpMethod()`
     */
    [sharpMethod: string]:
      | {
          /**
           * Adds options to the sharp method e.g.
           * `sharp(FILE).sharpMethod(OPTIONS)`
           */
          [sharpMethodOption: string]: any
        }
      /**
       * Add parameters to the sharp method e.g.
       * sharp(FILE).sharpMethod(...PARAMETERS)
       */
      | any[]
  }
}

LICENSE

MIT