如何用Astro优化大尺寸图片以获得PageSpeed性能满分？

以下是直接解决你当前图片优化不足的具体调整步骤，对应PageSpeed的核心性能扣分点：

• 缩小目标宽度范围，避免加载超大尺寸图片
  原始图片4514x5789的分辨率远超过实际显示需求，当前代码保留原始宽度会导致桌面端加载不必要的大文件。建议根据页面布局设置合理的宽度阶梯，比如：

  widths={[390, 768, 1200]}
  

  同步修改sizes属性，匹配实际显示逻辑（假设图片在桌面端最大显示宽度为1200px）：

  sizes={`(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 1200px`}
  

• 降低质量参数，平衡视觉效果与文件体积
  WebP格式在60-70的质量区间视觉损失几乎不可察觉，但能大幅压缩文件大小。将quality从80调整为65：

  quality={65}
  

• 添加AVIF格式支持，进一步压缩体积
  AVIF的压缩效率优于WebP，Astro Image组件支持多格式输出，让浏览器自动选择最优格式：

  format={['webp', 'avif']}
  

• 启用模糊占位符，优化CLS指标
  累积布局偏移（CLS）是PageSpeed核心指标之一，添加模糊占位符可避免图片加载时的页面跳动：

  placeholder="blur"
  

• 确认Astro图片服务配置
  确保astro.config.mjs中启用了高效的sharp图片处理服务（默认配置即可，但需确认未修改为低效服务）：

  import { defineConfig } from 'astro/config';
  import image from '@astrojs/image';
  
  export default defineConfig({
    integrations: [image()],
    image: {
      service: {
        entrypoint: '@astrojs/image/sharp',
      },
    },
  });
  

修改后的完整代码示例 #

<Image
  src={Image}
  alt="图片的具体描述文本" // 替换为有意义的内容，优化可访问性
  quality={65}
  format={['webp', 'avif']}
  loading="lazy"
  widths={[390, 768, 1200]}
  sizes={`(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 1200px`}
  placeholder="blur"
  class="rounded-lg"
/>

调整后重新测试PageSpeed，重点关注「未优化图片」「适当尺寸的图片」「CLS」这几个扣分点，以上修改应该能解决核心问题，帮助你拿到100分性能评分。

内容的提问来源于stack exchange，提问作者user23351566