如何使用Astro优化大图像？

Question

我正在尝试使用 Astro 优化 2.4 MB 图像 (4514x5789)。

我尝试过：

<Image
  src={Image}
  alt="image"
  quality={80}
  format="webp"
  loading="lazy"
  widths={[390, Image.width]}
  sizes={`(max-width: 768) 390px, ${Image.width}px`}
  class="rounded-lg"
/>

不幸的是，根据 PageSpeed Insights，这还不够。我可以改变什么才能获得 100 分的性能分数？

Answer 1

根据 Astro 文档，您提供的

widths

属性将用于在 HTML 中生成

srcset

。

您的页面上的内容如下：

<img
  src="/_vercel/image?url=_astro%2Fdaniell.ewbYQu3K.jpg&amp;w=3840&amp;q=80" 
  alt="Daniell sitting"
  loading="lazy"
  widths="390,4514"
  sizes="(max-width: 768) 390px, 4514px"
  class="rounded-lg"
  width="4514"
  height="5789"
  decoding="async">

问题似乎在于您将原始图像的宽度作为

srcset

的潜在尺寸之一传递。在小于 768 像素的设备上，将使用 390 像素版本的图像。在宽度超过 768 像素的设备上，将使用完整的 4514 像素图像。

页面上实际渲染的最大图像似乎是 390px，因此您不需要任何大于该尺寸的源。要解决此问题，请尝试从

Image.width

和

widths

中删除

sizes

：

<Image
  src={Image}
  alt="image"
  quality={80}
  format="webp"
  loading="lazy"
  widths={[390]}
  sizes="390px"
  class="rounded-lg"
/>