Day 29 Next.js 之 Image (上)

2022 iThome 鐵人賽

DAY 29

自我挑戰組

我與 React 的 30天系列第 29 篇

14th鐵人賽

zhan0217

2022-10-14 02:06:33

1644 瀏覽

分享至

繼昨天和大家介紹 Next.js 獨有的 Link Component 來優化使用者在網站換頁時體驗，讓我們在使用 Next.js 製作的網站會有使用 SPA 的感覺
今天和大家介紹 Next.js 的 Image Component，讓我們來看看這個Component 幫我們解決了什麼問題

什麼是 `next/image`

The Google Chrome team helped us create this React component to improve page performance, by making best practices the default

這是 Next.js 的開發者 Tim Neutken 所提到的

所以 next/image 其實是由 Google 團隊所建造的，額這個元件，主要用來解決圖片載入效能的問題

那他有哪些特點

改進的效能：始終使用現代圖像格式為每個裝置提供正確大小的圖像，預設就會根據使用者的瀏覽器給予 WebP 或原生的圖片格式
更快的頁面加載：在進入網站時圖片會預先載入或是延遲載入
視覺穩定性：自動防止累計版面配置轉移(CLS)
Asset Flexibility：即使是儲存在遠程服務器上的圖片，也可以按照需求調整圖片大小

CLS 是網頁正處於Loading時，網頁上的元素卻意外的造成移動，而容易產生位移的元素包括：字體、圖像、影片、聯繫表單或是按鈕等。
這也有關 google 的搜尋排名

如何使用 `next/image`

其實很簡單跟 Link Component 一樣只要先從 next/image import 後就可以使用了

import Image from "next/image";

function Page() {
  return (
    <>
      <h1>這是首頁</h1>
      <Image
        src="/home.png"
        alt="這是註解"
        width={300}
        height={300}
      />
      <p>Welcome to my homepage!</p>
    </>
  );
}

export default Page;

`next/Image` 特點介紹

自動轉換圖片格式

因為有些圖片的格式相較比較老舊，且新型的圖片格式例如 WebP 比 JEPG 的檔案格式甚至少了 30%，但這些 next/Image 都幫我們解決了，他可以自動轉換圖片格式的功能，我們不必再做其他設定，預設就會根據使用者的瀏覽器給予 WebP 或原生的圖片格式。

更快的頁面加載

而做到這點的不外乎是 next/Image 幫我們做到了兩個功能

1. 圖片延遲載入 (lazy loading)

因為對於使用者來說在進入網站時的一個畫面載入越少資源越好，這樣不僅網站會快，google 的評分也會好(關係到SEO)，

使用者在瀏覽網站時實際上只需優先載入看到的部分 (viewport)，而尚未看到的部分，就需要使用這滾動畫面，才會載入，這樣就不會進入網站時就直接載入全部的資源，造成網站效能不佳

2. 圖片預先載入 (preload)

因為按照 next/Image 預設的設定是延遲載入圖片的，但是若你的情況是進入網站就要看到圖片的話，一般的做法會使用 <link rel="preload">，並加入到<head> 中，但這樣可能會造成程式碼的複雜，所以他也提供了priority屬性，讓 Next.js 幫我們自動生成 preload 的 <link>

<Image
  src="/home.png"
  alt="這是註解"
  width={300}
  height={300}
  priority={true}
/>

視覺穩定性 (防止CLS)

heigth、width 是很重要的屬性，有設定圖片的長跟寬才能讓瀏覽器避免在載入時不會回流(reflow)，因此降低 Cumulative layout shift (CLS) 的分數，Image component 也需要設置 height 跟 width ，但是這兩個屬性並不會直接影響圖片顯示的長跟寬，而是用來決定圖片的比例