Astro 图片使用规范：Image 用本地资源，img 用 CDN 图片
为什么要统一 Astro 的图片使用规范？
在实际项目中，经常会看到这些情况：
- 有的页面全用
<img> - 有的页面全用
<Image> - CDN 图片、本地图片混在一起
- 构建时图片体积失控、CLS 飙升、LCP 变差
问题不在技术能力，而在没有规范。
在 Astro 项目里，图片是构建期资源 + 运行期资源并存的，一旦不加区分，后期维护成本会非常高。
一句话规范（建议写进团队 README）
本地图片一律使用
Image，远程 / CDN 图片一律使用img
这不是“推荐”，而是工程级约束。
为什么本地图片一定要用 Image？
Image 是「构建期优化工具」
当你这样写：
---
import { Image } from "astro:assets";
import heroImage from "@/assets/hero.webp";
---
<Image
src={heroImage}
alt="Astro 图片规范示意"
width={800}
height={400}
loading="lazy"
/>Astro 在构建阶段会自动帮你完成：
- ✅ 图片压缩
- ✅ 自动生成响应式尺寸
- ✅ 明确 width / height（防 CLS）
- ✅ 静态资源可控、可追踪
- ✅ 构建失败即可发现问题（不是线上出事故）
这是 img 做不到的。
为什么 CDN 图片不要用 Image？
Image 不适合「运行期不确定资源」
以下场景，禁止使用 Image：
- CDN 图片
- 接口返回的图片 URL
- CMS / 后台上传图片
- 用户头像、商品图、内容图
<img
src="https://cdn.example.com/banner/2026.webp"
alt="活动 Banner"
loading="lazy"
decoding="async"
/>原因很简单：
- Image 需要 构建期确定资源
- CDN 图片是 运行期地址
- 强行用 Image = 设计层级错误
工具不是越高级越好，而是要用在对的层级。
博客 / 内容页图片该怎么选？
推荐方案
| 场景 | 推荐 |
|---|---|
| 博客封面图（本地） | Image |
| 博客正文插图（CDN） | img |
| Hero / 核心视觉 | Image |
| CMS 内容图片 | img |
博客封面（本地）
<Image
src={cover}
alt={title}
class="rounded-xl"
sizes="(max-width: 768px) 100vw, 800px"
/>正文内容（CDN）
<img
src="https://cdn.xxx.com/post/astro-image.png"
alt="Astro Image vs img"
/>正文内容本质是数据，不是构建资产。
什么时候 Image 是「过度设计」？
以下情况，用 Image 反而是负担：
- 列表中大量动态图片
- 后台管理系统
- 图片 URL 来自接口
- 图片来源不可控
Image 是工程工具，不是通用 img 替代品
推荐的团队级图片规范总结
你可以直接贴到项目规范里：
1. src/assets 下的图片：必须使用 Image
2. CDN / 外链图片：只能使用 img
3. 博客封面图：Image
4. 博客正文内容图：img
5. 禁止为了“统一写法”滥用 Image写在最后：这不是风格问题，是架构问题
图片使用方式，直接影响：
- 构建稳定性
- 页面性能指标（LCP / CLS）
- CDN 成本
- 内容系统可扩展性
一个成熟的 Astro 项目，一定有清晰的图片分层策略。
能跑 ≠ 能长期维护 规范，永远是给未来的自己省时间
