我正在try 优化一个2.4MB的图像(4514x5789)与Astro.
我试过:
<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人的说法，这是不够的.我可以更改什么才能获得PageSpeed Insights分的性能分数？
根据Astro docs，您提供的widths属性将用于以HTML格式生成srcset.
以下是你的页面上的内容:
<img
src="/_vercel/image?url=_astro%2Fdaniell.ewbYQu3K.jpg&w=3840&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的潜在尺寸之一.在小于768px的设备上，将使用390px版本的图像.在大于768px的设备上，将使用完整的4514px图像.
此外，图像在页面上实际呈现的最大像素似乎是390px，因此您不需要比这更大的任何来源.要解决此问题，请try 从widths和sizes中删除Image.width:
<Image
src={Image}
alt="image"
quality={80}
format="webp"
loading="lazy"
widths={[390]}
sizes="390px"
class="rounded-lg"
/>