Have ideas to improve npm?Join in the discussion! »

    snowpack-plugin-resize-images
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.6 • Public • Published

    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

    Build status NPM Version MIT License


    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

    Install

    npm i snowpack-plugin-resize-images

    DownloadsWeekly Downloads

    5

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    23.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar