11ty Image to Lume Imagick

[simplerethink]

I'm considering migrating from 11ty to Lume.

In 11ty, image processing has the ability to create custom file names and file hashes

In 11ty, I can do something like this:

let metadata = await Image(src, {
        widths: [450, 550, 800],
        formats: ["webp", "jpeg", "avif"],
        outputDir: "./processed-img/",
        hashLength: 10,
        // Define custom filenames for generated images
        filenameFormat: function (id, src, width, format, options) {
            const extension = path.extname(src);
            const name = path.basename(src, extension);

            return `${name}-${width}w-${id}.${format}`;
        },
    });

This produces something like mountain-450w-OsnQ_vZGAM.webp

Is there similar capability in Lume? If not, could this be considered as a feature request?

[oscarotero]

Lume has the imagick plugin that can transform an image and outputs different versions. For example you can create a _data.yml in your images folder with the following data:

imagick:
  - resize: [450]
    format: [webp, jpeg, avif]
    suffix: -450
  - resize: [550]
    format: [webp, jpeg, avif]
    suffix: -550
  - resize: [800]
    format: [webp, jpeg, avif]
    suffix: -800

Or if you don't want to keep this configuration manually, you can create a _data.ts file that generate this data for you:

const formats = ["webp", "jpeg", "avif"];
const sizes = [450, 550, 800];

export const imagick = sizes.map((size) => {
  return {
    resize: [size],
    formats,
    suffix: `-${size}`
  };
})

[simplerethink]

I guess I could still use Lume Server for this even though I'm building locally?

[oscarotero]

If you change the filename of the images, you have to change also the HTML code that import these images. So maybe you can do this:

Save your hash anywhere:

export const hash = Date.now();

Use it in the images prefixes:

import { hash } from "./hash.ts";

const formats = ["webp", "jpeg", "avif"];
const sizes = [450, 550, 800];

export const imagick = sizes.map((size) => {
  return {
    resize: [size],
    formats,
    suffix: `-${size}-${hash}`
  };
})

And transform the urls of the images in the HTML pages:

import { hash } from "./hash.ts";

site.use(modifyUrls({
  fn: (url) => url.replace(/\.(jpg|webp|avif)/, `-${hash}.$1`)
}));

[simplerethink]

Ok, I'll see what I can come up with. In 11ty the Image processor handles this itself, so it's not something that I've had to do. However, I do something similar for JS and CSS files on my 11ty site. I have an NPM script that first processes the Sass/JS and creates a *.min.css/js file. I then hash the files and save the hash value in json. Rename the files based on the hash and then reference the css/js files in the template using the json value. I'll see if I can dig into the 11ty Image plugin to see how it's being done there. My json method works fine for a small number of js/css files, but I'm not sure what will happen with a site with a large number of images.

[oscarotero]

I'm thinking of creating a plugin for that, not only for images but for all kind of assets: #352

[simplerethink]

That would be awesome, thank you. Taking a quick look at how 11ty is doing it, they are using sha256 https://github.com/11ty/eleventy-img/blob/e51ad8e1da4a7e6528f3cc8f4b682972ba402a67/img.js#L295 I think you'll want to use either sha256 or md5. Date.now() would cause the hash to change every time and would not be unique to the asset.