[AI Slop🤖] Implement lazy loading and fixed image size for documentation and about page

[Copilot]

Prevents CLS (Cumulative Layout Shift) by injecting image dimensions and lazy-loading attributes at build time via a rehype plugin, and adds a skeleton placeholder with a smooth fade-in transition when images finish loading.

Changes Made

• src/plugins/rehypeMarkdownImages.ts — build-time rehype plugin that injects loading="lazy", decoding="async", inferred width/height (from a static dimension map with aspect-ratio inference), and lazy-image is-loading CSS classes on all markdown <img> elements, including inline HTML images in /about. Dimension injection (including aspect-ratio inference when only one of width/height is provided) now runs for all image types before the SVG early-return, so SVGs also receive correct width/height attributes. /images/animeko.svg (1280×640) is included in the dimension map.

• src/scripts/enhanceMarkdownImages.ts — lightweight client script (used by both Doc.astro and Post.astro) that transitions is-loading → is-loaded / is-error on load/error events; uses a WeakSet for idempotent registration without polluting the DOM

• src/styles/markdown.css — skeleton pulse animation (markdown-image-pulse) during load, and a markdown-image-fade-in keyframe (opacity 0 → 1, 0.35s ease, fill-mode: forwards) applied to .is-loaded for a natural fade-in after the skeleton clears; is-error dims the image with opacity: 0.6

• astro.config.mjs — registers rehypeMarkdownImages as the first rehype plugin

• src/content/wiki/macos-intel-install.md — updates inline <img> to use explicit width/height with style="width:20%" for responsive sizing

Coverage

The rehype plugin runs after Astro's internal rehype-raw pass, so it processes both standard markdown images and raw inline HTML <img> tags (including those in the /about page tables). Inline <img> elements with only one dimension manually set (e.g. width="200") have the missing dimension automatically inferred from the known aspect ratio. Both Doc.astro (wiki pages) and Post.astro (about/posts) call enhanceMarkdownImages().

Testing

• ✅ CodeQL security scan: 0 alerts
• ✅ Biome lint check passes
• ✅ TypeScript check (astro check) passes

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	ani-website	95fc2ad	Commit Preview URL Branch Preview URL	May 11 2026, 01:51 PM

[nick-cjyx9]

@copilot

1. 用 <img loading="lazy"> 实现真正的懒加载
2. skeleton消失后图片加一个fade-in的opacity动画更自然
3. /about 页面也要实现图片优化，你可以考虑所有图片做统一的 rehype 阶段获取注入图片尺寸

[Copilot]

@copilot

1. 用 <img loading="lazy"> 实现真正的懒加载
2. skeleton消失后图片加一个fade-in的opacity动画更自然
   ...

已在 3bfa430 中更新：

1. loading="lazy" — rehype 插件在构建阶段已为所有 markdown <img> 注入 loading="lazy" 和 decoding="async"，包括 about.md 中的内联 HTML 图片（rehype-raw 先运行，解析内联 HTML 后插件才处理）。✓

2. Fade-in 动画 — 为 .is-loaded 状态新增 markdown-image-fade-in keyframe（opacity 0 → 1，0.35s ease，fill-mode: forwards），替换原来的 CSS transition。skeleton 消失后图片会平滑淡入。

3. /about 页面 — about.md 使用 Post.astro 布局，rehype 插件在构建时已注入 lazy-image is-loading class 及正确的 width/height（从 dimensions 表按比例推算），enhanceMarkdownImages() 也已在 Post.astro 中调用，所以 /about 和 wiki 页面走同一套优化流程。

[nick-cjyx9]

@copilot /about 中对于人为指定了长宽之一的tag，或许需要手动按比例计算另外一个数值，且顶部的
![Animeko](/images/animeko.svg)并没有按预期被注入宽高

[Copilot]

@copilot /about 中对于人为指定了长宽之一的tag，或许需要手动按比例计算另外一个数值，且顶部的
![Animeko](/images/animeko.svg)并没有按预期被注入宽高

已在 da4e664 中修复：

SVG 宽高注入：将 /images/animeko.svg（1280×640，从 SVG 根元素 width/height 属性读取）加入 imageDimensions 表，并将尺寸注入逻辑整体移至 if (isSvg) return 之前。之前 SVG 在尺寸注入前就 return 了，所以无论在不在表里都不会被处理；现在所有图片（包括 SVG）统一先做尺寸注入，SVG 再跳过 skeleton class 处理即可。

inline <img> 按比例推算另一个维度：该逻辑已正确实现——比如 about.md 中 <img src="/features/subject-details.png" width="200"/> 会被自动计算为 height="445" (round(200 × 1280 / 575))，浏览器在图片加载前即可预留正确尺寸（防 CLS）。这个代码路径在重构中保持不变，只是现在 SVG 也同样受益于它。