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">

