Add support for forcing the use of lossless compression.

[wavebeem]

This plugin is super cool, but it doesn't work well with lossless source images. I have a lot of PNGs (mainly of pixel art) on my website, and using magick IN.png -quality 100 OUT.webp gives me file sizes that are 10 times smaller and nicer looking by preserving the lossless encoding.

I don't see a way to conditionally support lossless encoding based on the input file format, at least not while using eleventyImageTransformPlugin

I realize that for some use cases, like oversized PNG screenshots of video games, that converting to lossy is indeed the right thing to do. The same way that there's an animation: true flag to force the output to only use animation supporting formats if necessary, I'd love to see a plugin option, or a custom eleventy:lossless attribute or something so I can retain image quality.

[zachleat]

Can this be achieved in your global configuration with sharpWebpOptions? https://www.11ty.dev/docs/plugins/image/#advanced-control-of-sharp-image-processor

[wavebeem]

I've tried, but I don't see any way to make this conditional based on whether the input is lossless (based on file extension would be easier and "good enough" imo). If I force the use of lossless and 100% quality, then JPEGs are also preserved losslessly, making the filesizes unnecessarily large.

What I want is to detect if the input is PNG or GIF and then use quality: 100, lossless: true. Ideally lossless WebP would be detected and preserved too, but I'm OK with using just PNG and GIF as inputs to this if I have to (so far I've been using a custom script to convert these files to WebP, though Aseprite also supports WebP output so lately I've often been saving directly as WebP)

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default async function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    sharpOptions: {
      animated: true,
    },

    // sharpWebpOptions: {
    //   quality: 100,
    //   lossless: true,
    // },

    transform: (sharp) => {
      // sharp instance does NOT have the input filename, just a buffer, so I can't conditionally set the properties I want here
      sharp.webp({
        quality: 100,
        lossless: true,
      });
      console.log("Transform sharp", sharp);
    },
  });
}

Maybe if we had a second parameter to the transform function with a context object containing the filename and any other relevant info?