Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

使用 Next Image 最佳化圖片

Next.js 的一大特點就是已經即成了許多便利的功能,包含簡便的路由配置、圖片優化、效能優化、打包優化等等,今天來看看圖片優化是怎麼個做法。

在 Next.js 中,next/image 提供了圖片載入優化的方式,有助於提升網站的性能和使用者體驗。

在尚未使用 Next Image 之前,網站上的圖片都是原始的尺寸與解析度,也不會去使用瀏覽器提供的優化格式(像是 Chrome 可使用的 WebP),這導致圖片檔案過大,這在正式生產環境中可不是一件好事。

使用 Next Image 會根據匯入的檔案自動設定 width 與 height。

1import profilePic from '@/public/images/site/avatar.jpeg';
2
3<Image src={profilePic} alt="An image showing avatar" />;
4

我們也可以明確地撰寫 widthheight 這兩個屬性,這麼做影響的不只是圖片呈現的寬度,也會影響到這張圖片被 Fetch 下來的尺寸大小,而畫面上的圖片寬高依然可以透過 CSS 去調整。

1import Image from 'next/image';
2
3export default function Page() {
4  return (
5    <Image
6      src="/profile.png"
7      width={250}
8      height={250}
9      alt="Picture of the author"
10    />
11  );
12}
13

如範例中所示,我們不需要載入原圖,因此明確指定圖片寬高,試圖減少載入的圖片大小。可以在 Network 裡面查看,可以發現圖片大小減少許多,並且使用 Chrome 的話會是 WebP 這個圖片優化的檔案格式。

除此之外,Next Image 預設有 Lazy Loading 的功能,也就是你還沒瀏覽到時,瀏覽器就不會去加載該張圖片。

你可以試著把畫面由手機版拉寬成桌機版,會發現 Network 中多 Request 了一張大圖,這就是因為當畫面變寬時,Next Image 才懶加載大圖,而畫面小的時候這一張圖就不會被載入。