docs: update documentation translations

Author: xiaoyu2er

apps/docs/content/zh-hant/docs/01-app/01-getting-started/04-images.mdx

@@ -1,22 +1,22 @@
 ---
-source-updated-at: 2025-05-22T15:18:56.000Z
-translation-updated-at: 2025-05-25T20:43:27.368Z
+source-updated-at: 2025-06-02T15:30:01.000Z
+translation-updated-at: 2025-06-02T19:01:25.908Z
 title: 如何優化圖片
 nav_title: 圖片
-description: 了解如何在 Next.js 中優化圖片
+description: 學習如何在 Next.js 中優化圖片
 related:
   title: API 參考
   description: 查看 Next.js Image 完整功能的 API 參考文件。
   links:
     - app/api-reference/components/image
 ---
 
-Next.js 的 [`<Image>`](/docs/app/api-reference/components/image) 元件延伸了 HTML `<img>` 元素，提供以下功能：
+Next.js 的 [`<Image>`](/docs/app/api-reference/components/image) 元件擴展了 HTML `<img>` 元素，提供以下功能：
 
-- **尺寸優化：** 自動為每種裝置提供正確尺寸的圖片，並使用 WebP 等現代圖片格式。
+- **尺寸優化：** 自動為每種裝置提供正確尺寸的圖片，使用 WebP 等現代圖片格式。
 - **視覺穩定性：** 在圖片載入時自動防止[版面位移 (layout shift)](https://web.dev/articles/cls)。
-- **更快的頁面載入：** 僅在圖片進入視窗時才載入，使用瀏覽器原生的延遲載入，並可選擇模糊預覽圖。
-- **資源靈活性：** 按需調整圖片大小，即使是儲存在遠端伺服器上的圖片也能處理。
+- **更快的頁面載入：** 僅在圖片進入視窗時載入，使用瀏覽器原生的延遲載入，並可選擇模糊預覽圖。
+- **資源靈活性：** 按需調整圖片大小，即使是遠端伺服器上的圖片也能處理。
 
 要開始使用 `<Image>`，請從 `next/image` 導入並在元件中渲染它。
 
@@ -42,7 +42,7 @@ export default function Page() {
 
 ## 本地圖片
 
-您可以將靜態檔案（如圖片和字體）儲存在根目錄下的 [`public`](/docs/app/api-reference/file-conventions/public-folder) 資料夾中。`public` 內的檔案可以從基本 URL (`/`) 開始在程式碼中引用。
+您可以將靜態檔案（如圖片和字體）存放在根目錄下的 [`public`](/docs/app/api-reference/file-conventions/public-folder) 資料夾中。`public` 內的檔案可以從基礎 URL (`/`) 開始在程式碼中引用。
 
 <Image
   alt="顯示 app 和 public 資料夾的目錄結構"
@@ -60,6 +60,41 @@ export default function Page() {
     <Image
       src="/profile.png"
       alt="作者的照片"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <Image
+      src="/profile.png"
+      alt="作者的照片"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+### 靜態導入圖片
+
+您也可以導入並使用本地圖片檔案。Next.js 會根據導入的檔案自動確定圖片的固有 [`width`](/docs/app/api-reference/components/image#width-and-height) 和 [`height`](/docs/app/api-reference/components/image#width-and-height)。這些值用於確定圖片比例，並在圖片載入時防止[累積版面位移 (Cumulative Layout Shift)](https://web.dev/articles/cls)。
+
+```tsx filename="app/page.tsx" switcher
+import Image from 'next/image'
+import ProfileImage from './profile.png'
+
+export default function Page() {
+  return (
+    <Image
+      src={ProfileImage}
+      alt="作者的照片"
       // width={500} 自動提供
       // height={500} 自動提供
       // blurDataURL="data:..." 自動提供
@@ -71,11 +106,12 @@ export default function Page() {
 
 ```jsx filename="app/page.js" switcher
 import Image from 'next/image'
+import ProfileImage from './profile.png'
 
 export default function Page() {
   return (
     <Image
-      src="/profile.png"
+      src={ProfileImage}
       alt="作者的照片"
       // width={500} 自動提供
       // height={500} 自動提供
@@ -86,11 +122,11 @@ export default function Page() {
 }
 ```
 
-使用本地圖片時，Next.js 會根據導入的檔案自動確定圖片的固有 [`width`](/docs/app/api-reference/components/image#width-and-height) 和 [`height`](/docs/app/api-reference/components/image#width-and-height)。這些值用於確定圖片比例，並在圖片載入時防止[累積版面位移 (Cumulative Layout Shift)](https://web.dev/articles/cls)。
+在這種情況下，Next.js 會預期 `app/profile.png` 檔案是可用的。
 
 ## 遠端圖片
 
-要使用遠端圖片，可以為 `src` 屬性提供一個 URL 字串。
+要使用遠端圖片，您可以為 `src` 屬性提供一個 URL 字串。
 
 ```tsx filename="app/page.tsx" switcher
 import Image from 'next/image'
@@ -122,9 +158,9 @@ export default function Page() {
 }
 ```
 
-由於 Next.js 在構建過程中無法訪問遠端檔案，您需要手動提供 [`width`](/docs/app/api-reference/components/image#width-and-height)、[`height`](/docs/app/api-reference/components/image#width-and-height) 和可選的 [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) 屬性。`width` 和 `height` 用於推斷正確的圖片長寬比，並避免圖片載入時的版面位移。
+由於 Next.js 在建置過程中無法存取遠端檔案，您需要手動提供 [`width`](/docs/app/api-reference/components/image#width-and-height)、[`height`](/docs/app/api-reference/components/image#width-and-height) 和可選的 [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) 屬性。`width` 和 `height` 用於推斷正確的圖片比例，避免圖片載入時的版面位移。
 
-為了安全地允許來自遠端伺服器的圖片，您需要在 [`next.config.js`](/docs/app/api-reference/config/next-config-js) 中定義支持的 URL 模式列表。請盡可能具體以防止惡意使用。例如，以下配置僅允許來自特定 AWS S3 儲存桶的圖片：
+為了安全地允許來自遠端伺服器的圖片，您需要在 [`next.config.js`](/docs/app/api-reference/config/next-config-js) 中定義支援的 URL 模式列表。請盡可能具體以防止惡意使用。例如，以下配置僅允許來自特定 AWS S3 儲存桶的圖片：
 
 ```ts filename="next.config.ts" switcher
 import type { NextConfig } from 'next'