Add build-time image optimization with eleventy-img

Use eleventyImageTransformPlugin to automatically convert images to WebP
with original format fallback, add lazy loading and async decoding to all
images. Narrowed passthrough copy to src/assets/file only since images
are now processed by the plugin. Fixed malformed image paths in two posts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: NeverBehave

eleventy.config.js

@@ -3,6 +3,7 @@ import markdownItCjkBreaks from "markdown-it-cjk-breaks";
 import markdownItImplicitFigures from "markdown-it-implicit-figures";
 import markdownItFootnote from "markdown-it-footnote";
 import markdownItAttrs from "markdown-it-attrs";
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import pluginRss from "@11ty/eleventy-plugin-rss";
 import fs from "fs";
@@ -15,6 +16,15 @@ export default function (eleventyConfig) {
   // --- Plugins ---
   eleventyConfig.addPlugin(syntaxHighlight);
   eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+    formats: ["webp", "auto"],
+    widths: ["auto"],
+    failOnError: false,
+    defaultAttributes: {
+      loading: "lazy",
+      decoding: "async",
+    },
+  });
 
   // --- Markdown ---
   const md = markdownIt({ html: true, linkify: true })
@@ -40,7 +50,7 @@ export default function (eleventyConfig) {
   });
 
   // --- Passthrough copy ---
-  eleventyConfig.addPassthroughCopy("src/assets");
+  eleventyConfig.addPassthroughCopy("src/assets/file");
   eleventyConfig.addPassthroughCopy("src/static");
 
   // --- Tailwind CSS ---

package.json

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "3",
+    "@11ty/eleventy-img": "^6.0.4",
     "@11ty/eleventy-plugin-rss": "^3.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
     "@tailwindcss/postcss": "^4.2.2",

src/posts/keep-your-google-voice-with-sao.md

@@ -42,7 +42,7 @@ Tasker 是我当时为了挂国内短信卡而购入的一款自动化软件, 
 
 但是这个在 15 年的时候就停止了, 但是作者在帖子某个帖子下面回复说, 为了方便维护, 转向一个系列叫做[AutoApps](https://joaoapps.com/autoapps/)
 
-![](.//assets/media/keep-your-google-voice-with-sao/autoapps.png)
+![](/assets/media/keep-your-google-voice-with-sao/autoapps.png)
 
 简单点来说, 大约就是把各个子功能单独强化并作为`Tasker`兼容的组件单独出售, 一开始让我确实感觉有点被欺骗, 但是单个组件支持看广告免费试用, 买断或者是集体订阅
 
@@ -60,11 +60,11 @@ Tasker 是我当时为了挂国内短信卡而购入的一款自动化软件, 
 
 在免费试用期测试完整以后便买断了这个组件
 
-![](.//assets/media/keep-your-google-voice-with-sao/play_store_1.png)
+![](/assets/media/keep-your-google-voice-with-sao/play_store_1.png)
 
 注意一下各个组件价格还不一样的, 有些功能少的价格便宜, 多的也就贵一点, 看论坛整体生态还是不错的, 还支持不少第三方插件
 
-![](.//assets/media/keep-your-google-voice-with-sao/result.png)
+![](/assets/media/keep-your-google-voice-with-sao/result.png)
 
 ### 已知问题
 

src/posts/moving-my-blog-2.md

@@ -39,7 +39,7 @@ https://www.h404bi.com/blog/2019/04/recent-changes-of-my-site
 
 ---
 
-![Github Sponsor](../assets/media/..//assets/media/moving-my-blog-2/sponsor.png)
+![Github Sponsor](/assets/media/moving-my-blog-2/sponsor.png)
 
 整体体验还行, 顺便试试看新开的`Amex`卡