靜態資源

Next.js 可以託管靜態資源，例如圖片，這些資源位於頂層的 public 目錄 下。public 目錄中的檔案可以從應用程式的根目錄引用，類似於 pages 目錄。

public 目錄也適用於存放 robots.txt、Google 網站驗證檔案和其他靜態資源。請參閱 靜態檔案託管 文件以了解更多資訊。

下載個人頭像

首先，讓我們取得您的個人頭像。

• 下載您的個人頭像（.jpg 格式）或 使用此檔案。
• 在 public 目錄 中建立一個 images 資料夾。
• 將圖片儲存為 profile.jpg 並放入 public/images 目錄。
• 圖片尺寸建議約為 400px × 400px。
• 您可以刪除 public 目錄 下未使用的 SVG 標誌檔案。

未優化的圖片

使用傳統的 HTML，您會這樣添加個人頭像：

<img src="/images/profile.jpg" alt="Your Name" />

但這意味著您需要手動處理以下事項：

• 確保圖片在不同螢幕尺寸下能響應式顯示
• 使用第三方工具或函式庫優化圖片
• 僅在圖片進入視窗時才載入

以及其他問題。Next.js 則提供了開箱即用的 Image 元件來為您處理這些問題。

Image 元件與圖片優化

next/image 是 HTML <img> 元素的擴展，專為現代網路設計。

Next.js 還預設支援圖片優化功能。這包括調整大小、優化圖片，並在瀏覽器支援時提供現代格式如 WebP 的圖片。這可以避免向小螢幕裝置傳送過大的圖片，並讓 Next.js 自動採用未來的圖片格式，為支援的瀏覽器提供服務。

自動圖片優化適用於任何圖片來源。即使圖片託管在外部資料源（如 CMS），仍然可以進行優化。

使用 Image 元件

Next.js 不會在構建時優化圖片，而是在使用者請求時按需優化。與靜態網站生成器和純靜態解決方案不同，無論是處理 10 張還是 1000 萬張圖片，您的構建時間都不會增加。

圖片預設為懶加載，這意味著視窗外的圖片不會影響頁面速度。圖片會在滾動進入視窗時才載入。

圖片渲染方式始終避免 累積版面位移 (CLS)，這是 Google 將用於 搜尋排名 的 核心網頁指標 之一。

以下是一個使用 next/image 顯示個人頭像的範例。height 和 width 屬性應設定為期望的渲染尺寸，並與原始圖片的長寬比一致。

注意： 我們將在「完善版面」章節中使用此元件，現在無需複製。

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // 圖片檔案路徑
    height={144} // 符合正確長寬比的期望高度
    width={144} // 符合正確長寬比的期望寬度
    alt="Your Name"
  />
);

要了解更多關於自動圖片優化的資訊，請參閱 文件。

要了解更多關於 Image 元件的資訊，請參閱 next/image API 參考文件。