diff --git a/src/content/docs/ko/guides/images.mdx b/src/content/docs/ko/guides/images.mdx
index 8ca44b954bab0..e6c455dfa3fca 100644
--- a/src/content/docs/ko/guides/images.mdx
+++ b/src/content/docs/ko/guides/images.mdx
@@ -5,14 +5,13 @@ i18nReady: true
 ---
 import Since from '~/components/Since.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
-
 import RecipeLinks from "~/components/RecipeLinks.astro";
 import { Steps } from '@astrojs/starlight/components'
 import ReadMore from '~/components/ReadMore.astro';
 
 Astro는 프로젝트 내부에 로컬로 저장되거나, 외부 URL에서 연결되거나, CMS 또는 CDN에서 관리되는 등 사이트에서 이미지를 사용할 수 있는 여러 가지 방법을 제공합니다.
 
-Astro는 이미지를 최적화하거나 변환하기 위해 [image](#image--컴포넌트를-사용하여-최적화된-이미지-표시) 및 [picture](#picture--컴포넌트를-사용해-반응형-이미지-만들기) 컴포넌트, [Markdown 이미지 구문](#markdown-파일의-이미지) 처리, [SVG 컴포넌트](#svg-컴포넌트), [이미지 생성 함수](#getimage를-사용하여-이미지-생성하기)를 제공합니다.
+Astro는 이미지를 최적화하거나 변환하기 위해 [Image](#image-) 및 [Picture](#picture-) 컴포넌트, [Markdown 이미지 구문](#markdown-파일의-이미지) 처리, [SVG 컴포넌트](#svg-컴포넌트), [이미지 생성 함수](#getimage를-사용하여-이미지-생성하기)를 제공합니다. 또한 기본적으로 [반응형 이미지의 크기를 자동으로 조정](#반응형-이미지-동작)하도록 구성하거나 개별 Image 및 Picutre 컴포넌트에 반응형 속성을 설정할 수 있습니다.
 
 `.astro` 또는 Markdown 파일에서 기본 HTML 요소를 사용하거나, 파일 형식의 표준 방식 (예: MDX 및 JSX의 `<img />`)으로 이미지 및 SVG 파일을 사용할 수 있습니다. 하지만 Astro는 이러한 이미지에 대해 어떠한 처리나 최적화도 수행하지 않습니다.
 
@@ -22,26 +21,42 @@ Astro는 이미지를 최적화하거나 변환하기 위해 [image](#image--컴
 
 ### `src/` vs `public/`
 
-Astro가 이미지를 변환, 최적화, 번들링할 수 있도록 가능하면 로컬 이미지를 `src/`에 보관하는 것이 좋습니다. `/public` 디렉터리의 파일은 처리 없이 항상 있는 그대로 빌드 폴더에 제공되거나 복사됩니다.
+Astro가 이미지를 변환, 최적화, 번들링할 수 있도록 가능하면 로컬 이미지를 `src/`에 보관하는 것이 좋습니다. `public/` 디렉터리의 파일은 처리 없이 항상 있는 그대로 빌드 폴더에 제공되거나 복사됩니다.
 
-`src/`에 저장된 로컬 이미지는 `.astro`, `.md`, `.mdx`, `.mdoc` 및 기타 UI 프레임워크 등 프로젝트의 모든 파일에서 사용할 수 있습니다. 이미지는 콘텐츠 근처를 포함하여 모든 폴더에 저장할 수 있습니다.
+`src/`에 저장된 로컬 이미지는 `.astro`, `.md`, `.mdx`, `.mdoc` 및 기타 UI 프레임워크 등 프로젝트의 모든 파일에서 가져와 사용할 수 있습니다. 이미지는 콘텐츠 근처를 포함하여 모든 폴더에 저장할 수 있습니다.
 
-이미지 처리를 피하거나 이미지에 대한 직접 공개 링크를 갖고 싶다면 `public/` 폴더에 이미지를 저장하세요.
+이미지 처리를 피하려면 `public/` 폴더에 이미지를 저장하세요. 이러한 이미지는 프로젝트 파일에서 도메인의 URL 경로로 사용할 수 있으며 직접 공개 링크를 가질 수 있습니다. 예를 들어 사이트의 파비콘은 일반적으로 브라우저에서 식별할 수 있는 이 폴더의 루트에 배치됩니다.
 
 ### 원격 이미지
 
 또한 [콘텐츠 관리 시스템 (CMS)](/ko/guides/cms/) 또는 [디지털 자산 관리 (DAM)](/ko/guides/media/) 플랫폼에 이미지를 원격으로 저장하도록 선택할 수도 있습니다.
+
 Astro는 API를 사용하여 원격으로 데이터를 가져오거나 전체 URL 경로를 이용하여 이미지를 표시할 수 있습니다.
 
 외부 소스를 다룰 때 추가적인 보호를 위해 Astro의 이미지 컴포넌트와 도우미 함수는 [구성에서 지정한 승인된 이미지 소스](#원격-이미지-승인)의 이미지만 처리 (예: 최적화, 변환)합니다. 다른 소스의 원격 이미지는 처리하지 않고 표시됩니다.
 
 ## `.astro` 파일의 이미지
 
-`.astro` 파일에서 로컬 이미지는 상대 경로에서 가져와야 합니다. 이 가져오기는 이미지의 `src` 값을 제공합니다.
+<p>
+
+**옵션:** `<Image />`, `<Picture />`, `<img>`, `<svg>`, SVG 컴포넌트
+</p>
+
+Astro의 템플릿 언어를 사용하면 [`<Image />`](/ko/reference/modules/astro-assets/#image-) 컴포넌트를 통해 최적화된 이미지를 렌더링할 수 있으며, [`<Picture />`](/ko/reference/modules/astro-assets/#picture-) 컴포넌트를 통해 여러 크기와 형식의 이미지를 생성할 수 있습니다. 두 컴포넌트 모두 컨테이너 크기에 따라 이미지의 크기를 조정하고 기기의 화면 크기와 해상도에 반응하는 [반응형 이미지 속성](#반응형-이미지-동작)을 허용합니다.
+
+또한, `.astro` 컴포넌트에서 [SVG 파일을 Astro 컴포넌트로](#svg-컴포넌트) 가져와 사용할 수 있습니다.
 
-원격 및 `public/` 이미지는 가져오기가 필요하지 않으며 대신 `src`에 대한 URL (사이트의 전체 또는 상대 경로)이 필요합니다.
+`<img>` 및 `<svg>`를 포함한 모든 네이티브 HTML 태그는 `.astro` 컴포넌트에서 사용할 수 있습니다. [HTML 태그를 통해 렌더링된 이미지](#html의-img-태그를-사용하여-처리되지-않은-이미지-표시)는 처리되지 않은 상태 (예: 최적화, 변환 등) 그대로 빌드 폴더에 복사됩니다.
 
-최적화된 이미지를 위해 Astro의 기본 [`<Image />`](#image--컴포넌트를-사용하여-최적화된-이미지-표시) 및 [`<Picture />`](#picture--컴포넌트를-사용해-반응형-이미지-만들기) 컴포넌트를 가져와 사용합니다. Astro 구문에서는 이미지 처리를 생략하기 위해 [HTML `<img>` 태그](#html-img-태그를-사용하여-처리되지-않은-이미지-표시)를 직접 작성할 수도 있습니다.
+`.astro` 파일의 모든 **이미지의 `src` 속성의 값은 이미지 파일의 위치에 의해 결정됩니다**.
+
+- 프로젝트 `src/` 폴더의 로컬 이미지는 파일의 상대 경로에서 가져오기를 사용합니다.
+
+  Image 및 Picture 컴포넌트는 명명된 가져오기를 직접 사용하지만 (예: `src={rocket}`), `<img>` 태그는 가져오기의 `src` 객체 속성을 사용합니다. (예: `src={rocket.src}`)
+
+- 원격 및 `public/` 이미지는 URL 경로를 사용합니다.
+
+  원격 이미지의 경우, 전체 URL을 제공합니다. (예: `src="https://www.example.com/images/my-remote-image.jpg"`) 파일이 `public/` 폴더에 있는 경우, 파일의 위치에 해당하는 사이트의 상대 URL 경로를 제공합니다. (예: 이미지의 위치가 `public/images/my-public-image.jpg`인 경우, `src="/images/my-public-image.jpg"`)
 
 ```astro title="src/pages/blog/my-images.astro"
 ---
@@ -57,13 +72,135 @@ import localBirdImage from '../../images/subfolder/localBirdImage.png';
 <img src="https://example.com/remote-bird.jpg" alt="A bird.">
 ```
 
-<ReadMore>[`<Image />`](/ko/reference/modules/astro-assets/#image-) 및 [`<Picture />`](/ko/reference/modules/astro-assets/#picture-) 컴포넌트의 전체 API 참조를 확인하세요.</ReadMore>
+<ReadMore>[`<Image />`](/ko/reference/modules/astro-assets/#image-) 및 [`<Picture />`](/ko/reference/modules/astro-assets/#picture-) 컴포넌트의 필수 및 선택적 속성을 모두 포함한 전체 API 참조를 확인하세요.</ReadMore>
 
 <RecipeLinks slugs={["ko/recipes/dynamically-importing-images" ]}/>
 
-### `<Image />` 컴포넌트를 사용하여 최적화된 이미지 표시
+## Markdown 파일의 이미지
+
+<p>
+
+**옵션:** `![]()`, `<img>` (공개 및 원격 이미지)
+</p>
+
+`.md` 파일에 표준 Markdown `![alt](src)` 구문을 사용하세요. `src/`에 저장된 로컬 이미지와 원격 이미지는 처리 및 최적화됩니다. [전역 반응형 이미지를 구성](/ko/reference/configuration-reference/#imagelayout)하면 이러한 이미지도 [반응형 이미지](#반응형-이미지-동작)가 됩니다.
+
+`public/` 폴더에 저장된 이미지는 최적화되지 않습니다.
+
+```md
+<!-- src/pages/post-1.md -->
+
+# Markdown 페이지
+
+<!-- src/assets/에 저장된 로컬 이미지 -->
+<!-- 상대 파일 경로 또는 가져오기 별칭 사용 -->
+![별이 빛나는 밤하늘](../assets/stars.png)
+
+<!-- public/images/에 저장된 이미지 -->
+<!-- public/의 상대 파일 경로 사용 -->
+![별이 빛나는 밤하늘](/images/stars.png)
+
+<!-- 다른 서버의 원격 이미지 -->
+<!-- 이미지의 전체 URL 사용 -->
+![Astro](https://example.com/images/remote-image.png)
+```
+
+HTML `<img>` 태그는 `public/`에 저장된 이미지 또는 원격 이미지를 최적화나 처리 없이 표시하는 데 사용할 수도 있습니다. 하지만 `<img>`는 `src`의 로컬 이미지를 지원하지 않습니다.
+
+`<Image />` 및 `<Picture />` 컴포넌트는 `.md` 파일에서 사용할 수 없습니다. 이미지 속성을 보다 세밀하게 제어해야 하는 경우, [Astro의 MDX 통합](/ko/guides/integrations-guide/mdx/)을 사용하여 `.mdx` 파일 형식 지원을 추가하는 것을 권장합니다. MDX는 컴포넌트와 Markdown 구문의 결합과 [MDX의 이미지 옵션](#mdx-파일의-이미지)을 사용할 수 있도록 기능을 추가합니다.
+
+## MDX 파일의 이미지
+
+<p>
+
+**옵션:** `<Image />`, `<Picture />`, `<img />`, `![]()`, SVG 컴포넌트
+</p>
+
+`.mdx` 파일에서 이미지와 Astro의 `<Image />` 및 `<Picture />` 컴포넌트를 모두 가져와 사용할 수 있습니다. [`.astro` 파일에서 사용하는 것](#astro-파일의-이미지)처럼 사용하면 됩니다. JSX의 `<img />` 태그는 처리되지 않은 이미지도 지원하며 [HTML의 `<img>` 태그와 동일한 이미지 가져오기를 사용](#html의-img-태그를-사용하여-처리되지-않은-이미지-표시)합니다.
+
+또한, 가져오기가 필요없는 [표준 Markdown `![alt](src)` 구문](#markdown-파일의-이미지)도 지원합니다.
+
+```mdx title="src/pages/post-1.mdx"
+---
+title: 페이지 제목
+---
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
+
+# MDX 페이지
+
+// 동일한 폴더에 저장된 로컬 이미지
+![야생의 휴스턴](houston.png)
+
+// src/assets/에 저장된 로컬 이미지
+<Image src={rocket} alt="우주에 떠 있는 로켓선" />
+<img src={rocket.src} alt="우주에 떠 있는 로켓선" />
+![우주에 떠 있는 로켓선](../assets/rocket.png)
+
+// public/images/에 저장된 이미지
+<Image src="/images/stars.png" alt="별이 빛나는 밤하늘" />
+<img src="/images/stars.png" alt="별이 빛나는 밤하늘" />
+![별이 빛나는 밤하늘](/images/stars.png)
+
+// 다른 서버의 원격 이미지
+<Image src="https://example.com/images/remote-image.png" />
+<img src="https://example.com/images/remote-image.png" />
+![Astro](https://example.com/images/remote-image.png)
+```
+
+<ReadMore>[`<Image />`](/ko/reference/modules/astro-assets/#image-) 및 [`<Picture />`](/ko/reference/modules/astro-assets/#picture-) 컴포넌트의 전체 API 참조를 확인하세요.</ReadMore>
+
+## UI 프레임워크 컴포넌트의 이미지
+
+<p>
+
+**이미지 옵션:** 프레임워크 자체 이미지 구문 (예: JSX의 `<img />`, Svelte의 `<img>`)
+</p>
+
+`src`와 같은 이미지 속성에 접근하기 위해 [로컬 이미지를 먼저 가져와야 합니다.](#html의-img-태그를-사용하여-처리되지-않은-이미지-표시) 그러면 프레임워크의 자체 이미지 구문을 사용하여 이미지를 렌더링할 수 있습니다.
+
+```jsx title="src/components/ReactImage.jsx"
+import stars from "../assets/stars.png";
+
+export default function ReactImage() {
+  return (
+    <img src={stars.src} alt="별이 빛나는 밤하늘" />
+  )
+}
+```
+
+```svelte title="src/components/SvelteImage.svelte"
+<script>
+  import stars from '../assets/stars.png';
+</script>
+
+<img src={stars.src} alt="별이 빛나는 밤하늘" />
+
+```
+
+[클라이언트 아일랜드는 프레임워크 자신의 유효한 코드를 포함해야 하므로](/ko/guides/framework-components/#프레임워크-컴포넌트에서-astro-컴포넌트를-사용할-수-있나요), UI 프레임워크 컴포넌트에서 Astro 컴포넌트 (예: `<Image />`, `<Picture />`, SVG 컴포넌트)를 사용할 수 없습니다.
+
+하지만, 이러한 컴포넌트에서 생성된 정적 콘텐츠를 `.astro` 파일 내부에 있는 프레임워크 컴포넌트에 [자식으로](/ko/guides/framework-components/#프레임워크-컴포넌트에-자식-요소-전달) 전달하거나 [명명된 `<slot/>`](/ko/guides/framework-components/#프레임워크-컴포넌트에서-astro-컴포넌트를-사용할-수-있나요)을 사용하여 전달할 수 있습니다.
+
+```astro title="src/components/ImageWrapper.astro"
+---
+import ReactComponent from './ReactComponent.jsx';
+import { Image } from 'astro:assets';
+import stars from '~/stars/docline.png';
+---
+
+<ReactComponent>
+  <Image src={stars} alt="별이 빛나는 밤하늘" />
+</ReactComponent>
+```
+
+## Astro 컴포넌트의 이미지
 
-기본으로 제공되는 `<Image />` Astro 컴포넌트를 사용하여 다음의 최적화된 버전을 표시합니다:
+Astro는 이미지를 위한 두 가지 내장 컴포넌트 (`<Image />` 및 `<Picture />`)를 제공하며, SVG 파일을 가져와 Astro 컴포넌트로 사용할 수도 있습니다. 이러한 컴포넌트는 `.astro` 컴포넌트를 가져와 렌더링할 수 있는 모든 파일에서 사용할 수 있습니다.
+
+### `<Image />`
+
+기본으로 제공되는 `<Image />` Astro 컴포넌트를 사용하여 다음의 최적화된 버전을 표시합니다.
 
 - `src/` 폴더에 있는 로컬 이미지
 - 인증된 소스에서 가져오는 [구성된 원격 이미지](#원격-이미지-승인)
@@ -82,7 +219,7 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
 ---
 
 <!-- 이미지 컴포넌트에서는 'alt'가 필수입니다. -->
-<Image src={myImage} alt="A description of my image." />
+<Image src={myImage} alt="이미지 설명" />
 ```
 
 ```html
@@ -94,7 +231,7 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
   height="900"
   decoding="async"
   loading="lazy"
-  alt="A description of my image."
+  alt="이미지 설명"
 />
 
 <!-- 요청 시 렌더링되는 출력 -->
@@ -138,11 +275,14 @@ import myImage from '../assets/my_image.png';
 
 그러나 모든 이미지에 이미지 컴포넌트를 사용하면 일관된 저작 환경을 제공하고 최적화되지 않은 이미지의 경우에도 누적 레이아웃 이동 (CLS)을 방지할 수 있습니다.
 :::
-### `<Picture />` 컴포넌트를 사용해 반응형 이미지 만들기
+
+### `<Picture />`
 
 <p><Since v="3.3.0" /></p>
 
-다양한 형식 및 크기로 반응형 이미지를 표시하려면 내장된 `<Picture />` Astro 컴포넌트를 사용하세요. [`<Image />` 컴포넌트](#image--컴포넌트를-사용하여-최적화된-이미지-표시)와 마찬가지로, 이미지는 사전 렌더링된 페이지의 빌드 시 처리됩니다. 페이지가 요청 시 렌더링될 때, 페이지가 보여질 때 즉시 처리됩니다.
+Astro의 내장 `<Picture />` 컴포넌트를 사용하여 이미지의 여러 형식 및/또는 크기가 포함된 `<picture>` 태그를 생성할 수 있습니다. 이를 통해 표시할 기본 파일 형식을 지정하면서, 대체 형식을 제공할 수 있습니다. [`<Image />` 컴포넌트](#image-)와 마찬가지로 미리 렌더링된 페이지에서는 이미지가 빌드 시 처리됩니다. 페이지가 요청 시 렌더링되는 경우에는 페이지가 표시될 때 즉시 처리됩니다.
+
+다음은 `<Picture />` 컴포넌트를 사용하여 로컬 `.png` 파일을 웹 친화적인 `avif` 및 `webp` 형식과 필요 시 대체로 표시할 수 있는 `.png` `<img>`로 변환하는 예시입니다.
 
 ```astro title="src/pages/index.astro"
 ---
@@ -154,7 +294,7 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
 <Picture
   src={myImage}
   formats={['avif', 'webp']}
-  alt="A description of my image."
+  alt="이미지 설명"
 />
 ```
 
@@ -169,117 +309,101 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
     height="900"
     decoding="async"
     loading="lazy"
-    alt="A description of my image."
+    alt="이미지 설명"
   />
 </picture>
 ```
 
 <ReadMore>[`<Picture />` 컴포넌트의 속성](/ko/reference/modules/astro-assets/#picture-속성)에 대한 자세한 내용은 `astro:assets` 참조에서 알아보세요.</ReadMore>
 
-### HTML `<img>` 태그를 사용하여 처리되지 않은 이미지 표시
-
-[Astro 템플릿 구문](/ko/reference/astro-syntax/)은 최종 출력에 대한 완전한 제어를 위해 `<img>` 태그를 직접 작성하는 것도 지원합니다. 이러한 이미지는 처리 및 최적화되지 않습니다. 모든 HTML `<img>` 태그 속성을 허용하며, 필수 속성은 `src`뿐입니다.
-
-로컬 이미지는 기존 `.astro` 파일의 상대 경로에서 가져오거나 [가져오기 별칭](/ko/guides/imports/#별칭)을 구성하여 사용할 수 있습니다. 그런 다음 이미지의 `src` 및 기타 속성에 액세스하여 `<img>` 태그에 사용할 수 있습니다.
-
-가져온 이미지 자산은 다음 시그니처와 일치합니다:
-
-```ts
-interface ImageMetadata {
-  src: string;
-  width: number;
-  height: number;
-  format: string;
-}
-```
-
-다음 예시는 이미지 자체의 `height` 및 `width` 속성을 사용하여 누적 레이아웃 이동 (CLS)을 방지하고 핵심 웹 바이탈을 개선합니다:
+### 반응형 이미지 동작
 
-```astro title="src/pages/posts/post-1.astro" "myDog.width" "myDog.height"
----
-// 로컬 이미지 가져오기
-import myDog from '../../images/pets/local-dog.jpg';
----
-// 이미지 속성에 액세스
-<img src={myDog.src} width={myDog.width} height={myDog.height} alt="A barking dog." />
-```
+<p><Since v="5.10.0" /></p>
 
-#### `public/`의 이미지
+반응형 이미지는 다양한 기기에서 성능을 개선하기 위해 조정되는 이미지입니다. 이러한 이미지는 컨테이너에 맞게 크기가 조정될 수 있으며 방문자의 화면 크기와 해상도에 따라 다양한 크기로 제공될 수 있습니다.
 
-`public/`에 있는 이미지의 경우 `src` 값으로 이미지의 public 폴더에 상대적인 파일 경로를 사용합니다.
+`<Image />` 또는 `<Picture />` 컴포넌트에 [반응형 이미지 속성](/ko/reference/modules/astro-assets/#반응형-이미지-속성)을 적용하면 Astro는 이미지에 필요한 `srcset` 및 `sizes` 값을 생성하고 필요한 [스타일을 적용하여 이미지 크기가 올바르게 조정](#반응형-이미지-스타일)되도록 합니다.
 
-```astro '"/images/public-cat.jpg"'
-<img src="/images/public-cat.jpg" alt="A sleeping cat." >
-```
+이 반응형 동작이 [전역적으로 구성](/ko/reference/configuration-reference/#imagelayout)되면 모든 이미지 컴포넌트와 [Markdown의 `![]()` 구문](/ko/guides/images/#markdown-파일의-이미지)을 사용하는 모든 로컬 및 원격 이미지에 적용됩니다.
 
-#### 원격 이미지
+`public/` 폴더에 있는 이미지는 최적화되지 않으며 반응형 이미지도 지원되지 않습니다.
 
-원격 이미지의 경우 이미지의 전체 URL을 `src` 값으로 사용하세요.
-
-```astro '"https://example.com/remote-cat.jpg"'
-<img src="https://example.com/remote-cat.jpg" alt="A sleeping cat." >
-```
-
-### `<Image />` vs `<img>` 선택
+:::note
+하나의 반응형 이미지가 다양한 크기의 여러 이미지를 생성하여 브라우저에서 방문자에게 가장 적합한 이미지를 표시할 수 있도록 합니다.
 
-`<Image />` 컴포넌트는 이미지를 최적화하고 CLS를 방지하기 위해 원본 가로 세로 비율을 기반으로 (처리할 수 있는 이미지의 경우) 너비와 높이를 추론합니다. 가능하면 `.astro` 파일로 이미지를 사용하는 것이 좋습니다.
+미리 렌더링된 페이지의 경우, 빌드 시 이 작업이 실행됩니다. 특히 이미지 수가 많은 경우 프로젝트의 빌드 시간이 늘어날 수 있습니다.
 
-`<Image />` 컴포넌트를 사용할 수 없는 경우 HTML `<img>` 요소를 사용하세요. 예를 들면 다음과 같습니다.
-  - 지원되지 않는 이미지 형식의 경우
-  - Astro로 이미지 최적화를 원하지 않는 경우
-  - 클라이언트 측에서 `src` 속성에 동적으로 액세스하고 변경하려는 경우
+요청 시 렌더링되는 페이지의 경우, 페이지가 방문될 때 필요에 따라 이미지가 생성됩니다. 이렇게 하면 빌드 시간에는 영향을 미치지 않지만 이미지가 표시될 때 수행되는 이미지 변환 횟수가 증가할 수 있습니다. 이미지 서비스에 따라 추가 비용이 발생할 수 있습니다.
+:::
 
-### 기본값 설정
+<ReadMore>[MDN 웹 문서에서 반응형 이미지](https://developer.mozilla.org/ko/docs/Web/HTML/Guides/Responsive_images)에 대해 자세히 알아보세요.</ReadMore>
 
-현재 모든 `<Image />` 또는 `<Picture/>` 컴포넌트에 대한 기본값을 지정할 수 있는 방법은 없습니다. 필수 속성은 각 개별 컴포넌트에 설정되어야 합니다.
+#### 생성된 반응형 이미지 HTML 출력
 
-대안으로 재사용을 위해 이러한 컴포넌트를 다른 Astro 컴포넌트로 래핑할 수 있습니다. 예를 들어 속성을 props로 전달받고 각 이미지에 일관된 스타일을 적용하는 블로그 게시물 이미지 컴포넌트를 만들 수 있습니다.
+레이아웃이 기본적으로 또는 개별 컴포넌트에 설정되면, 이미지의 크기와 레이아웃 유형에 따라 이미지에 `srcset` 및 `sizes` 속성이 자동으로 생성됩니다. `constrained` 및 `full-width` 레이아웃을 사용하는 이미지에는 컨테이너에 따라 크기를 조정하기 위한 스타일이 적용됩니다.
 
-```astro title="src/components/BlogPostImage.astro"
+```astro title="src/components/MyComponent.astro"
 ---
 import { Image } from 'astro:assets';
-
-const { src, ...attrs } = Astro.props;
+import myImage from '../assets/my_image.png';
 ---
-<Image src={src} {...attrs} />
+<Image src={myImage} alt="이미지 설명" layout='constrained' width={800} height={600} />
+```
 
-<style>
-  img {
-    margin-block: 2.5rem;
-    border-radius: 0.75rem;
-  }
-</style>
+이 `<Image />` 컴포넌트는 미리 렌더링된 페이지에 다음과 같은 HTML 출력을 생성합니다.
+
+```html
+<img
+  src="/_astro/my_image.hash3.webp"
+  srcset="/_astro/my_image.hash1.webp 640w,
+      /_astro/my_image.hash2.webp 750w,
+      /_astro/my_image.hash3.webp 800w,
+      /_astro/my_image.hash4.webp 828w,
+      /_astro/my_image.hash5.webp 1080w,
+      /_astro/my_image.hash6.webp 1280w,
+      /_astro/my_image.hash7.webp 1600w"
+  alt="이미지 설명"
+  sizes="(min-width: 800px) 800px, 100vw"
+  loading="lazy"
+  decoding="async"
+  fetchpriority="auto"
+  width="800"
+  height="600"
+  style="--fit: cover; --pos: center;"
+  data-astro-image="constrained"
+>
 ```
 
-### 원격 이미지 승인
+#### 반응형 이미지 스타일
 
-[`image.domains`](/ko/reference/configuration-reference/#imagedomains) 및 [`image.remotePatterns`](/ko/reference/configuration-reference/#imageremotepatterns)을 사용하여 이미지 최적화를 위해 인증된 이미지 소스 URL 도메인 및 패턴 목록을 구성할 수 있습니다. 이 구성은 외부 소스의 이미지를 표시할 때 사이트를 보호하기 위한 추가 안전 계층입니다.
+[`image.responsiveStyles: true`](/ko/reference/configuration-reference/#imageresponsivestyles)를 설정하면 이미지 크기가 올바르게 조정되도록 몇 가지 전역 스타일을 적용합니다. 대부분의 경우 이 구성을 기본적으로 활성화하는게 좋습니다. 추가 스타일이 없으면 이미지가 반응형으로 동작하지 않습니다.
 
-다른 소스의 원격 이미지는 최적화되지 않지만 이러한 이미지에 `<Image />` 컴포넌트를 사용하면 CLS (Cumulative Layout Shift)가 방지됩니다.
+하지만 반응형 이미지 스타일을 직접 처리하고 싶거나, [Tailwind 4를 사용할 때 이러한 기본값을 재정의해야 하는 경우](#tailwind-4와-반응형-이미지)에는 기본값인 `false`를 유지하세요.
 
-예를 들어 다음 구성에서는 `astro.build`의 원격 이미지만 최적화할 수 있습니다.
+Astro에 적용되는 전역 스타일은 레이아웃 유형에 따라 달라지며, 생성된 `srcset` 및 `sizes` 속성에 가장 적합한 결과를 생성하도록 설계되었습니다. 기본 스타일은 다음과 같습니다.
 
-```ts
-// astro.config.mjs
-export default defineConfig({
-  image: {
-    domains: ["astro.build"],
-  }
-});
+```css title="Responsive Image Styles"
+:where([data-astro-image]) {
+	object-fit: var(--fit);
+	object-position: var(--pos);
+}
+:where([data-astro-image='full-width']) {
+	width: 100%;
+}
+:where([data-astro-image='constrained']) {
+	max-width: 100%;
+}
 ```
 
-다음 구성은 HTTPS 호스트의 원격 이미지만 허용합니다.
+스타일은 [특이도](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascade/Specificity)가 0인 [`:where()` 의사 클래스](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)를 사용하므로 고유한 스타일로 쉽게 재정의할 수 있습니다. 모든 CSS 선택자는 `:where()`보다 특이도가 높으므로 이미지에 고유 스타일을 추가하여 스타일을 쉽게 재정의할 수 있습니다.
 
-```ts
-// astro.config.mjs
-export default defineConfig({
-  image: {
-    remotePatterns: [{ protocol: "https" }],
-  }
-});
-```
+`<Image />` 또는 `<Picture />` 컴포넌트에서 `fit`과 `position` props를 설정하여 이미지별로 `object-fit` 및 `object-position` 스타일을 재정의할 수 있습니다.
 
-## SVG 컴포넌트
+#### Tailwind 4와 반응형 이미지
+
+Tailwind 4는 Astro의 기본 반응형 스타일과 호환됩니다. 그러나 Tailwind는 [캐스케이드 레이어](https://developer.mozilla.org/ko/docs/Web/CSS/@layer)를 사용하므로 이 규칙은 항상 레이어를 사용하지 않는 규칙보다 특이성이 낮으며, 여기에는 Astro의 반응형 스타일도 포함됩니다. 따라서 Astro의 스타일링이 Tailwind 스타일링보다 우선합니다. Astro의 기본 스타일링 대신 Tailwind 규칙을 사용하려면 [Astro의 기본 반응형 스타일](/ko/reference/configuration-reference/#imageresponsivestyles)을 비활성화 하세요.
+
+### SVG 컴포넌트
 <p><Since v="5.7.0" /></p>
 
 Astro를 사용하면 SVG 파일을 가져와서 Astro 컴포넌트처럼 사용할 수 있습니다. Astro는 SVG의 콘텐츠를 HTML 출력에 인라인으로 삽입합니다.
@@ -296,7 +420,7 @@ import Logo from './path/to/svg/file.svg';
 
 `<Image />` 또는 다른 Astro 컴포넌트와 마찬가지로 SVG 컴포넌트는 UI 프레임워크 컴포넌트에서는 사용할 수 없지만, `.astro` 컴포넌트에서 [프레임워크 컴포넌트로 전달](#ui-프레임워크-컴포넌트의-이미지)할 수 있습니다.
 
-### SVG 컴포넌트 속성
+#### SVG 컴포넌트 속성
 
 `width`, `height`, `fill`, `stroke`와 같은 props와 [기본 `<svg>` 요소](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)에서 허용하는 다른 모든 속성을 전달할 수 있습니다. 이러한 속성은 자동으로 내부 `<svg>` 요소에 적용됩니다. 원본 `.svg` 파일에 속성이 있지만, 속성이 컴포넌트에 전달되면, 컴포넌트에 전달된 값이 원본 값을 덮어씁니다.
 
@@ -309,76 +433,119 @@ import Logo from '../assets/logo.svg';
 <Logo width={64} height={64} fill="currentColor" />
 ```
 
-## CMS 또는 CDN의 이미지 사용
+### 사용자 정의 이미지 컴포넌트 만들기
 
-이미지 CDN은 [모든 Astro 이미지 옵션](#astro-파일의-이미지)에서 작동합니다. 이미지의 전체 URL을 `<Image />` 컴포넌트, `<img>` 태그 또는 Markdown 표기법에서 `src` 속성으로 사용하세요. 원격 이미지로 이미지를 최적화하려면 [승인된 도메인 또는 URL 패턴을 구성](#원격-이미지-승인)하세요.
+`<Image />` 또는 `<Picture/>` 컴포넌트를 다른 Astro 컴포넌트로 래핑하여 재사용 가능한 사용자 정의 이미지 컴포넌트를 만들 수 있습니다. 이렇게 하면 기본 속성과 스타일을 한 번만 설정할 수 있습니다.
 
-또는 CDN이 자체 SDK를 제공하여 Astro 프로젝트에 더 쉽게 통합할 수도 있습니다. 예를 들어, Cloudinary는 이미지를 `CldImage` 컴포넌트에 쉽게 넣을 수 있는 [Astro SDK](https://astro.cloudinary.dev/) 또는 Node.js 환경에서 `<img>` 태그와 함께 사용할 URL을 생성할 수 있는 [Node.js SDK](https://cloudinary.com/documentation/node_integration)를 지원합니다.
+예를 들어, props로 속성을 받아 각 이미지에 일관된 스타일을 적용하는 블로그 게시물 이미지용 컴포넌트를 만들 수 있습니다.
 
-<ReadMore>[`<Image />`](/ko/reference/modules/astro-assets/#image-) 및 [`<Picture />`](/ko/reference/modules/astro-assets/#picture-) 컴포넌트의 전체 API 참조를 확인하세요.</ReadMore>
+```astro title="src/components/BlogPostImage.astro"
+---
+import { Image } from 'astro:assets';
 
-## Markdown 파일의 이미지
+const { src, ...attrs } = Astro.props;
+---
+<Image src={src} {...attrs} />
+
+<style>
+  img {
+    margin-block: 2.5rem;
+    border-radius: 0.75rem;
+  }
+</style>
+```
 
-`.md` 파일에 표준 Markdown `![alt](src)` 구문을 사용하세요. 이 구문은 Astro의 [이미지 서비스 API](/ko/reference/image-service-reference/)와 함께 작동하여 `src/`에 저장된 로컬 이미지와 원격 이미지를 최적화합니다. `public/` 폴더에 저장된 이미지는 절대 최적화되지 않습니다.
+## HTML의 `<img>` 태그를 사용하여 처리되지 않은 이미지 표시
 
-```md
-<!-- src/pages/post-1.md -->
+[Astro 템플릿 구문](/ko/reference/astro-syntax/)은 최종 출력에 대한 완전한 제어를 위해 `<img>` 태그를 직접 작성하는 것도 지원합니다. 이러한 이미지는 처리 및 최적화되지 않습니다. 모든 HTML `<img>` 태그 속성을 허용하며, 필수 속성은 `src`뿐입니다. 그러나 [접근성을 위한 `alt` 속성](#대체-텍스트)을 포함할 것을 강력히 권장합니다.
 
-# My Markdown Page
+### `src/`의 이미지
 
-<!-- src/assets/에 저장된 로컬 이미지 -->
-<!-- 상대 파일 경로 또는 가져오기 별칭 사용 -->
-![A starry night sky.](../assets/stars.png)
+로컬 이미지는 기존 `.astro` 파일의 상대 경로에서 가져오거나 [가져오기 별칭](/ko/guides/imports/#별칭)을 구성하여 사용할 수 있습니다. 그런 다음 이미지의 `src` 및 기타 속성에 액세스하여 `<img>` 태그에 사용할 수 있습니다.
 
-<!-- public/images/에 저장된 이미지 -->
-<!-- public/에 상대적인 파일 경로를 사용 -->
-![A starry night sky.](/images/stars.png)
+가져온 이미지 자산은 다음 시그니처와 일치합니다.
 
-<!-- 다른 서버의 원격 이미지 -->
-<!-- 이미지의 전체 URL을 사용 -->
-![Astro](https://example.com/images/remote-image.png)
+```ts
+interface ImageMetadata {
+  src: string;
+  width: number;
+  height: number;
+  format: string;
+}
 ```
 
-HTML `<img>` 태그는 `public/`에 저장된 이미지 또는 원격 이미지를 이미지 최적화나 처리 없이 표시하는 데 사용할 수도 있습니다. 하지만 `<img>`는 `src`에 있는 로컬 이미지에 대해서는 지원되지 않습니다.
+다음 예시는 이미지 자체의 `height` 및 `width` 속성을 사용하여 누적 레이아웃 이동 (CLS)을 방지하고 핵심 웹 바이탈을 개선합니다.
 
-`<Image />` 및 `<Picture />` 컴포넌트는 `.md` 파일에서 사용할 수 없습니다. 이미지 속성을 보다 세밀하게 제어해야 하는 경우, [Astro의 MDX 통합](/ko/guides/integrations-guide/mdx/)을 사용하여 `.mdx` 파일 형식에 대한 지원을 추가하는 것을 권장합니다. MDX는 컴포넌트와 Markdown 구문을 결합하는 것을 포함하여 [MDX의 이미지 옵션](#mdx-파일의-이미지)을 추가로 사용할 수 있도록 합니다.
+```astro title="src/pages/posts/post-1.astro" "myDog.width" "myDog.height"
+---
+// 로컬 이미지 가져오기
+import myDog from '../../images/pets/local-dog.jpg';
+---
+// 이미지 속성에 액세스
+<img src={myDog.src} width={myDog.width} height={myDog.height} alt="짖고있는 개" />
+```
 
-## MDX 파일의 이미지
+### `public/`의 이미지
 
-컴포넌트와 이미지를 모두 가져와 `.mdx` 파일에서 Astro의 `<Image />` 및 `<Picture />` 컴포넌트를 사용할 수 있습니다. [`.astro` 파일에서 사용되는 것](#astro-파일의-이미지)처럼 사용하세요. JSX `<img />` 태그는 처리되지 않은 이미지에도 지원되며 [HTML `<img>` 태그와 동일한 이미지 가져오기를 사용](#html-img-태그를-사용하여-처리되지-않은-이미지-표시)합니다.
+`public/`에 있는 이미지의 경우 `src` 값으로 이미지의 public 폴더에 상대적인 파일 경로를 사용합니다.
 
-또한 가져오기가 필요 없는 [표준 Markdown `![alt](src)` 구문](#markdown-파일의-이미지)이 지원됩니다.
+```astro '"/images/public-cat.jpg"'
+<img src="/images/public-cat.jpg" alt="자고있는 고양이" >
+```
 
-```mdx title="src/pages/post-1.mdx"
----
-title: My Page title
----
-import { Image } from 'astro:assets';
-import rocket from '../assets/rocket.png';
+### 원격 이미지
 
-# My MDX Page
+원격 이미지의 경우 이미지의 전체 URL을 `src` 값으로 사용하세요.
 
-// 동일한 폴더에 저장된 로컬 이미지
-![Houston in the wild](houston.png)
+```astro '"https://example.com/remote-cat.jpg"'
+<img src="https://example.com/remote-cat.jpg" alt="자고있는 고양이" >
+```
 
-// src/assets/에 저장된 로컬 이미지
-<Image src={rocket} alt="A rocketship in space." />
-<img src={rocket.src} alt="A rocketship in space." />
-![A rocketship in space](../assets/rocket.png)
+### `<Image />` vs `<img>` 선택
 
-// public/images/에 저장된 이미지
-<Image src="/images/stars.png" alt="A starry night sky." />
-<img src="/images/stars.png" alt="A starry night sky." />
-![A starry night sky.](/images/stars.png)
+`<Image />` 컴포넌트는 CLS를 방지하기 위해 이미지를 최적화하고 원본 가로 및 세로 비율을 기반으로 (처리할 수 있는 이미지의 경우) 너비와 높이를 추론합니다. 가능하면 `.astro` 파일에서 이미지를 사용하는 것이 좋습니다.
 
-// 다른 서버의 원격 이미지
-<Image src="https://example.com/images/remote-image.png" />
-<img src="https://example.com/images/remote-image.png" />
-![Astro](https://example.com/images/remote-image.png)
-```
+`<Image />` 컴포넌트를 사용할 수 없는 경우 HTML의 `<img>` 요소를 사용하세요. 예를 들면 다음과 같습니다.
+  - 지원되지 않는 이미지 형식의 경우
+  - Astro의 이미지 최적화를 원하지 않는 경우
+  - 클라이언트 측에서 `src` 속성에 동적으로 접근하여 변경하는 경우
+
+## CMS 또는 CDN의 이미지 사용
+
+이미지 CDN은 [모든 Astro 이미지 옵션](#astro-파일의-이미지)에서 작동합니다. 이미지의 전체 URL을 `<Image />` 컴포넌트, `<img>` 태그 또는 Markdown 표기법에서 `src` 속성으로 사용하세요. 원격 이미지를 최적화하려면 [승인된 도메인 또는 URL 패턴을 구성](#원격-이미지-승인)하세요.
+
+또는 CDN이 자체 SDK를 제공하여 Astro 프로젝트에 더 쉽게 통합할 수도 있습니다. 예를 들어, Cloudinary는 이미지를 `CldImage` 컴포넌트에 쉽게 넣을 수 있는 [Astro SDK](https://astro.cloudinary.dev/) 또는 Node.js 환경에서 `<img>` 태그와 함께 사용할 URL을 생성할 수 있는 [Node.js SDK](https://cloudinary.com/documentation/node_integration)를 지원합니다.
 
 <ReadMore>[`<Image />`](/ko/reference/modules/astro-assets/#image-) 및 [`<Picture />`](/ko/reference/modules/astro-assets/#picture-) 컴포넌트의 전체 API 참조를 확인하세요.</ReadMore>
 
+## 원격 이미지 승인
+
+이미지 최적화를 위해 [`image.domains`](/ko/reference/configuration-reference/#imagedomains) 및 [`image.remotePatterns`](/ko/reference/configuration-reference/#imageremotepatterns)를 사용하여 승인된 이미지 소스 URL 도메인 및 패턴 목록을 구성할 수 있습니다. 이 구성은 외부 소스의 이미지를 표시할 때 사이트를 보호하기 위한 추가 안전 계층입니다.
+
+다른 소스의 원격 이미지는 최적화되지 않지만 이러한 이미지에 `<Image />` 컴포넌트를 사용하면 CLS (Cumulative Layout Shift)를 방지할 수 있습니다.
+
+예를 들어 다음 구성은 `astro.build`의 원격 이미지만 최적화할 수 있습니다.
+
+```ts
+// astro.config.mjs
+export default defineConfig({
+  image: {
+    domains: ["astro.build"],
+  }
+});
+```
+
+다음 구성은 HTTPS 호스트의 원격 이미지만 허용합니다.
+
+```ts
+// astro.config.mjs
+export default defineConfig({
+  image: {
+    remotePatterns: [{ protocol: "https" }],
+  }
+});
+```
+
 ## 콘텐츠 컬렉션의 이미지
 
 콘텐츠 컬렉션의 이미지는 사용 중인 파일 형식에 따라 [Markdown](#markdown-파일의-이미지) 및 [MDX](#mdx-파일의-이미지)에서와 동일한 방식으로 처리됩니다.
@@ -413,9 +580,9 @@ export const collections = {
 };
 ```
 
-이미지를 가져와서 메타데이터로 변환하므로 이를 `<Image/>`, `<img>`, `getImage()`에 `src`로 전달할 수 있습니다.
+이미지를 가져와서 메타데이터로 변환하므로 이를 Astro 컴포넌트에 있는 `<Image/>`, `<img>`, `getImage()`에 `src`로 전달할 수 있습니다.
 
-아래 예시는 위 스키마에서 각 블로그 게시물의 표지 사진과 제목을 렌더링하는 블로그 인덱스 페이지를 보여줍니다.
+아래 예시는 이전 스키마에서 각 블로그 게시물의 표지 사진과 제목을 렌더링하는 블로그 인덱스 페이지를 보여줍니다.
 
 ```astro title="src/pages/blog.astro" {10}
 ---
@@ -436,47 +603,6 @@ const allBlogPosts = await getCollection("blog");
 }
 ```
 
-## UI 프레임워크 컴포넌트의 이미지
-
-다른 Astro 컴포넌트와 마찬가지로 `<Image />` 컴포넌트는 UI 프레임워크 컴포넌트에서 사용할 수 없습니다.
-
-그러나 `<Image />`에서 생성된 정적 콘텐츠를 `.astro` 파일의 프레임워크 컴포넌트에 [자식으로](/ko/guides/framework-components/#프레임워크-컴포넌트에-자식-요소-전달) 전달하거나 [명명된 `<slot/>`](/ko/guides/framework-components/#프레임워크-컴포넌트에서-astro-컴포넌트를-사용할-수-있나요)]을 사용하여 전달할 수 있습니다:
-
-```astro title="src/components/ImageWrapper.astro"
----
-import ReactComponent from './ReactComponent.jsx';
-import { Image } from 'astro:assets';
-import stars from '~/stars/docline.png';
----
-
-<ReactComponent>
-  <Image src={stars} alt="A starry night sky." />
-</ReactComponent>
-```
-
-또한 프레임워크의 자체 이미지 구문을 사용하여 이미지를 렌더링할 수 있습니다 (예: JSX의 `<img />`, Svelte의 `<img>`).
-
-`src`와 같은 이미지 속성에 액세스하려면 [로컬 이미지를 먼저 가져와야 합니다](#html-img-태그를-사용하여-처리되지-않은-이미지-표시).
-
-```jsx title="src/components/ReactImage.jsx"
-import stars from "../assets/stars.png";
-
-export default function ReactImage() {
-  return (
-    <img src={stars.src} alt="A starry night sky." />
-  )
-}
-```
-
-```svelte title="src/components/SvelteImage.svelte"
-<script>
-  import stars from '../assets/stars.png';
-</script>
-
-<img src={stars.src} alt="A starry night sky." />
-
-```
-
 ## `getImage()`를 사용하여 이미지 생성하기
 
 `getImage()` 함수는 HTML이 아닌 다른 곳 (예: [API 경로](/ko/guides/endpoints/#서버-엔드포인트-api-라우트))에서 사용할 이미지를 생성하기 위한 것입니다. 현재 `<Picture>` 및 `<Image>` 컴포넌트가 지원하지 않는 옵션이 필요한 경우, `getImage()` 함수를 사용하여 사용자 정의 `<Image />` 컴포넌트를 생성할 수 있습니다.
diff --git a/src/content/docs/ko/reference/configuration-reference.mdx b/src/content/docs/ko/reference/configuration-reference.mdx
index b95b7c7861134..36563bdf3ec51 100644
--- a/src/content/docs/ko/reference/configuration-reference.mdx
+++ b/src/content/docs/ko/reference/configuration-reference.mdx
@@ -1151,62 +1151,75 @@ Sharp 이미지 서비스의 기본 이미지 크기 제한을 우회하고 큰
 - 모든 하위 경로 ('startsWith')를 허용하려면 '/\*\*' 로 끝납니다.
 - 한 수준의 하위 경로만 허용하려면 '/\*' 로 끝납니다.
 
-### image.experimentalLayout
+### image.responsiveStyles
+
+<p>
+
+**타입:** `boolean`<br />
+**기본값:** `false`<br />
+<Since v="5.10.0" />
+</p>
+
+반응형 이미지에 전역 스타일을 자동으로 추가할지 여부입니다. 이미지를 직접 스타일링하는 경우가 아니라면 이 옵션을 활성화해야 합니다.
+
+이 옵션은 구성 또는 이미지 컴포넌트의 `layout` prop을 사용하여 `layout`이 `constrained`, `full-width`, `fixed`로 설정된 경우에만 사용할 수 있습니다.
+
+자세한 내용은 [이미지 문서](/ko/guides/images/#반응형-이미지-스타일)를 참조하세요.
+
+### image.layout
 
 <p>
 
 **타입:** `ImageLayout`<br />
-**기본값:** `undefined`
+**기본값:** `undefined`<br />
+<Since v="5.10.0" />
 </p>
 
 반응형 이미지의 기본 레이아웃 타입입니다. 이미지 컴포넌트의 `layout` 속성으로 재정의할 수 있습니다.
-`experimental.responsiveImages` 플래그를 활성화해야 합니다.
 - `constrained` - 이미지가 지정된 크기를 초과하지 않으면서 종횡비를 유지한 채로 컨테이너에 맞게 크기가 조정됩니다.
 - `fixed` - 이미지가 원래 크기를 유지합니다.
 - `full-width` - 이미지가 종횡비를 유지한 채로 컨테이너에 맞게 크기가 조정됩니다.
 
-### image.experimentalObjectFit
+자세한 내용은 [`layout` 컴포넌트 속성](/ko/reference/modules/astro-assets/#layout)을 참조하세요.
+
+### image.objectFit
 
 <p>
 
 **타입:** `ImageFit`<br />
-**기본값:** `"cover"`
+**기본값:** `"cover"`<br />
+<Since v="5.10.0" />
 </p>
 
-반응형 이미지의 기본 object-fit 값입니다. 이미지 컴포넌트의 `fit` 속성으로 재정의할 수 있습니다.
-`experimental.responsiveImages` 플래그를 활성화해야 합니다.
+반응형 이미지의 [`object-fit` CSS 속성 값](https://developer.mozilla.org/ko/docs/Web/CSS/object-fit)입니다. 이미지 컴포넌트의 `fit` prop을 사용하여 재정의할 수 있습니다.
+`layout`의 값을 먼저 설정해야 합니다.
+
+자세한 내용은 [`fit` 컴포넌트 속성](/ko/reference/modules/astro-assets/#fit)을 참조하세요.
 
-### image.experimentalObjectPosition
+### image.objectPosition
 
 <p>
 
 **타입:** `string`<br />
-**기본값:** `"center"`
+**기본값:** `"center"`<br />
+<Since v="5.10.0" />
 </p>
 
-반응형 이미지의 기본 object-position 값입니다. 이미지 컴포넌트의 `position` 속성으로 재정의할 수 있습니다.
-`experimental.responsiveImages` 플래그를 활성화해야 합니다.
-
-### image.experimentalBreakpoints
+반응형 이미지의 기본 [`object-position` CSS 속성 값](https://developer.mozilla.org/ko/docs/Web/CSS/object-position)입니다. 이미지 컴포넌트의 `position` prop을 사용하여 재정의할 수 있습니다.
+`layout`의 값을 먼저 설정해야 합니다.
 
-<p>
+자세한 내용은 [`position` 컴포넌트 속성](/ko/reference/modules/astro-assets/#position)을 참조하세요.
 
-**타입:** `Array<number>`<br />
-**기본값:** `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]`
-</p>
-
-반응형 이미지를 생성하는 데 사용되는 중단점입니다. `experimental.responsiveImages` 플래그를 활성화해야 합니다. 전체 목록은 일반적으로 사용되지 않으며, 소스 및 출력 크기에 따라 필터링됩니다. 사용되는 기본값은 로컬 또는 원격 이미지 서비스를 사용하는지에 따라 다릅니다. 원격 서비스의 경우 필요한 크기만 생성되므로 더 포괄적인 목록이 사용됩니다. 로컬 서비스의 경우 생성되는 이미지 수를 줄이기 위해 더 짧은 목록이 사용됩니다.
-
-### image.experimentalDefaultStyles
+### image.breakpoints
 
 <p>
 
-**타입:** `boolean`<br />
-**기본값:** `true`
+**타입:** `Array<number>`<br />
+**기본값:** `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]`<br />
+<Since v="5.10.0" />
 </p>
 
-실험적 이미지의 크기가 올바르게 조정되도록 전역 스타일을 자동으로 추가할지 여부입니다. 이 옵션은 기본적으로 활성화되어 있지만, 스타일을 직접 관리하려는 경우 비활성화할 수 있습니다.
-이 옵션은 `experimental.responsiveImages` 플래그가 활성화된 경우에만 사용할 수 있습니다.
+반응형 이미지를 생성하는 데 사용되는 중단점입니다. `layout`의 값을 먼저 설정해야 합니다. 전체 목록은 일반적으로 사용되지 않으며, 소스 및 출력 크기에 따라 필터링됩니다. 사용되는 기본값은 로컬 또는 원격 이미지 서비스를 사용하는지에 따라 다릅니다. 원격 서비스의 경우 필요한 크기만 생성되므로 더 포괄적인 목록이 사용됩니다. 로컬 서비스의 경우 생성되는 이미지 수를 줄이기 위해 더 짧은 목록이 사용됩니다.
 
 ## Markdown 옵션
 
diff --git a/src/content/docs/ko/reference/modules/astro-assets.mdx b/src/content/docs/ko/reference/modules/astro-assets.mdx
index f9c3aae980e1c..55e01ffa7e81c 100644
--- a/src/content/docs/ko/reference/modules/astro-assets.mdx
+++ b/src/content/docs/ko/reference/modules/astro-assets.mdx
@@ -27,6 +27,10 @@ import {
 
 ### `<Image />`
 
+`<Image />` 컴포넌트는 이미지를 최적화하고 변환합니다.
+
+이 컴포넌트는 컨테이너 크기 또는 기기 화면의 크기와 해상도에 따라 조정할 수 있는 [반응형 이미지](#반응형-이미지-속성)를 만드는 데도 사용할 수 있습니다.
+
 ```astro title="src/components/MyComponent.astro"
 ---
 // Image 컴포넌트 및 이미지 가져오기
@@ -53,7 +57,7 @@ import myImage from "../assets/my_image.png"; // 1600x900의 이미지
 
 #### Image 속성
 
-`<Image />` 컴포넌트는 아래에 설명된 속성 외에도 HTML `<img>` 태그의 모든 속성을 허용합니다.
+`<Image />` 컴포넌트는 HTML의 `<img>` 태그가 허용하는 모든 속성 외에도 다음에 나열된 속성과 [반응형 이미지 속성](#반응형-이미지-속성)을 허용합니다.
 
 ##### src (필수)
 
@@ -122,7 +126,9 @@ import myImage from "../assets/my_image.png"; // 1600x900의 이미지
 
 이러한 속성은 이미지에 사용할 크기를 정의합니다.
 
-이미지를 원본 가로세로 비율로 사용하는 경우 `width` 및 `height`는 선택사항입니다. 이러한 치수는 `src/`에 있는 이미지 파일에서 자동으로 유추할 수 있습니다. 원격 이미지의 경우 `<Image />` 또는 `<Picture />` 컴포넌트의 [`inferSize` 속성을 `true`로 설정](#infersize)하거나 [`inferRemoteSize()` 함수](#inferremotesize)를 사용하세요.
+`layout` 유형이 설정되면, 이미지의 크기에 따라 이 값들이 자동으로 생성되므로 대부분의 경우 수동으로 설정하지 않아도 됩니다.
+
+이미지를 원본 가로세로 비율로 사용하는 경우 `width` 및 `height`는 선택사항입니다. 이러한 크기는 `src/`에 있는 이미지 파일에서 자동으로 유추할 수 있습니다. 원격 이미지의 경우 `<Image />` 또는 `<Picture />` 컴포넌트의 [`inferSize` 속성을 `true`로 설정](#infersize)하거나 [`inferRemoteSize()` 함수](#inferremotesize)를 사용하세요.
 
 그러나 Astro는 이러한 파일을 분석할 수 없으므로 `public/` 폴더에 저장된 이미지에는 이 두 속성이 모두 필요합니다.
 
@@ -136,6 +142,8 @@ import myImage from "../assets/my_image.png"; // 1600x900의 이미지
 
 이미지에 대해 생성할 픽셀 밀도 목록입니다.
 
+`densities` 속성은 `layout` 속성을 사용하는 반응형 이미지와 호환되지 않으며 설정된 경우 무시됩니다.
+
 제공된 경우 이 값은 `<img>` 태그에 `srcset` 속성을 생성하는 데 사용됩니다. 이 값을 사용할 때 `widths` 값을 제공하지 마세요.
 
 이미지 크기가 커지는 것을 방지하기 위해 원본 이미지보다 더 큰 너비와 동일한 밀도는 무시됩니다.
@@ -180,6 +188,8 @@ import myImage from '../assets/my_image.png';
 
 제공된 경우 이 값은 `<img>` 태그에 `srcset` 속성을 생성하는 데 사용됩니다. [`sizes` 속성](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)도 제공해야 합니다.
 
+`layout` 속성을 사용하는 반응형 이미지는 `widths` 및 `sizes` 속성을 자동으로 생성합니다. 일반적으로 이러한 값을 제공할 필요는 없지만 자동으로 생성된 값을 재정의하는 데 사용할 수 있습니다.
+
 이 값을 사용할 때는 `densities` 값을 제공하지 마세요. 이 두 값 중 하나만 사용하여 `srcset`을 생성할 수 있습니다.
 
 이미지 크기가 커지는 것을 방지하기 위해 원본 이미지보다 큰 너비는 무시됩니다.
@@ -221,6 +231,20 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
 />
 ```
 
+##### sizes
+
+<p>
+
+**타입:** `string | undefined`<br />
+<Since v="3.3.0" />
+</p>
+
+각 미디어 조건 목록에 대한 이미지의 레이아웃 너비를 지정합니다. `widths`를 지정할 때 반드시 제공해야 합니다.
+
+`layout` 속성을 사용하는 반응형 이미지는 `widths` 및 `sizes` 속성을 자동으로 생성합니다. 일반적으로 이러한 값을 제공할 필요는 없지만 자동으로 생성된 값을 재정의하는 데 사용할 수 있습니다.
+
+`constrained` 및 `full-width` 이미지에 대해 생성된 `sizes` 속성은 뷰포트가 이미지 너비보다 작은 경우 이미지가 화면 전체 너비에 가깝게 표시된다는 가정을 기반으로 합니다. 크게 다른 경우 (예: 작은 화면의 다중 열 레이아웃)에는 최상의 결과를 위해 `sizes` 속성을 수동으로 조정해야 할 수 있습니다.
+
 ##### format
 
 <p>
@@ -248,6 +272,7 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
 <p>
 
 **타입:** `boolean`<br />
+**기본값:** `false`<br />
 <Since v="4.4.0" />
 </p>
 
@@ -257,7 +282,7 @@ import myImage from '../assets/my_image.png'; // 1600x900의 이미지
 
 `<Image />` 컴포넌트에 `inferSize`를 추가하거나 `getImage()`에 `inferSize: true`를 추가하여 가져올 때 이미지 콘텐츠에서 이러한 값을 추론합니다. 이는 원격 이미지의 크기를 모르거나 변경될 수 있는 경우에 유용합니다.
 
-```astro mark="inferSize"
+```astro title="src/components/MyComponent.astro" "inferSize"
 ---
 import { Image } from 'astro:assets';
 ---
@@ -266,11 +291,42 @@ import { Image } from 'astro:assets';
 
 `inferSize`는 [승인되지 않은 도메인의 원격 이미지](/ko/guides/images/#원격-이미지-승인)의 크기를 가져올 수 있지만 이미지 자체는 처리되지 않은 상태로 유지됩니다.
 
+#### priority
+
+<p>
+
+**타입:** `boolean`<br />
+**기본값:** `false`<br />
+<Since v="5.10.0" />
+</p>
+
+웹 페이지에 접속 시, 스크롤하지 않아도 화면에 바로 나타나는 이미지에 대해 `loading`, `decoding`, `fetchpriority` 속성을 최적화된 값으로 자동 설정합니다.
+
+```astro title="src/components/MyComponent.astro" "priority"
+---
+import { Image } from 'astro:assets';
+import myImage from '../assets/my_image.png';
+---
+<Image src={myImage} priority alt="A description of my image" />
+```
+
+`priority: true` (또는 단축 구문 `priority`)를 `<Image />` 또는 `<Picture />` 컴포넌트에 추가하면 브라우저에 이미지를 즉시 로드하도록 지시하는 다음 속성이 추가됩니다.
+
+```
+loading="eager"
+decoding="sync"
+fetchpriority="high"
+```
+
+이러한 개별 속성을 사용자 정의하는 경우 수동으로 설정할 수 있습니다.
+
 ### `<Picture />`
 
 <p><Since v="3.3.0" /></p>
 
-다양한 형식 및/또는 크기로 반응형 이미지를 표시하려면 Astro의 `<Picture />` 컴포넌트를 사용하세요.
+`<Picture />` 컴포넌트는 여러 형식 및/또는 크기로 최적화된 이미지를 생성합니다.
+
+이 컴포넌트는 컨테이너 크기 또는 기기 화면의 크기와 해상도에 따라 조정할 수 있는 [반응형 이미지](#반응형-이미지-속성)를 만드는 데도 사용할 수 있습니다.
 
 ```astro title="src/pages/index.astro"
 ---
@@ -300,7 +356,7 @@ import myImage from "../assets/my_image.png"; // 1600x900의 이미지
 
 #### Picture 속성
 
-`<Picture />`는 [`<Image />` 컴포넌트](#image-속성)의 모든 속성과 함께 다음을 허용합니다.
+`<Picture />`는 [반응형 이미지 속성](#반응형-이미지-속성)을 포함하여 [`<Image />` 컴포넌트](#image-속성)의 모든 속성과 다음을 허용합니다.
 
 ##### `formats`
 
@@ -359,6 +415,136 @@ import myImage from "../my_image.png"; // 1600x900의 이미지
 </picture>
 ```
 
+### 반응형 이미지 속성
+
+[`<Image />`](#image-) 또는 [`<Picture />`](#picture-) 컴포넌트에 [`layout`](#layout) 속성을 설정하면 반응형 이미지가 생성되고 추가 속성을 설정할 수 있게 됩니다.
+
+```astro title=MyComponent.astro
+---
+import { Image } from 'astro:assets';
+import myImage from '../assets/my_image.png';
+---
+<Image src={myImage} alt="A description of my image." layout='constrained' width={800} height={600} />
+```
+
+레이아웃이 설정되면 이미지의 크기와 레이아웃 유형에 따라 `srcset` 및 `sizes` 속성이 자동으로 생성됩니다. 이전 `<Image />` 컴포넌트는 다음과 같은 HTML 출력을 생성합니다.
+
+```html
+<img
+  src="/_astro/my_image.hash3.webp"
+  srcset="/_astro/my_image.hash1.webp 640w,
+      /_astro/my_image.hash2.webp 750w,
+      /_astro/my_image.hash3.webp 800w,
+      /_astro/my_image.hash4.webp 828w,
+      /_astro/my_image.hash5.webp 1080w,
+      /_astro/my_image.hash6.webp 1280w,
+      /_astro/my_image.hash7.webp 1600w"
+  alt="A description of my image"
+  sizes="(min-width: 800px) 800px, 100vw"
+  loading="lazy"
+  decoding="async"
+  fetchpriority="auto"
+  width="800"
+  height="600"
+  style="--fit: cover; --pos: center;"
+  data-astro-image="constrained"
+>
+```
+
+`layout`의 값은 컨테이너에 따라 이미지 크기를 조정하는 방법을 결정하기 위해 `<img>` 태그에 적용되는 기본 스타일도 정의합니다.
+
+```css title="Responsive Image Styles"
+:where([data-astro-image]) {
+	object-fit: var(--fit);
+	object-position: var(--pos);
+}
+:where([data-astro-image='full-width']) {
+	width: 100%;
+}
+:where([data-astro-image='constrained']) {
+	max-width: 100%;
+}
+```
+
+`<Image />` 또는 `<Picture />` 컴포넌트에 [`fit`](#fit) 및 [`position`](#position) props를 설정하여 기본 `object-fit` 및 `object-position` 스타일을 재정의할 수 있습니다.
+
+
+##### layout
+
+<p>
+
+**타입:** `'constrained' | 'full-width' | 'fixed' | 'none'` <br />
+**기본값:** `image.layout | 'none'` <br />
+<Since v="5.10.0" />
+</p>
+
+[반응형 이미지](#반응형-이미지-속성)를 정의하고 컨테이너 크기가 변경될 때 이미지의 크기를 조정하는 방법을 결정합니다. [`image.layout`](/ko/reference/configuration-reference/#imagelayout)의 기본값을 재정의하는 데 사용할 수 있습니다.
+
+- `constrained` - 이미지가 컨테이너에 맞게 축소되어 가로 세로 비율을 유지하지만 지정된 `width`와 `height` 또는 이미지의 원래 크기를 초과하여 확대되지는 않습니다.
+
+  이미지를 가능한 한 요청된 크기로 표시하되 작은 화면에 맞게 축소하려면 이 옵션을 사용합니다. 이는 Tailwind를 사용할 때 이미지의 기본 동작과 일치합니다. 잘 모르겠다면 이 레이아웃을 선택하는 것이 좋습니다.
+
+- `full-width` - 이미지가 가로 세로 비율을 유지하면서 컨테이너 너비에 맞게 크기가 조정됩니다.
+
+  히어로 이미지 또는 페이지의 전체 너비를 차지해야 하는 이미지에 이 옵션을 사용합니다.
+
+- `fixed` - 이미지 크기가 조정되지 않고 요청된 크기를 유지합니다. 고밀도 디스플레이를 지원하기 위해 `srcset`을 생성하지만 다른 화면 크기에는 적용되지 않습니다.
+
+  화면 너비보다 작은 아이콘이나 로고, 고정 너비 컨테이너의 이미지 등 이미지 크기가 조정되지 않는 경우에 이 옵션을 사용합니다.
+
+- `none` - 이미지가 반응형으로 작동하지 않습니다. `srcset` 또는 `sizes`가 자동으로 생성되지 않으며 스타일이 적용되지 않습니다.
+
+  기본 레이아웃을 사용하도록 설정했지만 특정 이미지에 대해 사용하지 않으려는 경우에 유용합니다.
+
+예를 들어, 기본 레이아웃으로 `constrained`를 설정하면 개별 이미지의 `layout` 속성을 재정의할 수 있습니다:
+
+```astro title="src/components/MyComponent.astro"
+---
+import { Image } from 'astro:assets';
+import myImage from '../assets/my_image.png';
+---
+<Image src={myImage} alt="This will use constrained layout" width={800} height={600} />
+<Image src={myImage} alt="This will use full-width layout" layout="full-width" />
+<Image src={myImage} alt="This will disable responsive images" layout="none" />
+```
+
+##### fit
+
+<p>
+
+**타입:** `'contain' | 'cover' | 'fill' | 'none' | 'scale-down'` <br />
+**기본값:** `image.objectFit | 'cover'` <br />
+<Since v="5.10.0" />
+</p>
+
+[`layout`](#layout) 속성이 설정되거나 구성된 경우 활성화됩니다. 가로 세로 비율이 변경된 경우 반응형 이미지를 자르는 방법을 정의합니다.
+
+값은 CSS `object-fit`의 값과 일치합니다. 기본값은 `cover`이지만, [`image.objectFit`](/ko/reference/configuration-reference/#imageobjectfit)이 설정된 경우 이 속성의 값이 기본값입니다. 기본 `object-fit` 스타일을 재정의하는 데 사용할 수 있습니다.
+
+##### position
+
+<p>
+
+**타입:** `string` <br />
+**기본값:** `image.objectPosition | 'center'` <br />
+<Since v="5.10.0" />
+</p>
+
+[`layout`](#layout) 속성이 설정 또는 구성된 경우 활성화됩니다. 가로 세로 비율이 변경된 경우 반응형 이미지를 자르는 위치를 정의합니다.
+
+값은 CSS `object-position`의 값과 일치합니다. 기본값은 `center`이지만, [`image.objectPosition`](/ko/reference/configuration-reference/#imageobjectposition)이 설정된 경우 이 속성의 값이 기본값입니다. 기본 `object-position` 스타일을 재정의하는 데 사용할 수 있습니다.
+
+##### priority
+
+<p>
+
+**타입:** `boolean` <br />
+**기본값:** `false` <br />
+<Since v="5.10.0" />
+</p>
+
+[`layout`](#layout) 속성이 설정되거나 구성되면 활성화됩니다. 설정된 경우 반응형 이미지를 적극적으로 로드합니다. 설정하지 않으면 이미지가 지연 로드됩니다. 웹 페이지에 접속 시, 스크롤하지 않아도 화면에 바로 나타나는 큰 이미지에 이 옵션을 사용하세요. 기본값은 `false`입니다.
+
 ### `getImage()`
 
 <p>