Neverending Package Mountain

    eleventy-plugin-local-respimg

    0.4.0 • Public • Published

    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
          },
          hoistClasses: false, // Adds the image tag's classes to the output picture tag
          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
        },
      });
    };

    Troubleshooting

    SVGs

    SVGs are required to have <?xml version="1.0" encoding="utf-8"?> at the top of the file in order to have their MIME type properly read and for SVGs to work.

    Install

    npm i eleventy-plugin-local-respimg

    DownloadsWeekly Downloads

    37

    Version

    0.4.0

    License

    Apache-2.0

    Unpacked Size

    20.5 MB

    Total Files

    32

    Last publish

    Collaborators

    • snugug