如何更快地加載大圖像 | 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。