如何更快地加载大图像 | next.js

Question

这是一个全屏图像。

1. 我使用图像组件
2. 图片格式：webb
3. 关于下面照片中的图像的信息

我尝试了什么：

1. 在图像组件中使用的优先级={true} next.js优先级

2. 试图压缩图像，它的大小，分辨率，但它仍然加载缓慢

    <Image src={"/images/video/bg-image.webp"} layout={"fill"} objectFit={"cover"} alt={"background image"} />

我第一次 go 到页面时，我必须等待至少 5-10 秒才能加载图像，然后图像加载速度很快。 如何提高图像的加载速度？

Answer 1

首先你应该从下一个/图像导入图像而不是反应，如果你在本地测试它，请注意每个刷新页面你有一个请求并且它很慢，但在生产模式下它是不同的并且非常快。 如果你在线测试 Next.js 捕获图像并具有用于第一次加载和慢速加载的延迟加载算法可能与您的 web 的基础架构有关。 我还建议您使用 Next.js 12。