use eleventyImageTransformPlugin

eleventy.config.js

@@ -54,6 +54,21 @@ export default async function (eleventyConfig) {
     useTransform: true
   });
 
+  eleventyConfig.addPlugin(plugins.eleventyImageTransformPlugin, {
+    formats: ['avif', 'webp', 'jpeg'],
+    outputDir: '/assets/images/',
+    widths: ['auto'],
+    extensions: 'html',
+    htmlOptions: {
+      imgAttributes: {
+        loading: 'lazy',
+        decoding: 'async',
+        sizes: '100vw'
+      },
+      pictureAttributes: {}
+    }
+  });
+
   // ---------------------  bundle
   eleventyConfig.addBundle('css', {hoist: true});
 

src/_config/plugins.js

@@ -3,6 +3,7 @@ import {EleventyRenderPlugin} from '@11ty/eleventy';
 import rss from '@11ty/eleventy-plugin-rss';
 import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
 import webc from '@11ty/eleventy-plugin-webc';
+import {eleventyImageTransformPlugin} from '@11ty/eleventy-img';
 
 // custom
 import {markdownLib} from './plugins/markdown.js';
@@ -20,8 +21,9 @@ export default {
   rss,
   syntaxHighlight,
   webc,
+  eleventyImageTransformPlugin,
   markdownLib,
-	drafts,
+  drafts,
   htmlConfig,
   cssConfig,
   jsConfig