eleventy-plugin-local-respimg
Eleventy plugin for optimizing and making responsive local images
Last updated 10 days ago by snugug .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install eleventy-plugin-local-respimg 
SYNC missed versions from official npm registry.

Eleventy Plugin Local Responsive Images

Eleventy plugin for resizing and optimizing local images, and rewriting img tags to make use of the resized and optimized images (collectively, "responsive images"). Works by finding local images in img tags that aren't already wrapped in a picture tag and, where applicable, resizing, optimizing, and converting to webp. Can take a glob of additional images to watch and optimize as well. Additional images will not be resized or have a WebP version made.

Supported image types:

  • png - optimize/resize/webp
  • jpg - optimize/resize/webp
  • gif - optimize/resize/webp/mp4
  • svg - optimize

Usage

const pluginLocalRespimg = require('eleventy-plugin-local-respimg');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginLocalRespimg, {
    folders: {
      source: 'src', // Folder images are stored in
      output: 'public', // Folder images should be output to
    },
    images: {
      resize: {
        min: 250, // Minimum width to resize an image to
        max: 1500, // Maximum width to resize an image to
        step: 150, // Width difference between each resized image
      },
      gifToVideo: false, // Convert GIFs to MP4 videos
      sizes: '100vw', // Default image `sizes` attribute
      lazy: true, // Include `loading="lazy"` attribute for images
      additional: [
        // Globs of additional images to optimize (won't be resized)
        'images/icons/**/*',
      ],
      watch: {
        src: 'images/**/*', // Glob of images that Eleventy should watch for changes to
      },
      pngquant: {
        /* ... */
      }, // imagemin-pngquant options
      mozjpeg: {
        /* ... */
      }, // imagemin-mozjpeg options
      svgo: {
        /* ... */
      }, // imagemin-svgo options
      gifresize: {
        /* ... */
      }, // @gumlet/gif-resize options
      webp: {
        /* ... */
      }, // imagemin-webp options
      gifwebp: {
        /* ... */
      }, // imagemin-gif2webp options
    },
  });
};

Current Tags

  • 0.2.1                                ...           latest (10 days ago)
  • 0.2.0-0                                ...           next (2 months ago)

10 Versions

  • 0.2.1                                ...           10 days ago
  • 0.2.0                                ...           2 months ago
  • 0.2.0-0                                ...           2 months ago
  • 0.1.6                                ...           3 months ago
  • 0.1.5                                ...           4 months ago
  • 0.1.4                                ...           5 months ago
  • 0.1.3                                ...           5 months ago
  • 0.1.2                                ...           5 months ago
  • 0.1.1                                ...           5 months ago
  • 0.1.0                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 10
Dependencies (15)
Dev Dependencies (1)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |