乐闻世界logo
5月27日 21:13

Astro 的 Image 组件如何优化图片加载？

Astro 的 Image 组件在构建时自动完成四件事：生成多尺寸响应式图片、转换现代格式（AVIF/WebP）、压缩质量、注入懒加载属性。浏览器根据 srcset 和 sizes 选择最合适的资源，避免加载冗余像素。

基本用法

astro
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="首页横幅" widths={[400, 800, 1200]} sizes="(max-width: 768px) 100vw, 50vw" formats={['avif', 'webp', 'jpeg']} />

widths 配合 sizes 让窄屏加载小图、宽屏加载大图。formats 按优先级尝试，AVIF 不可用时回退 WebP，再回退 JPEG。

关键属性速查

  • widths / sizes — 响应式断点与显示尺寸，缺一不可
  • quality — 压缩质量，推荐 75-85，肉眼无损但体积显著降低
  • loading — 首屏图用 eager + priority，其余默认 lazy
  • format — 输出格式，默认 WebP

远程图片处理

远程 URL 需在 astro.config.mjs 白名单域名，否则构建报错：

javascript
image: {
  remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }]
}

不确定尺寸时加 inferSize，Astro 会在构建时拉取图片获取宽高，避免 CLS 布局偏移。

三个常见坑

  1. public 目录图片不走优化 — 必须放 src/assets 并 import 引入
  2. 宽高缺失导致 CLS — 本地图片自动推断，远程图片需手动指定或用 inferSize
  3. 忘记配 remotePatterns — 远程图片直接报错，排查时先检查配置

追问

Image 和 Picture 有什么区别？ Picture 生成 元素，多格式同时输出让浏览器自行选择；Image 只输出单一最优格式。需要兼容老浏览器时用 Picture。

构建时优化和 CDN 实时优化怎么选？ 构建时优化零运行时开销，适合静态站点；图片量大或频繁更新时，CDN 实时处理更灵活。两者可以结合使用。

如何优化 LCP？ 首屏图片设 loading="eager" 并加 fetchpriority="high"，同时用 widths 限制首屏图的最大尺寸，避免加载不必要的大图。

标签：Astro