Conversion d'image automatique avec Eleventy

2 mai 2021

Utilise le plugin Image d'Eleventy

npm install @11ty/eleventy-img

Convertis une image

Pour nommer l'image générée comme sa source j'utilise la function filenameFormat avec path

Dans eleventy.js 

const path = require("path");
const Image = require("@11ty/eleventy-img");

(async () => {
    let url = "sources/images/kirby/logo_kirby_super_star_ultra.png";
    let stats = await Image(url, {
        formats: ['avif', 'webp'],
        outputDir: './sources/images/_generated',
        filenameFormat: function (id, src, width, format, options) {
            const extension = path.extname(src);
            const name = path.basename(src, extension);
            return `${name}.${format}`;
        },
    })
    //console.log( stats );
})();

module.exports = function (eleventyConfig) {
    ...
};

Convertis un dossier d'images

Installer fast-glob npm install fast-glob

Dans eleventy.js 

const path = require("path");
const Image = require("@11ty/eleventy-img");
const fg = require('fast-glob');

async function generateImages() {
    const dossierImages = fg.stream("sources/images/**/*.{jpg,jpeg,png}");
    for await (const entry of dossierImages) {

        let dossier = entry.substr(0,entry.lastIndexOf('/'));

        let stats = await Image(entry, {
            formats: ['avif', 'webp'],
            outputDir: dossier+'/auto',
            filenameFormat: function (id, src, width, format, options) {
                const extension = path.extname(src);
                const name = path.basename(src, extension);
                return `${name}.${format}`;
            },
        })
    }
}

module.exports = function (eleventyConfig) {

    //génère les images en webp et avif
    generateImages();
    console.log('images généré');

};

↳ Pas terrible, ca relace le watch pour chaque image, à désactiver après usage

Exemple 

<img src="https://www.pierre.tl/images/mosaique/aux-delices-ahmed.jpg" alt="normal">
<img src="https://www.pierre.tl/images/mosaique/auto/aux-delices-ahmed.webp" alt="webp auto">
normal webp auto