docs: update documentation translations

Author: xiaoyu2er

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

@@ -1,21 +1,21 @@
 ---
-source-updated-at: 2025-05-22T15:18:56.000Z
-translation-updated-at: 2025-05-23T16:44:15.624Z
+source-updated-at: 2025-06-02T15:30:01.000Z
+translation-updated-at: 2025-06-02T19:01:22.562Z
 title: 如何优化图片
 nav_title: 图片
-description: 学习如何在 Next.js 中优化图片
+description: 了解如何在 Next.js 中优化图片
 related:
   title: API 参考
-  description: 查看 Next.js Image 完整功能集的 API 参考文档。
+  description: 查看 Next.js Image 完整功能的 API 参考文档。
   links:
     - app/api-reference/components/image
 ---
 
 Next.js 的 [`<Image>`](/docs/app/api-reference/components/image) 组件扩展了 HTML `<img>` 元素，提供以下功能：
 
-- **尺寸优化**：自动为不同设备提供正确尺寸的图片，并使用 WebP 等现代图片格式。
-- **视觉稳定性**：在图片加载时自动防止[布局偏移 (layout shift)](https://web.dev/articles/cls)。
-- **更快页面加载**：仅当图片进入视口时通过原生浏览器懒加载加载图片，并支持可选的模糊占位图。
+- **尺寸优化**：自动为不同设备提供正确尺寸的图片，使用 WebP 等现代图片格式。
+- **视觉稳定性**：在图片加载时自动防止[布局偏移 (CLS)](https://web.dev/articles/cls)。
+- **更快页面加载**：仅当图片进入视口时通过原生浏览器懒加载进行加载，可选模糊占位图。
 - **资源灵活性**：按需调整图片尺寸，即使是远程服务器存储的图片。
 
 要开始使用 `<Image>`，请从 `next/image` 导入并在组件中渲染它。
@@ -36,16 +36,16 @@ export default function Page() {
 }
 ```
 
-`src` 属性可以是[本地图片](#local-images)或[远程图片](#remote-images)。
+`src` 属性可以是[本地图片](#本地图片)或[远程图片](#远程图片)。
 
-> **🎥 观看视频**：了解更多关于如何使用 `next/image` → [YouTube (9 分钟)](https://youtu.be/IU_qq_c_lKA)。
+> **🎥 观看视频**：了解更多关于如何使用 `next/image` → [YouTube (9分钟)](https://youtu.be/IU_qq_c_lKA)。
 
 ## 本地图片
 
-您可以将静态文件（如图片和字体）存储在根目录下的 [`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 文件夹的目录结构"
+  alt="展示 app 和 public 文件夹结构的示意图"
   srcLight="/docs/light/public-folder.png"
   srcDark="/docs/dark/public-folder.png"
   width="1600"
@@ -59,34 +59,70 @@ export default function Page() {
   return (
     <Image
       src="/profile.png"
-      alt="作者的照片"
+      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)。这些值用于确定图片比例并在加载时防止[累积布局偏移 (CLS)](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:..." 自动提供
-      // placeholder="blur" // 可选加载时的模糊效果
+      // placeholder="blur" // 加载时可选的模糊效果
     />
   )
 }
 ```
 
 ```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"
-      alt="作者的照片"
+      src={ProfileImage}
+      alt="作者照片"
       // width={500} 自动提供
       // height={500} 自动提供
       // blurDataURL="data:..." 自动提供
-      // placeholder="blur" // 可选加载时的模糊效果
+      // placeholder="blur" // 加载时可选的模糊效果
     />
   )
 }
 ```
 
-使用本地图片时，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` 文件是可用的。
 
 ## 远程图片
 
@@ -99,7 +135,7 @@ export default function Page() {
   return (
     <Image
       src="https://s3.amazonaws.com/my-bucket/profile.png"
-      alt="作者的照片"
+      alt="作者照片"
       width={500}
       height={500}
     />
@@ -114,7 +150,7 @@ export default function Page() {
   return (
     <Image
       src="https://s3.amazonaws.com/my-bucket/profile.png"
-      alt="作者的照片"
+      alt="作者照片"
       width={500}
       height={500}
     />