diff --git a/netlify.toml b/netlify.toml
index 0843f1dfac07a..e4174d26a996d 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -83,6 +83,14 @@
from = "/:lang/guides/client-side-routing"
to = "/:lang/guides/view-transitions"
+ [[redirects]]
+ from = "/:lang/guides/assets"
+ to = "/:lang/guides/images"
+
+ [[redirects]]
+ from = "/:lang/guides/integrations-guide/image"
+ to = "/:lang/guides/images"
+
[[redirects]]
from = "/:lang/migration/0.21.0"
to = "/:lang/guides/upgrade-to/v1"
diff --git a/src/content/docs/de/guides/images.mdx b/old-translations/de/guides/images.mdx
similarity index 99%
rename from src/content/docs/de/guides/images.mdx
rename to old-translations/de/guides/images.mdx
index e561b6b44b20c..693194dc9210e 100644
--- a/src/content/docs/de/guides/images.mdx
+++ b/old-translations/de/guides/images.mdx
@@ -9,7 +9,7 @@ import Since from '~/components/Since.astro';
Astro bietet dir verschiedene Möglichkeiten, Bilder auf deiner Website zu verwenden, ganz gleich, ob sie lokal in deinem Projekt gespeichert sind, auf anderen Quellen verlinkt werden oder in einem CMS oder CDN gespeichert sind!
:::note[Assets verwenden (Experimentell)]
-Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/assets/).
+Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/images/).
**Einige der folgenden Ratschläge sind nicht mit der experimentellen Flag kompatibel.**
:::
@@ -38,7 +38,7 @@ import rocket from '../images/rocket.svg';
Du kannst die Standard Markdown `![]()` Syntax oder die Standard HTML ``-Tags in deinen `.md`-Dateien für Bilder verwenden, die sich in deinem `public/`-Ordner befinden, oder für Remote-Bilder auf einem anderen Server.
-Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/assets/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.
+Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/images/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.
```md
@@ -121,7 +121,7 @@ Das Attribut `src` ist **relativ zum öffentlichen Ordner**. In Markdown kannst
### `src/assets/` (experimentell)
-In der Anleitung [Assets (Experimentell)](/de/guides/assets/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.
+In der Anleitung [Assets (Experimentell)](/de/guides/images/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.
Dazu musst du deine bestehenden Bilder aktualisieren, die aktuelle Astro-Bildintegration entfernen und zusätzliche manuelle Änderungen vornehmen, um einige der neuen Funktionen zu nutzen.
@@ -132,7 +132,7 @@ Die offizielle Bild-Integration von Astro bietet zwei verschiedene Astro-Kompone
Nach der [Installation von `@astrojs/image`](/de/guides/integrations-guide/image/#installation) kannst du diese beiden Komponenten überall dort verwenden, wo du Astro-Komponenten verwenden kannst: in `.astro`- und `.mdx`-Dateien.
:::note[Inkompatibel mit Assets]
-Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/assets/).
+Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/images/).
:::
### ``
diff --git a/src/content/docs/fr/guides/images.mdx b/old-translations/fr/images.mdx
similarity index 100%
rename from src/content/docs/fr/guides/images.mdx
rename to old-translations/fr/images.mdx
diff --git a/old-translations/ja/images.mdx b/old-translations/ja/images.mdx
new file mode 100644
index 0000000000000..54c53602c96e2
--- /dev/null
+++ b/old-translations/ja/images.mdx
@@ -0,0 +1,373 @@
+---
+title: 画像
+description: Astroでの画像の取り扱いを学びます
+i18nReady: true
+---
+import Since from '~/components/Since.astro';
+
+Astroは、プロジェクト内に保存されている画像やリモート上にリンクされている画像、CMSやCDNに保存されている画像をサイト上で表示するために様々な手段を提供しています。
+
+:::note[アセットの活用 (実験的)]
+実験的なアセットサポートが`astro@2.1.0`に追加されました。アセットサポートを有効にした場合、追加情報については [アセット (実験的) ガイド](/ja/guides/images/) を参照してください。
+
+**以下のアドバイスの中には、アセットのフラグを有効にした場合に互換性がなくなるものもあります。**
+:::
+
+
+### `.astro`ファイル内
+
+astroでは``要素を使って画像を表示でき、HTML画像属性をすべてサポートしています。
+
+`src` 属性は必須で、その書式は画像の保存場所や、アセットの実験的なサポートを有効にしているかどうかによって異なります：
+
+```astro title="src/pages/index.astro"
+---
+import rocket from '../images/rocket.svg';
+---
+
+
+
+
+
+
+
+
+```
+
+### Markdownファイル内
+
+`.md`ファイル内では標準的な`![]()`構文や``タグを記載することで`public/`フォルダや、他サーバー上にあるリモート画像を表示できます。
+
+もし`public/`に画像を保存できない場合、[アセットの実験的なサポート](/ja/guides/images/)を有効にするか、インポートされたコンポーネントをMarkdownのような構文と組み合わせて使える`.mdx`ファイルフォーマットを利用することをお勧めします。AstroにMDXのサポートを追加するには[MDX インテグレーション](/ja/guides/integrations-guide/mdx/)を利用します。
+
+```md
+
+
+# Markdownページ
+
+
+
+
+
+
+
+
+```
+
+### MDXファイル内
+
+`.mdx`ファイル内では標準的なMarkdown文法`![]()`やJSXの``タグを使って`public/`フォルダーやリモートサーバーの画像を表示できます。
+
+加えて、Astroコンポーネントのようにプロジェクトの`src/`ディレクトリに保存されている画像をインポートして利用できます。
+
+```mdx title="src/pages/post-1.mdx"
+
+import rocket from '../images/rocket.svg';
+
+# MDXページ
+
+// src/images/rocket.svgに保存されたローカル画像
+
+
+// public/assets/stars.pngに保存されたローカル画像
+
+
+
+// 他サーバー上にあるリモート画像
+
+
+```
+
+### UIフレームワークコンポーネント内
+
+[UIフレームコンポーネント](/ja/core-concepts/framework-components/)(ReactやSvelteなど)に画像を追加する場合、そのコンポーネントのフレームワークに沿った画像の構文を利用します。
+
+## 画像の保存場所
+
+### `src/`
+
+`src`に保存された画像は、コンポーネント(`.astro`や`.mdx`、そして他のUIフレームワーク)から利用できますが、Markdownファイルからは利用できません。
+
+Markdownファイルを利用する必要がある場合、[`public/`へ配置する](#public)か[CMSやCDN上の画像を利用](#cmsやcdn上の画像利用)することをお勧めします。
+
+画像を**相対ファイルパス**または[importエイリアス](/ja/guides/aliases/)を利用してコンポーネントファイル内でインポートし、画像の`src`属性として利用できます。
+
+
+```astro
+---
+// src/pages/index.astro
+
+// `src/images/`内の画像へアクセスします。
+import logo from '../images/logo.png';
+---
+
+```
+
+### `public/`
+
+`public/`に保存された画像はコンポーネント(`.astro`や`.mdx`、そして他のUIフレームワーク)とMarkdownファイルからも利用できます。
+
+しかし、`/public`ディレクトリにあるファイルは処理されずにそのまま提供、コピーされます。Markdownファイル以外で画像を利用する場合はAstroが画像を変換・最適化・バンドルできるように、可能な限りローカル画像は`src`に保存するのをお勧めします。
+
+`src`属性は**publicフォルダからの相対パス**です。Markdownでは`![]()`の表記を利用できます。
+
+```astro title="src/pages/index.astro"
+---
+// `public/images/`内の画像へアクセスします。
+---
+
+```
+
+### `src/assets/` (実験的)
+
+`/assets/` フォルダの実験的な使用を有効にするには、[アセット(実験的)](/ja/guides/images/)ガイドを参照してください。
+
+その場合、既存の画像を更新し、現在のAstro画像インテグレーションを削除する必要があります。また、Astroの新機能の一部を利用するためには、さらに手動での変更が必要になります。
+
+## Astro画像インテグレーション
+
+Astro公式の画像のインテグレーションは、最適化された画像をレンダリングするためのAstroコンポーネント``と``を提供しています。これらのコンポーネントは全ての静的サイトと、[一部のサーバーサイドレンダリングのデプロイホスト](/ja/guides/integrations-guide/image/#installation)をサポートしています。
+
+[`@astrojs/image`のインストール](/ja/guides/integrations-guide/image/#installation)で、`.astro`と`.mdx`などのAstroコンポーネントを利用できるファイル内でこの2つのコンポーネントを利用できます。
+
+:::note[アセットの互換性がない]
+アセットの実験的なサポートを有効にしている場合は、公式インテグレーションをアンインストールする必要があります。詳細については、[アセット (実験的) ガイド](/ja/guides/images/) を参照してください。
+:::
+
+### ``
+
+Astroの[``コンポーネント](/ja/guides/integrations-guide/image/#image-)は1つの画像を最適化し、幅・高さ・アスペクト比を指定できます。また特定の出力フォーマットに画像を変換できます。
+
+このコンポーネントはディスプレイ間で一貫したサイズを維持したい画像や、画質を厳密にコントロールしたいもの(ロゴなど)に有効です。
+
+レスポンシブ画像の場合やアートディレクションの場合は、代わりに``コンポーネントを利用します。
+
+#### リモート画像
+
+(必須属性: [`src`](/ja/guides/integrations-guide/image/#src)・[`alt`](/ja/guides/integrations-guide/image/#alt)・[`format`](/ja/guides/integrations-guide/image/#format)・サイズ)
+
+``コンポーネントの`src`属性に完全なURLを渡し、`alt`の値を含めます。
+
+``コンポーネントはリモート画像のオリジナルのファイルフォーマットを検知できないため、リモート画像を変換するために出力する`format`(pngやavifなど)を指定する必要があります。
+
+``コンポーネントはリモート画像のサイズを認識しないので、コンテンツレイアウトのシフトを回避するために[`width`](/ja/guides/integrations-guide/image/#width)と[`height`](/ja/guides/integrations-guide/image/#height)、またはどちらか1つのサイズと[`aspectRatio`](/ja/guides/integrations-guide/image/#aspectratio)を指定する必要があります。
+
+[その他の属性](/ja/guides/integrations-guide/image/#image-)はオプションです。
+
+#### `src/`のローカル画像
+
+(必須属性: [`src`](/ja/guides/integrations-guide/image/#src)・[`alt`](/ja/guides/integrations-guide/image/#alt))
+
+フロントマターで画像をインポートして、``コンポーネントの`src`属性へ直接渡します。
+
+`alt`は必須ですが[その他の属性](/ja/guides/integrations-guide/image/#image-)はオプションで、指定が無ければ画像ファイルのプロパティがデフォルト値として設定されます。
+
+#### `public/`のローカル画像
+
+(必須属性: [`src`](/ja/guides/integrations-guide/image/#src)・[`alt`](/ja/guides/integrations-guide/image/#alt)・[`format`](/ja/guides/integrations-guide/image/#format)・サイズ)
+
+コンポーネントの`src`属性に公開フォルダからの相対パスを渡し、`alt`に値を含めます。
+
+これはリモート画像として扱われ、[`width`](/ja/guides/integrations-guide/image/#width)と[`height`](/ja/guides/integrations-guide/image/#height)の両方の属性か、またはどちらか1つのサイズと[`aspectRatio`](/ja/guides/integrations-guide/image/#aspectratio)属性が必須です。
+
+画像を変換するための`format`属性値が必要です。(pngやavifなど)
+
+[その他の属性](/ja/guides/integrations-guide/image/#image-)はオプションです。
+
+元画像は`public/`にある他のファイルと同じくビルドフォルダーにそのままコピーされ、Astroの画像インテグレーションは最適化された画像を返します。
+
+#### 例
+
+```astro
+---
+// src/pages/index.astro
+import { Image } from '@astrojs/image/components';
+import localImage from "../assets/logo.png";
+const remoteImage = "https://picsum.photos/id/957/300/200.jpg";
+const localAlt = "The Astro Logo";
+const remoteAlt = "A low-angle view of a forest during the daytime";
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### ` `
+
+Astroの[``コンポーネント](/ja/guides/integrations-guide/image/#picture-)は複数の画像サイズ・フォーマット・レイアウトなど、サイト上でレスポンシブな画像を提供するために利用できます。
+
+画面サイズや帯域幅に基づいて、画像に最適なサイズ、解像度、ファイルタイプを利用ユーザーのブラウザに任せることができます。また、メディアクエリに基づいてブラウザに従わせるルールを指定できます。
+
+このコンポーネントは、ユーザーが様々な画面サイズで見る画像を最適化するためや、アートディレクションに最適です。
+
+:::tip
+[レスポンシブ画像とアートディレクション](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#%E3%82%A2%E3%83%BC%E3%83%88%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)の詳細はMDNのガイドを参照してください。
+:::
+
+#### リモート画像
+
+(必須属性: [`src`](/ja/guides/integrations-guide/image/#src-1)・[`widths`](/ja/guides/integrations-guide/image/#widths)・[`sizes`](/ja/guides/integrations-guide/image/#sizes)・[`alt`](/ja/guides/integrations-guide/image/#alt-1)・[`aspectRatio`](/ja/guides/integrations-guide/image/#aspectratio-1))
+
+完全なURLを``コンポーネントの`src`属性へ渡します。
+
+またビルド時に正しい高さを計算できるようにリモート画像は`aspectRatio`も必要になります。
+
+画像の幅と画面サイズに関する指示をコンポーネントに与える必要がありますが、[その他の属性](/ja/guides/integrations-guide/image/#picture-)はオプションです。
+
+[`formats`](/ja/guides/integrations-guide/image/#formats)は必須ではありませんが、リモート画像の元のフォーマットが不明となりデフォルト値は含まれません。何も指定が無ければ、`webp`と`avif`だけが含まれます。
+
+#### ローカル画像
+
+(必須属性: [`src`](/ja/guides/integrations-guide/image/#src-1)・[`widths`](/ja/guides/integrations-guide/image/#widths)・[`sizes`](/ja/guides/integrations-guide/image/#sizes)・[`alt`](/ja/guides/integrations-guide/image/#alt-1))
+
+フロントマターで画像をインポートして、``コンポーネントの`src`属性へ直接渡します。
+
+画像の幅と画像のガイダンスをコンポーネントへ渡す必要がありますが、[その他の属性](/ja/guides/integrations-guide/image/#picture-)はオプションです。
+
+``コンポーネントの[`formats`](/ja/guides/integrations-guide/image/#formats)に指定がなければ、デフォルト値は元の画像のフォーマットに加えて`avif`と`webp`が含まれます。
+
+#### `public/`の画像
+
+(必須属性: [`src`](/ja/guides/integrations-guide/image/#src-1)・[`widths`](/ja/guides/integrations-guide/image/#widths)・[`sizes`](/ja/guides/integrations-guide/image/#sizes)・[`alt`](/ja/guides/integrations-guide/image/#alt-1)・[`aspectRatio`](/ja/guides/integrations-guide/image/#aspectratio-1))
+
+コンポーネントの`src`属性にはpublicフォルダからの相対パスを渡し、`alt`の値を必要とします。
+
+画像はリモート画像として扱われるため、ビルド時に正しい高さを計算できるように`aspectRatio`の指定が必要です。
+
+画像の幅と画面サイズに関する指示をコンポーネントに与える必要がありますが、[その他の属性](/ja/guides/integrations-guide/image/#picture-)はオプションです。
+
+[`formats`](/ja/guides/integrations-guide/image/#formats)は必須ではありませんが、`public/`フォルダにある画像の元のフォーマットが不明となりデフォルト値は含まれません。何も指定が無ければ、`webp`と`avif`だけが含まれます。
+
+元の画像は`public/`にある他のファイルと同じくビルドフォルダーにそのままコピーされ、Astroの画像インテグレーションは最適化された画像を返します。
+
+#### 例
+
+```astro
+---
+import { Picture } from '@astrojs/image/components';
+import localImage from '../assets/logo.png';
+const remoteImage = 'https://docs.astro.build/assets/full-logo-light.png';
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### MDXでの利用
+
+`.mdx`ファイル内では、インポートとエクスポートを通して``と``が画像の`src`を受け取ることができます。
+
+```mdx
+// src/pages/index.mdx
+
+import { Image, Picture } from '@astrojs/image/components';
+import rocket from '../assets/rocket.png';
+export const logo = 'https://docs.astro.build/assets/full-logo-light.png';
+
+
+
+
+
+```
+
+### デフォルト値を設定する
+
+現在、``と``コンポーネントにデフォルト値を指定する方法はありません。必須属性はそれぞれのコンポーネントに設定する必要があります。
+
+代わりの方法として、再利用できるよう他のAstroコンポーネントでこれらのコンポーネントをラッピングできます。例えば、以下のようにブログ記事画像をコンポーネントとして作成できます。
+
+```astro title="src/components/BlogPostImage.astro"
+---
+import { Picture } from '@astrojs/image/components';
+
+const {src, ...attrs} = Astro.props;
+---
+
+
+
+```
+
+### 画像インテグレーションで``を使う
+
+公式の画像インテグレーションにより、画像のインポートはソース文字列ではなくオブジェクトを返すように変更されます。このオブジェクトは、インポートされたファイルから派生した以下のプロパティを持ちます。
+```ts
+{
+ src: string;
+ width: number;
+ height: number;
+ format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
+}
+```
+
+画像インテグレーションがインストールされている場合は、``を使用する際にオブジェクトの`src`プロパティを参照してください。
+
+```astro ".src"
+---
+import rocket from '../images/rocket.svg';
+---
+
+```
+
+あるいは、インポートに`?url`を追加して、ソース文字列を返すように指示する。
+
+```astro "?url"
+---
+import rocket from '../images/rocket.svg?url';
+---
+
+```
+
+## CMSやCDN上の画像利用
+
+CDNネットワーク上の画像をAstroで利用するには、画像の完全なURLを``タグやMarkdownの`src`属性として利用します。
+
+代わりに、もしCDNがNode.js SDKを提供している場合はプロジェクトでSDKを利用できます。例えば、[CloudinaryのSDK](https://cloudinary.com/documentation/node_integration)は適切な`src`を利用して``タグを生成できます。
+
+Astroの画像インテグレーションの[``を用いた外部画像](#リモート画像)や[``](#リモート画像-1)コンポーネントを利用するには、リモート画像を扱うための適切なサイズとフォーマットを指定する必要があります。
+
+## Altテキスト
+
+画像が誰も同じように見えるわけではないため、画像を扱う上でアクセシビリティは特に重要になります。`alt`属性は画像に[Altテキストによる記述](https://www.w3.org/WAI/tutorials/images/)を与えます。
+
+この属性は画像インテグレーションの``と``コンポーネントには必須です。Altテキストが指定されていない場合これらのコンポーネントはエラーを投げます。
+
+画像が単なる飾り(ページの理解に貢献しない画像)の場合、スクリーンリーダーが画像を無視するように`alt=""`を設定します。
+
+## コミュニテーインテグレーション
+
+公式の[`@astrojs/image`](/ja/guides/integrations-guide/image/)インテグレーションに加え、Astroプロジェクトで画像の最適化や処理を行うためのサードパーティー製の[コミュニティー画像インテグレーション](https://astro.build/integrations?search=images)がいくつかあります。
diff --git a/old-translations/zh-CN/guides/images.mdx b/old-translations/zh-CN/guides/images.mdx
new file mode 100644
index 0000000000000..a71300741771a
--- /dev/null
+++ b/old-translations/zh-CN/guides/images.mdx
@@ -0,0 +1,163 @@
+---
+title: 图片
+description: 学习如何在 Astro 项目中包含图片。
+i18nReady: true
+---
+import Since from '~/components/Since.astro';
+
+
+在 Astro 项目中，有很多种在网站中使用图片的方式。无论是用存储在项目中的图片，还是链接外部图片，亦或从像 CMS（内容管理系统）或 CDN（内容分发网络）这样的地方加载图片，都没问题！
+
+:::note[`astro:assets` (Experimental - coming in v3.0)]
+实验性 `astro:assets` 模块将在 `astro@3.0` 中默认启用.
+
+请按照 [资源（实验性）使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案！
+
+**下面的一些建议可能与实验性标志不兼容。如果你正在使用 `astro:assets` 请参考资源页面。**
+:::
+
+### 在 `.astro` 文件中
+
+你可以在 `.astro` 文件中使用标准的 HTML `` 或 `` 元素来展示图片，同时也支持所有 HTML 图片属性。
+
+src 属性是必需的，其格式取决于图像的存储位置以及你是否启用了对资源的实验性支持：
+
+```astro
+---
+// src/pages/index.astro
+import rocket from '../images/rocket.svg';
+---
+
+
+
+
+
+
+
+
+```
+
+### 在 Markdown 文件中
+
+可以在 `.md` 文件中使用 Markdown 标准语法 `![]()`，或 HTML 标准语法 `` 标签，来调用位于 `public/` 文件夹下或其它服务器上的图片。
+
+如果你无法将图片保留在 `public/` 中，我们建议启用 [资源的实验性支持](/zh-cn/guides/images/), 或使用 `.mdx` 文件格式，该格式允许你将导入的组件与类似 Markdown 的语法结合起来。使用 [MDX 集成](/zh-cn/guides/integrations-guide/mdx/) 向 Astro 添加对 MDX 的支持。
+```md
+
+
+# 我的 Markdown 页面
+
+
+
+
+
+
+
+
+```
+
+### 在 MDX 文件中
+
+你可以在 .mdx 文件中使用标准 Markdown `![]()` 语法或 JSX 的 `` 标签来显示 `public/ ` 文件夹或远程服务器中的图片。
+
+此外，你也可以导入和使用位于项目 `src/` 目录中的图像，就像在 Astro 组件中一样。
+
+
+```mdx title="src/pages/post-1.mdx"
+
+import rocket from '../images/rocket.svg';
+
+# My MDX Page
+
+// 存放在项目中 src/images/rocket.svg 路径的图片
+
+
+// 存放在项目中 public/assets/stars.png 路径的图片
+
+
+
+// 位于其它服务器上的图片
+
+
+```
+
+### UI 框架中的组件
+
+当在 [UI 框架组件](/zh-cn/core-concepts/framework-components/)（例如 React、Svelte）中添加图像时，请使用适合该框架的图像语法。
+
+
+
+## 存放图片的位置
+
+### `src/`
+
+存储在 `src/`中的图像可以由组件（`.astro`，`.mdx`和其他 UI 框架）使用，但不能在 Markdown 文档中使用。
+
+如果您必须使用 Markdown 文档，我们建议你将图像保存在 ['public/']（#public） 中或 [远程](#使用-cms-或-cdn-上的图片) 存储他们。
+
+从任何组件文档中的 **相对文档路径** 或 [导入别名](/zh-cn/guides/aliases/) 导入它们，然后像使用 `src`属性一样使用。
+
+```astro
+---
+// src/pages/index.astro
+
+// Access images in `src/images/`
+import logo from '../images/logo.png';
+---
+
+```
+
+### `public/`
+
+存储在 `public/` 中的图像可以被组件（`.astro`，`.mdx`和其他UI框架）和Markdown文档使用。
+
+然而，位于 `/public` 目录中的文件始终按原样提供或复制，不进行任何处理。如果你在 Markdown 文件之外使用图像，我们建议尽可能将本地图像保存在 `src/` 中，以便 Astro 对其进行转换、优化和打包。
+
+`src` 属性是 **相对于 public 文件夹的**。在 Markdown 中，你可以使用 `![]()` 表示。
+
+```astro
+---
+// src/pages/index.astro
+
+// 存取放在 `public/images/` 里的图片
+---
+
+```
+
+### `src/assets/` （实验性）
+
+请参阅 [资源（实验性）](/zh-cn/guides/images/) 指南，了解如何启用 `/assets/` 文件夹的实验性用法。
+
+这将需要你更新现有图片，删除当前的 Astro 图片集成，并且还需要额外的手动更改以利用其某些新功能。
+
+## Astro 的图片集成
+
+:::note[将在 v3.0 中弃用]
+Astro v3 将不再主动支持 [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) 集成
+
+我们建议你尽早删除它，并使用将内置在 `astro@3.0` 中的实验性 `astro:assets` 模块。
+
+请按照 [资源（实验性）使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案！
+
+**`astro:assets` 目前还不能完全替代 `@astrojs/image` ，但它正在被积极开发中。**
+:::
+
+有关在 Astro v2 中使用 `@astrojs/image` 的文档，请参阅 [`@astrojs/image` 文档](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)
+
+## 使用 CMS 或 CDN 上的图片
+
+Image CDN 可与 Astro 配合使用，可将图片的完整网址作为 `` 标签中的 `src` 属性或 Markdown 标记
+
+如果 CDN 提供了 Node.js SDK ，则可以在项目中使用它。例如，[Cloudinary 的 SDK](https://cloudinary.com/documentation/node_integration) 可以生成带有相应 `src` 属性 的 ` ` 标签。
+
+## Alt Text
+
+并非所有用户都能以相同的方式查看图片，因此在使用图片时可访问性是一个特别重要的问题。使用 `alt` 属性为图片提供 [描述性替代文本](https://www.w3.org/WAI/tutorials/images/)。
+
+此属性对于映像集成的 `` 和 `` 组件是必需的，如果未提供替代文本，这些组件将引发错误。
+
+如果图像只是装饰性的（即无助于理解页面）请设置 `alt=""`，以便屏幕阅读器知道忽略该图像。
+
+## 社区开发的集成
+
+除了官方的 [`@astrojs/image`](/zh-cn/guides/integrations-guid/image/) 集成外，社区还开发了[社区图片集成](https://astro.build/integrations?search=images)，用于处理和优化 Astro 项目中的图片。
diff --git a/src/content/docs/ar/core-concepts/astro-components.mdx b/src/content/docs/ar/core-concepts/astro-components.mdx
index f980a01ee1565..a1de3495cf2ed 100644
--- a/src/content/docs/ar/core-concepts/astro-components.mdx
+++ b/src/content/docs/ar/core-concepts/astro-components.mdx
@@ -286,7 +286,7 @@ const { title } = Astro.props
- لا يدعمون frontmatter، أو الإستيراد على جانب الخادم (Server-side imports)، أو التعابير الديناميكية.
- أي وسوم `
+
+
-```astro title="src/pages/index.astro"
----
-// Access images in `public/images/`
----
-
```
-### `src/assets/` (experimental)
+#### Passing the Image component
-See the [Assets (Experimental)](/en/guides/assets/) guide for enabling experimental use of the `/assets/` folder.
+The `` component, like any other Astro component, **is unavailable to UI framework components**.
-This will require you to update your existing images, remove the current Astro image integration, and will also require additional manual changes to take advantage of some of its new features.
+But, you can pass the static content generated by `` to a framework component inside a `.astro` file as children or using a [named ``](/en/core-concepts/framework-components/#can-i-use-astro-components-inside-my-framework-components):
-## Astro's Image Integration
-:::note[to be deprecated in v3.0]
-The [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) integration will no longer be actively supported in Astro v3.0.
+```astro title="ImageWrapper.astro"
+---
+import ReactComponent from './ReactComponent.jsx';
+import { Image } from "astro:assets"
+import stars from "~/stars/docline.png";
+---
-We suggest removing it at your earliest convenience and using the experimental `astro:assets` module which will be built in to `astro@3.0`.
+
+
+
+```
-Follow the [Assets (Experimental) Guide](/en/guides/assets/) to start using Astro's new image solution today!
+## Generating images with `getImage()`
-**`astro:assets` is not a complete replacement for `@astrojs/image` at this time, but it is under active development.**
+:::caution
+`getImage()` relies on server-only APIs and breaks the build when used on the client.
:::
-For documentation on using `@astrojs/image` in Astro v2, please see the [`@astrojs/image` package documentation](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)
+The `getImage()` function is intended for generating images destined to be used somewhere else than directly in HTML, for example in an [API Route](/en/core-concepts/endpoints/#server-endpoints-api-routes). It also allows you to create your own custom `` component.
-## Using Images from a CMS or CDN
+`getImage()` takes an options object with the [same properties as the Image component](#properties) (except `alt`).
-Image CDNs work with Astro. Use an image's full URL as the `src` attribute in an `` tag or Markdown notation.
+```astro
+---
+import { getImage } from "astro:assets";
+import myBackground from "../background.png"
+
+const optimizedBackground = await getImage({src: myBackground, format: 'avif'})
+---
+
+
+```
-Alternatively, if the CDN provides a Node.js SDK, you can use that in your project. For example, [Cloudinary’s SDK](https://cloudinary.com/documentation/node_integration) can generate the `` tag with the appropriate `src` for you.
+It returns an object with the following properties:
+
+```js
+{
+ options: {...} // Original parameters passed
+ src: "https//..." // Path to the generated image
+ attributes: {...} // Additional HTML attributes needed to render the image (width, height, style, etc..)
+}
+```
## Alt Text
Not all users can see images in the same way, so accessibility is an especially important concern when using images. Use the `alt` attribute to provide [descriptive alt text](https://www.w3.org/WAI/tutorials/images/) for images.
-This attribute is required for the image integration's `` and `` components. These components will throw an error if no alt text is provided.
+This attribute is required for the `` component. `` will throw an error if no alt text is provided.
If the image is merely decorative (i.e. doesn’t contribute to the understanding of the page), set `alt=""` so that screen readers know to ignore the image.
+## Default image service
+
+[Sharp](https://github.com/lovell/sharp) is the default image service used for `astro:assets`.
+
+If you would prefer to use [Squoosh](https://github.com/GoogleChromeLabs/squoosh) to transform your images, update your config with the following:
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig, squooshImageService } from 'astro/config';
+
+export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+});
+```
## Community Integrations
-In addition to the official [`@astrojs/image`](/en/guides/integrations-guide/image/) integration, there are several third-party [community image integrations](https://astro.build/integrations?search=images) for optimizing and working with images in your Astro project.
+There are several third-party [community image integrations](https://astro.build/integrations?search=images) for optimizing and working with images in your Astro project.
+
+## Upgrade to v3.0 from v2.x
+
+`astro:assets` is no longer behind an experimental flag in Astro v3.0.
+
+`` is now a built-in component and the previous `@astrojs/image` integration has been removed.
+
+These and other accompanying changes to using images in Astro may cause some breaking changes when you upgrade your Astro project from an earlier version.
+
+Please follow the instructions below as appropriate to upgrade an Astro v2.x project to v3.0.
+
+### Upgrade from `experimental.assets`
+
+If you had previously enabled the experimental flag for `astro:assets`, you will need to update your project for Astro v3.0 which now includes assets features by default.
+
+#### Remove `experimental.assets` flag
+
+Remove the experimental flag:
+
+```js title="astro.config.mjs" del={4-6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+ experimental: {
+ assets: true
+ }
+});
+```
+
+If necessary, also update your `src/env.d.ts` file to replace the `astro/client-image` reference with `astro/client`:
+
+```ts title="src/env.d.ts" del={1} ins={2}
+///
+///
+```
+
+#### Remove the `~/assets` import alias
+
+This import alias is no longer included by default with `astro:assets`. If you were using this alias with experimental assets, you must convert them to relative file paths, or [create your own import aliases](/en/guides/aliases/).
+
+```astro title="src/pages/posts/post-1.astro" del={2} ins={3}
+---
+import rocket from '~/assets/rocket.png'
+import rocket from '../../assets/rocket.png';
+---
+```
+
+#### Add simple asset support for Cloudflare, Deno, Vercel Edge and Netlify Edge
+
+ Astro v3.0 allows `astro:assets` to work without errors in Cloudflare, Deno, Vercel Edge and Netlify Edge, which do not support Astro's built-in Squoosh and Sharp image optimization. Note that Astro does not perform any image transformation and processing in these environments. However, you can still enjoy the other benefits of using `astro:assets`, including no Cumulative Layout Shift (CLS), the enforced `alt` attribute, and a consistent authoring experience.
+
+ If you previously avoided using `astro:assets` because of these constraints, you can now use them without issues. You can configure the no-op image service to explicitly opt-in to this behavior:
+
+```js title="astro.config.mjs" ins={4-8}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+ image: {
+ service: {
+ entrypoint: 'astro/assets/services/noop'
+ }
+ }
+});
+```
+
+### Decide where to store your images
+
+See the Images guide to help you decide [where to store your images](#where-to-store-images). You may wish to take advantage of new options for storing your images with the added flexibility `astro:assets` brings. For example, relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `` syntax.
+
+### Update existing `` tags
+
+Previously, importing an image would return a simple `string` with the path of the image. Now, imported image assets match the following signature:
+
+```ts
+interface ImageMetadata {
+ src: string;
+ width: number;
+ height: number;
+ format: string;
+}
+```
+
+You must update the `src` attribute of any existing `` tags (including any [images in UI framework components](#images-in-ui-framework-components)) and you may also update other attributes that are now available to you from the imported image.
+
+```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6}
+---
+import rocket from '../images/rocket.svg';
+---
+
+
+
+```
+
+### Update your Markdown, MDX, and Markdoc files
+
+Relative images from your project `src/` can now be referenced in Markdown, MDX, and Markdoc using standard Markdown `` syntax.
+
+This allows you to move your images from the `public/` directory to your project `src/` where they will now be processed and optimized. Your existing images in `public/` and remote images are still valid but are not optimized by Astro's build process.
+
+```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/"
+# My Markdown Page
+
+
+
+
+
+
+```
+
+If you require more control over your image attributes, we recommend using the `.mdx` file format, which allows you to include Astro's `` component or a JSX `` tag in addition to the Markdown syntax. Use the [MDX integration](/en/guides/integrations-guide/mdx/) to add support for MDX to Astro.
+
+### Remove `@astrojs/image`
+
+
+If you were using the image integration in Astro v2.x, complete the following steps:
+
+1. Remove the `@astrojs/image` integration.
+
+ You must [remove the integration](/en/guides/integrations-guide/#removing-an-integration) by uninstalling and then removing it from your `astro.config.mjs` file.
+
+ ```js del={3,7}
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import image from '@astrojs/image';
+
+ export default defineConfig({
+ integrations: [
+ image(),
+ ]
+ })
+ ```
+
+2. Migrate any existing `` components.
+
+ Change all `import` statements from `@astrojs/image/components` to `astro:assets` in order to use the new built-in `` component.
+
+ Remove any component attributes that are not [currently supported image asset properties](/en/guides/images/#properties).
+
+ For example, `aspectRatio` is no longer supported, as it is now automatically inferred from the `width` and `height` attributes.
+
+ ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3}
+ ---
+ import { Image } from '@astrojs/image/components';
+ import { Image } from 'astro:assets'
+ import localImage from "../assets/logo.png";
+ const localAlt = "The Astro Logo";
+ ---
+
+
+ ```
+
+3. Remove any existing `` components.
+
+ Currently, the built-in assets feature does not include a `` component.
+
+ Instead, you can use the HTML image attributes `srcset` and `sizes` or the `` tag [for art direction or to create responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction).
+
+4. Choose a default image service.
+
+ [Sharp](https://github.com/lovell/sharp) is now the default image service used for `astro:assets`. If you would like to use Sharp, no configuration is required.
+
+ If you would prefer to use [Squoosh](https://github.com/GoogleChromeLabs/squoosh) to transform your images, update your config with the following `image.service` option:
+
+ ```js title="astro.config.mjs" ins={4-6}
+ import { defineConfig, squooshImageService } from 'astro/config';
+
+ export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+ });
+ ```
+
+### Update Content Collections schemas
+
+You can now declare an associated image for a content collections entry, such as a blog post's cover image, in your frontmatter using its path relative to the current folder.
+
+The new `image` helper for content collections lets you validate the image metadata using Zod. Learn more about [how to use images in content collections](/en/guides/images/#images-in-content-collections)
diff --git a/src/content/docs/en/guides/integrations-guide/image.mdx b/src/content/docs/en/guides/integrations-guide/image.mdx
deleted file mode 100644
index eacbc72045017..0000000000000
--- a/src/content/docs/en/guides/integrations-guide/image.mdx
+++ /dev/null
@@ -1,750 +0,0 @@
----
-# NOTE: This file is auto-generated from 'scripts/generate-integration-pages.ts'
-# and pulls content directly from the package’s README.
-# DO NOT MAKE EDITS TO THIS FILE DIRECTLY, THEY WILL BE OVERWRITTEN!
-# For corrections, please edit the package README at
-# https://github.com/withastro/astro/tree/main/packages/integrations/image/
-#
-# TRANSLATORS: please remove this note and the component.
-
-type: integration
-title: '@astrojs/image'
-description: Learn how to use the @astrojs/image integration in your Astro project.
-githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/image/'
-hasREADME: true
-category: other
-i18nReady: true
----
-
-import Video from '~/components/Video.astro';
-import DontEditWarning from '~/components/DontEditWarning.astro';
-
-
-
-> ⚠️ This integration will be deprecated in Astro v3.0 (Fall 2023) in favor of the `astro:assets` module. Please see the [Assets documentation](/en/guides/assets/) for more information.
-
-This **[Astro integration][astro-integration]** optimizes images in your [Astro project](https://astro.build/). It is supported in Astro v2 only for all static sites and for [some server-side rendering deploy hosts](#installation).
-
-## Why `@astrojs/image`?
-
-Images play a big role in overall site performance and usability. Serving properly sized images makes all the difference but is often tricky to automate.
-
-This integration provides `` and `` components as well as a basic image transformer, with full support for static sites and server-side rendering. The built-in image transformer is also replaceable, opening the door for future integrations that work with your favorite hosted image service.
-
-## Installation
-
-Along with our integration, we recommend installing [sharp](https://sharp.pixelplumbing.com/) when appropriate.
-
-The `@astrojs/image` default image transformer is based on [Squoosh](https://github.com/GoogleChromeLabs/squoosh) and uses WebAssembly libraries to support most deployment environments, including those that do not support sharp, such as StackBlitz.
-
-For faster builds and more fine-grained control of image transformations, install sharp in addition to `@astrojs/image` if
-
-* You are building a static site with Astro.
-* You are using an SSR deployment host that supports NodeJS using `@astrojs/netlify/functions`, `@astrojs/vercel/serverless` or `@astrojs/node`.
-
-Note that `@astrojs/image` is not currently supported on
-
-* Cloudflare SSR
-* `@astrojs/deno`
-* `@astrojs/netlify/edge-functions`
-* `@astrojs/vercel/edge`
-
-### Quick Install
-
-The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
-
-```sh
-# Using NPM
-npx astro add image
-# Using Yarn
-yarn astro add image
-# Using PNPM
-pnpm astro add image
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Manual Install
-
-First, install the `@astrojs/image` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
-
-```sh
-npm install @astrojs/image
-```
-
-Then, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```js ins={3} "image()"
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- // ...
- integrations: [image()],
-});
-```
-
-### Installing `sharp` (optional)
-
-First, install the `sharp` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
-
-```sh
-npm install sharp
-```
-
-Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
-
-```js ins={8}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- // ...
- integrations: [
- image({
- serviceEntryPoint: '@astrojs/image/sharp',
- }),
- ],
-});
-```
-
-### Update `env.d.ts`
-
-For the best development experience, add the integrations type definitions to your project's `env.d.ts` file.
-
-```typescript
-// Replace `astro/client` with `@astrojs/image/client`
-///
-```
-
-Or, alternatively if your project is using the types through a `tsconfig.json`
-
-```json
-{
- "compilerOptions": {
- // Replace `astro/client` with `@astrojs/image/client`
- "types": ["@astrojs/image/client"]
- }
-}
-```
-
-## Usage
-
-```astro title="src/pages/index.astro"
----
-import { Image, Picture } from '@astrojs/image/components';
-import heroImage from '../assets/hero.png';
----
-
-// optimized image, keeping the original width, height, and image format
-
-
-// specify multiple sizes for responsive images or art direction
-
----
-```
-
-The included image transformers support resizing images and encoding them to different image formats. Third-party image services will be able to add support for custom transformations as well (ex: `blur`, `filter`, `rotate`, etc).
-
-Astro’s `` and `` components require the `alt` attribute, which provides descriptive text for images. A warning will be logged if alt text is missing, and a future release of the integration will throw an error if no alt text is provided.
-
-If the image is merely decorative (i.e. doesn’t contribute to the understanding of the page), set `alt=""` so that the image is properly understood and ignored by screen readers.
-
-### ``
-
-The built-in `` component is used to create an optimized `` for both remote images accessed by URL as well as local images imported from your project's `src/` directory.
-
-In addition to the component-specific properties, any valid HTML attribute for the `` included in the `` component will be included in the built ``.
-
-#### src
-
-
-
-Source for the original image file.
-
-For remote images, provide the full URL. (e.g. `src="https://astro.build/assets/blog/astro-1-release-update.avif"`)
-
-For images located in your project's `src/`: use the file path relative to the `src/` directory. (e.g. `src="../assets/source-pic.png"`)
-
-For images located in your `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
-
-#### alt
-
-
-
-**Type:** `string`
-**Required:** `true`
-
-
-
-Defines an alternative text description of the image.
-
-Set to an empty string (`alt=""`) if the image is not a key part of the content (e.g. it's decoration or a tracking pixel).
-
-#### format
-
-
-
-The output format to be used in the optimized image. The original image format will be used if `format` is not provided.
-
-This property is required for remote images when using the default image transformer Squoosh, this is because the original format cannot be inferred.
-
-Added in v0.15.0: You can use the `` component when working with SVG images, but the `svg` option can only be used when the original image is a `.svg` file. Other image formats (like `.png` or `.jpg`) cannot be converted into vector images. The `.svg` image itself will not be transformed, but the final `` will be properly optimized by the integration.
-
-#### quality
-
-
-
-The compression quality used during optimization. The image service will use its own default quality depending on the image format if not provided.
-
-#### width
-
-
-
-The desired width of the output image. Combine with `height` to crop the image to an exact size, or `aspectRatio` to automatically calculate and crop the height.
-
-Dimensions are optional for local images, the original image size will be used if not provided.
-
-For remote images, including images in `public/`, the integration needs to be able to calculate dimensions for the optimized image. This can be done by providing `width` and `height` or by providing one dimension and an `aspectRatio`.
-
-#### height
-
-
-
-The desired height of the output image. Combine with `width` to crop the image to an exact size, or `aspectRatio` to automatically calculate and crop the width.
-
-Dimensions are optional for local images, the original image size will be used if not provided.
-
-For remote images, including images in `public/`, the integration needs to be able to calculate dimensions for the optimized image. This can be done by providing `width` and `height` or by providing one dimension and an `aspectRatio`.
-
-#### aspectRatio
-
-
-
-The desired aspect ratio of the output image. Combine with either `width` or `height` to automatically calculate and crop the other dimension.
-
-A `string` can be provided in the form of `{width}:{height}`, ex: `16:9` or `3:4`.
-
-A `number` can also be provided, useful when the aspect ratio is calculated at build time. This can be an inline number such as `1.777` or inlined as a JSX expression like `aspectRatio={16/9}`.
-
-For remote images, including images in `public/`, the integration needs to be able to calculate dimensions for the optimized image. This can be done by providing `width` and `height` or by providing one dimension and an `aspectRatio`.
-
-#### background
-
-
-
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
-
-The background color is used to fill the remaining background when using `contain` for the `fit` property.
-
-The background color is also used for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
-doesn't support transparency (i.e. `jpeg`), it's advisable to include a background color, otherwise black will be used
-as default replacement for transparent pixels.
-
-The parameter accepts a `string` as value.
-
-The parameter can be a [named HTML color](https://www.w3schools.com/tags/ref_colornames.asp), a hexadecimal
-color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, an RGB definition in the form
-`rgb(100,100,100)`, an RGBA definition in the form `rgba(100,100,100, 0.5)`.
-
-#### fit
-
-
-
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
-
-How the image should be resized to fit both `height` and `width`.
-
-#### position
-
-
-
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
-
-Position of the crop when fit is `cover` or `contain`.
-
-### ``
-
-The built-in `` component is used to create an optimized `` for both remote images accessed by URL as well as local images imported from your project's `src/` directory.
-
-In addition to the component-specific properties, any valid HTML attribute for the `` included in the `` component will be included in the built ``.
-
-#### src
-
-
-
-Source for the original image file.
-
-For remote images, provide the full URL. (e.g. `src="https://astro.build/assets/blog/astro-1-release-update.avif"`)
-
-For images located in your project's `src/`: use the file path relative to the `src/` directory. (e.g. `src="../assets/source-pic.png"`)
-
-For images located in your `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
-
-#### alt
-
-
-
-**Type:** `string`
-**Required:** `true`
-
-
-
-Defines an alternative text description of the image.
-
-Set to an empty string (`alt=""`) if the image is not a key part of the content (e.g. it's decoration or a tracking pixel).
-
-#### sizes
-
-
-
-**Type:** `string`
-**Required:** `true`
-
-
-
-The HTMLImageElement property `sizes` allows you to specify the layout width of the image for each of a list of media conditions.
-
-See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) for more details.
-
-#### widths
-
-
-
-**Type:** `number[]`
-**Required:** `true`
-
-
-
-The list of sizes that should be built for responsive images. This is combined with `aspectRatio` to calculate the final dimensions of each built image.
-
-```astro
-// Builds three images: 400x400, 800x800, and 1200x1200
-
-```
-
-#### aspectRatio
-
-
-
-The desired aspect ratio of the output image. This is combined with `widths` to calculate the final dimensions of each built image.
-
-A `string` can be provided in the form of `{width}:{height}`, ex: `16:9` or `3:4`.
-
-A `number` can also be provided, useful when the aspect ratio is calculated at build time. This can be an inline number such as `1.777` or inlined as a JSX expression like `aspectRatio={16/9}`.
-
-For remote images, including images in `public/`, `aspectRatio` is required to ensure the correct `height` can be calculated at build time.
-
-#### formats
-
-
-
-The output formats to be used in the optimized image. If not provided, `webp` and `avif` will be used in addition to the original image format.
-
-For remote images, including images in `public/`, the original image format is unknown. If not provided, only `webp` and `avif` will be used.
-
-#### background
-
-
-
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
-
-The background color to use for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
-doesn't support transparency (i.e. `jpeg`), it's advisable to include a background color, otherwise black will be used
-as default replacement for transparent pixels.
-
-The parameter accepts a `string` as value.
-
-The parameter can be a [named HTML color](https://www.w3schools.com/tags/ref_colornames.asp), a hexadecimal
-color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`, or an RGB definition in the form
-`rgb(100,100,100)`.
-
-#### fit
-
-
-
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
-
-How the image should be resized to fit both `height` and `width`.
-
-#### position
-
-
-
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
-
-Position of the crop when fit is `cover` or `contain`.
-
-### `getImage`
-
-This is the helper function used by the `` component to build `` attributes for the transformed image. This helper can be used directly for more complex use cases that aren't currently supported by the `` component.
-
-This helper takes in an object with the same properties as the `` component and returns an object with attributes that should be included on the final `` element.
-
-This can be helpful if you need to add preload links to a page's ``.
-
-```astro
----
-import { getImage } from '@astrojs/image';
-
-const { src } = await getImage({
- src: import('../assets/hero.png'),
- alt: 'My hero image',
-});
----
-
-
-
-
-
-
-```
-
-### `getPicture`
-
-This is the helper function used by the `` component to build multiple sizes and formats for responsive images. This helper can be used directly for more complex use cases that aren't currently supported by the `` component.
-
-This helper takes in an object with the same properties as the `` component and returns an object attributes that should be included on the final `` element **and** a list of sources that should be used to render all ``s for the `` element.
-
-## Configuration
-
-The integration can be configured to run with a different image service, either a hosted image service or a full image transformer that runs locally in your build or SSR deployment.
-
-> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in image service when using `astro dev`.
-
-### config.serviceEntryPoint
-
-The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- integrations: [
- image({
- // Example: The entrypoint for a third-party image service installed from NPM
- serviceEntryPoint: 'my-image-service/astro.js',
- }),
- ],
-});
-```
-
-### config.logLevel
-
-The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build.
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- integrations: [
- image({
- // supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
- // default: 'info'
- logLevel: 'debug',
- }),
- ],
-});
-```
-
-### config.cacheDir
-
-During static builds, the integration will cache transformed images to avoid rebuilding the same image for every build. This can be particularly helpful if you are using a hosting service that allows you to cache build assets for future deployments.
-
-Local images will be cached for 1 year and invalidated when the original image file is changed. Remote images will be cached based on the `fetch()` response's cache headers, similar to how a CDN would manage the cache.
-
-By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options.
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- integrations: [
- image({
- // may be useful if your hosting provider allows caching between CI builds
- cacheDir: './.cache/image',
- }),
- ],
-});
-```
-
-Caching can also be disabled by using `cacheDir: false`.
-
-## Examples
-
-### Local images
-
-Image files in your project's `src/` directory can be imported in frontmatter and passed directly to the `` component as the `src=` attribute value. `alt` is also required.
-
-All other properties are optional and will default to the original image file's properties if not provided.
-
-```astro
----
-import { Image } from '@astrojs/image/components';
-import heroImage from '../assets/hero.png';
----
-
-// optimized image, keeping the original width, height, and image format
-
-
-// height will be recalculated to match the original aspect ratio
-
-
-// cropping to a specific width and height
-
-
-// cropping to a specific aspect ratio and converting to an avif format
-
-
-// image imports can also be inlined directly
-
-```
-
-#### Images in `/public`
-
-The `` component can also be used with images stored in the `public/` directory and the `src=` attribute is relative to the public folder. It will be treated as a remote image, which requires either both `width` and `height`, or one dimension and an `aspectRatio` attribute.
-
-Your original image will be copied unprocessed to the build folder, like all files located in public/, and Astro’s image integration will also return optimized versions of the image.
-
-For example, use an image located at `public/social.png` in either static or SSR builds like so:
-
-```astro title="src/pages/page.astro"
----
-import { Image } from '@astrojs/image/components';
-import socialImage from '/social.png';
----
-
-// In static builds: the image will be built and optimized to `/dist`. // In SSR builds: the image
-will be optimized by the server when requested by a browser.
-
-```
-
-### Remote images
-
-Remote images can be transformed with the `` component. The `` component needs to know the final dimensions for the `` element to avoid content layout shifts. For remote images, this means you must either provide `width` and `height`, or one of the dimensions plus the required `aspectRatio`.
-
-```astro
----
-import { Image } from '@astrojs/image/components';
-
-const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png';
----
-
-// cropping to a specific width and height
-
-
-// height will be recalculated to match the aspect ratio
-
-```
-
-### Responsive pictures
-
-The `` component can be used to automatically build a `` with multiple sizes and formats. Check out [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) for a deep dive into responsive images and art direction.
-
-By default, the picture will include formats for `avif` and `webp`. For local images only, the image's original format will also be included.
-
-For remote images, an `aspectRatio` is required to ensure the correct `height` can be calculated at build time.
-
-```astro
----
-import { Picture } from '@astrojs/image/components';
-import hero from '../assets/hero.png';
-
-const imageUrl =
- 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
----
-
-// Local image with multiple sizes
-
-
-// Remote image (aspect ratio is required)
-
-
-// Inlined imports are supported
-
-```
-
-### Setting Default Values
-
-Currently, there is no way to specify default values for all `` and `` components. Required attributes should be set on each individual component.
-
-As an alternative, you can wrap these components in another Astro component for reuse. For example, you could create a component for your blog post images:
-
-```astro title="src/components/BlogPostImage.astro"
----
-import { Picture } from '@astrojs/image/components';
-
-const { src, ...attrs } = Astro.props;
----
-
-
-
-
-```
-
-### Using `` with the Image Integration
-
-The official image integration will change image imports to return an object rather than a source string.
-The object has the following properties, derived from the imported file:
-
-```ts
-{
- src: string;
- width: number;
- height: number;
- format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
-}
-```
-
-If you have the image integration installed, refer to the `src` property of the object when using ``.
-
-```astro ".src"
----
-import rocket from '../images/rocket.svg';
----
-
-
-```
-
-Alternatively, add `?url` to your imports to tell them to return a source string.
-
-```astro "?url"
----
-import rocket from '../images/rocket.svg?url';
----
-
-
-```
-
-## Troubleshooting
-
-* If your installation doesn't seem to be working, try restarting the dev server.
-* If you edit and save a file and don't see your site update accordingly, try refreshing the page.
-* If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server.
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
-
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-[astro-integration]: /en/guides/integrations-guide/
-
-## Contributing
-
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
-
-## Changelog
-
-See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/image/CHANGELOG.md) for a history of changes to this integration.
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx
index 2e7e82bd866e2..9496bc43dbbd3 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx
@@ -87,8 +87,6 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu
- **@astrojs/react**: to reuse some existing React UI components in your new Astro site or keep writing with React components.
-- **@astrojs/image**: to replace Gatsby's Image plugin with Astro's own image-optimizing components. (Experimental: works in `.astro` and `.mdx` files only.)
-
- **@astrojs/mdx**: to bring existing MDX files from your Gatsby project, or to use MDX in your new Astro site.
@@ -321,36 +319,29 @@ See more about [Styling in Astro](/en/guides/styling/).
### Gatsby Image Plugin to Astro
-:::note
-Astro v3.0 will include a new `astro:assets` module and will deprecate the existing `@astrojs/image` integration.
-
-Access to `astro:assets` is currently available under an experimental flag, and is the recommended way to begin a new Astro project. If you are migrating to Astro pre-v3.0, we recommend [enabling the experimental flag to use assets](/en/guides/assets/) as an image solution.
-:::
-
-Convert Gatsby's `` and `` components with [Astro's own image integration components](/en/guides/images/#astros-image-integration), or with a standard HTML `` / JSX `` tag as appropriate.
+Convert Gatsby's `` and `` components to [Astro's own image integration components](/en/guides/images/#image--astroassets), or to a [standard HTML `` / JSX ``](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
```astro title="src/pages/index.astro"
---
-import { Image } from '@astrojs/image/components';
-import localImage from "../images/brand/logo.png";
-import rocket from '../images/rocket.svg';
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
---
-
-
+
+
```
-Astro's `` and `` components are experimental and currently work in `.astro` and `.mdx` files only. See a [full list of component attributes](/en/guides/integrations-guide/image/#usage) available for these components, and note that several will differ from Gatsby's attributes.
+Astro's `` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Gatsby's attributes.
-To continue using local images in Markdown (`.md`) files using standard Markdown syntax (`![]()`), move your images into your `public/` folder. You may need to update the link to the relative URL. You can also use the standard `` tag in these files. Note that these [images in `public/` will not be optimized by Astro](/en/guides/images/#public).
+To continue using [images in Markdown (`.md`) files](/en/guides/images/#images-in-markdown-files) using standard Markdown syntax (`![]()`), you may need to update the link. Using the HTML `` tag directy is not supported in `.md` files for local images, and must be converted to Markdown syntax.
```md
# My Markdown Page
-
-
-
+
+
+
```
In React (`.jsx`) components, use standard JSX image syntax (``). Astro will not optimize these images, but you can install and use NPM packages for more flexibility.
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
index 20b13d4dfa781..6dfd7798e88d8 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
@@ -83,8 +83,6 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu
- **@astrojs/react**: to reuse some existing React UI components in your new Astro site, or keep writing with React components.
-- **@astrojs/image**: to replace Next's Image plugin with Astro's own image-optimizing components. (Experimental: works in `.astro` and `.mdx` files only.)
-
- **@astrojs/mdx**: to bring existing MDX files from your Next project, or to use MDX in your new Astro site.
### Put your source code in `src`
@@ -419,22 +417,17 @@ See more about [Styling in Astro](/en/guides/styling/).
### Next Image Plugin to Astro
-:::note
-Astro v3.0 will include a new `astro:assets` module and will deprecate the existing `@astrojs/image` integration.
-
-Access to `astro:assets` is currently available under an experimental flag, and is the recommended way to begin a new Astro project. If you are migrating to Astro pre-v3.0, we recommend [enabling the experimental flag to use assets](/en/guides/assets/) as an image solution.
-:::
+Convert any Next `` components to [Astro's own image component](/en/guides/images/#image--astroassets) in `.astro` or `.mdx` files, or to a [standard HTML `` / JSX ``](/en/guides/images/#images-in-ui-framework-components) tag as appropriate in your React components.
-Convert any Next `` components with [Astro's own image integration components](/en/guides/images/#astros-image-integration), or with a standard HTML ``. See a [full list of component attributes](/en/guides/integrations-guide/image/#usage) available for Astro's `` and `` components, and note that several will differ from Next's attributes.
+Astro's `` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Next's attributes.
```astro title="src/pages/index.astro"
---
-import { Image } from '@astrojs/image/components';
-import localImage from "../images/brand/logo.png";
-import rocket from '../images/rocket.svg';
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
---
-
-
+
+
```
In React (`.jsx`) components, use standard JSX image syntax (``). Astro will not optimize these images, but you can install and use NPM packages for more flexibility.
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx
index 296ed93cf8930..d95736d2148ca 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx
@@ -85,8 +85,6 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu
- **@astrojs/vue**: to reuse some existing Vue UI components in your new Astro site, or keep writing with Vue components.
-- **@astrojs/image**: to replace Nuxt's Image plugin with Astro's own image-optimizing components.
-
- **@astrojs/mdx**: to bring existing MDX files from your Nuxt project, or to use MDX in your new Astro site.
### Put your source code in `src`
@@ -489,24 +487,17 @@ See more about [Styling in Astro](/en/guides/styling/).
### Nuxt Image Plugin to Astro
-:::note
-Astro v3.0 will include a new `astro:assets` module and will deprecate the existing `@astrojs/image` integration.
-
-Access to `astro:assets` is currently available under an experimental flag, and is the recommended way to begin a new Astro project. If you are migrating to Astro pre-v3.0, we recommend [enabling the experimental flag to use assets](/en/guides/assets/) as an image solution.
-:::
-
-Convert any [Nuxt `` or `` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro's own image integration components](/en/guides/images/#astros-image-integration), or to a standard HTML `` tag.
+Convert any [Nuxt `` or `` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro's own image component](/en/guides/images/#image--astroassets) in `.astro` or `.mdx` files, or to a [standard HTML ``](/en/guides/images/#images-in-ui-framework-components) or `` tag as appropriate in your Vue components.
-See a [full list of component attributes](/en/guides/integrations-guide/image/#usage) available for Astro's `` and `` components, and note that several will differ from Nuxt's attributes.
+Astro's `` component works in `.astro` and `.mdx` files only. See a [full list of its component attributes](/en/guides/images/#properties) and note that several will differ from Nuxt's attributes.
```astro title="src/pages/index.astro"
---
-import { Image } from '@astrojs/image/components';
-import localImage from "../images/brand/logo.png";
-import rocket from '../images/rocket.svg';
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
---
-
-
+
+
```
In Vue (`.vue`) components within your Astro app, use standard JSX image syntax (``). Astro will not optimize these images, but you can install and use NPM packages for more flexibility.
diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx
index d32890c906563..664359ab60232 100644
--- a/src/content/docs/en/reference/configuration-reference.mdx
+++ b/src/content/docs/en/reference/configuration-reference.mdx
@@ -640,6 +640,13 @@ The service entrypoint can be either one of the included services, or a third-pa
}
```
+### image.domains
+
+Placeholder until merged from Astro repository
+
+### image.remotePatterns
+
+Placeholder until merged from Astro repository
### image.domains (Experimental)
diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx
index 2028ebd13ed20..f8a7947890b52 100644
--- a/src/content/docs/en/reference/image-service-reference.mdx
+++ b/src/content/docs/en/reference/image-service-reference.mdx
@@ -3,11 +3,7 @@ title: Image Service API
i18nReady: true
---
-Astro [assets](/en/guides/assets/) were designed to make it easy for any image optimization service to build a service on top of Astro.
-
-:::caution
-The Image Services API is an experimental Astro feature introduced in v2.1. This API is subject to change before it is marked as stable.
-:::
+`astro:assets` was designed to make it easy for any image optimization service to build a service on top of Astro.
## What is an Image Service?
@@ -229,9 +225,6 @@ Configure the image service to use in `astro.config.mjs`. The config takes the f
import { defineConfig } from "astro/config";
export default defineConfig({
- experimental: {
- assets: true,
- },
image: {
service: {
entrypoint: "your-entrypoint", // 'astro/assets/services/squoosh' | 'astro/assets/services/sharp' | string,
diff --git a/src/content/docs/es/core-concepts/project-structure.mdx b/src/content/docs/es/core-concepts/project-structure.mdx
index a256106dc2018..3d196c818c84c 100644
--- a/src/content/docs/es/core-concepts/project-structure.mdx
+++ b/src/content/docs/es/core-concepts/project-structure.mdx
@@ -65,6 +65,10 @@ Algunos archivos (como los componentes de Astro) no serán enviados al navegador
Mientras esta guía describe algunas convenciones populares utilizadas en la comunidad de Astro, los únicos directorios reservados por Astro son `src/pages/` y `src/content/`. Eres libre de cambiar el nombre y reorganizar cualquier otro directorio de la manera que mejor te convenga.
:::
+### `src/assets`
+
+El directorio [`src/assets`](/es/guides/images/) es la carpeta recomendada para almacenar activos (p. ej, imágenes) que son procesados por Astro. Esto no es obligatorio y no es una carpeta especial reservada.
+
### `src/components`
Los **componentes** son unidades reutilizables de código para tus páginas HTML. Estos componentes pueden ser [componentes de Astro](/es/core-concepts/astro-components/) o [componentes de framework](/es/core-concepts/framework-components/) como React o Vue. Es común agrupar y organizar todos tus componentes en una sola carpeta.
diff --git a/src/content/docs/fr/core-concepts/astro-components.mdx b/src/content/docs/fr/core-concepts/astro-components.mdx
index 2dd8b82618e6b..0b7ccdc3c0661 100644
--- a/src/content/docs/fr/core-concepts/astro-components.mdx
+++ b/src/content/docs/fr/core-concepts/astro-components.mdx
@@ -506,7 +506,7 @@ Les composants HTML ne doivent contenir que du code HTML valide et ne disposent
- Ils ne prennent pas en charge de Script de Composant, les importations côté serveur ou les expressions dynamiques.
- Toutes les balises `
-(必須属性: [`src`](/ja/guides/integrations-guide/image/#src-1)・[`widths`](/ja/guides/integrations-guide/image/#widths)・[`sizes`](/ja/guides/integrations-guide/image/#sizes)・[`alt`](/ja/guides/integrations-guide/image/#alt-1))
+
-フロントマターで画像をインポートして、``コンポーネントの`src`属性へ直接渡します。
+```
-画像の幅と画像のガイダンスをコンポーネントへ渡す必要がありますが、[その他の属性](/ja/guides/integrations-guide/image/#picture-)はオプションです。
+#### Imageコンポーネントを渡す
-``コンポーネントの[`formats`](/ja/guides/integrations-guide/image/#formats)に指定がなければ、デフォルト値は元の画像のフォーマットに加えて`avif`と`webp`が含まれます。
+``コンポーネントは、他のAstroコンポーネントと同様に、**UIフレームワークコンポーネントでは使用できません**。
-#### `public/`の画像
+しかし、`.astro`ファイル内のフレームワークコンポーネントに、``によって生成された静的コンテンツを子要素として渡すか、または[名前付きの``](/ja/core-concepts/framework-components/#フレームワークコンポーネントの中でastroコンポーネントを使用できますか)を使用して渡すことは可能です。
-(必須属性: [`src`](/ja/guides/integrations-guide/image/#src-1)・[`widths`](/ja/guides/integrations-guide/image/#widths)・[`sizes`](/ja/guides/integrations-guide/image/#sizes)・[`alt`](/ja/guides/integrations-guide/image/#alt-1)・[`aspectRatio`](/ja/guides/integrations-guide/image/#aspectratio-1))
-コンポーネントの`src`属性にはpublicフォルダからの相対パスを渡し、`alt`の値を必要とします。
+```astro title="ImageWrapper.astro"
+---
+import ReactComponent from './ReactComponent.jsx';
+import { Image } from "astro:assets"
+import stars from "~/stars/docline.png";
+---
-画像はリモート画像として扱われるため、ビルド時に正しい高さを計算できるように`aspectRatio`の指定が必要です。
+
+
+
+```
-画像の幅と画面サイズに関する指示をコンポーネントに与える必要がありますが、[その他の属性](/ja/guides/integrations-guide/image/#picture-)はオプションです。
+## `getImage()`で画像を生成する
-[`formats`](/ja/guides/integrations-guide/image/#formats)は必須ではありませんが、`public/`フォルダにある画像の元のフォーマットが不明となりデフォルト値は含まれません。何も指定が無ければ、`webp`と`avif`だけが含まれます。
+:::caution
+`getImage()`はサーバー専用のAPIに依存しており、クライアントで使用するとビルドが失敗します。
+:::
-元の画像は`public/`にある他のファイルと同じくビルドフォルダーにそのままコピーされ、Astroの画像インテグレーションは最適化された画像を返します。
+`getImage()`関数は、たとえば[APIルート](/ja/core-concepts/endpoints/#サーバーエンドポイントapiルーティング)など、HTML以外の場所で使用する画像を生成することを目的としています。また、これを使って独自のカスタム``コンポーネントも作成できます。
-#### 例
+`getImage()`は、（`alt`を除く）[Imageコンポーネントと同じプロパティ](#プロパティ)をもつオプションオブジェクトを受け取ります。
```astro
---
-import { Picture } from '@astrojs/image/components';
-import localImage from '../assets/logo.png';
-const remoteImage = 'https://docs.astro.build/assets/full-logo-light.png';
+import { getImage } from "astro:assets";
+import myBackground from "../background.png"
+
+const optimizedBackground = await getImage({src: myBackground, format: 'avif'})
---
-
-
+
+```
+
+`getImage()`は以下のプロパティをもつオブジェクトを返します。
+
+```js
+{
+ options: {...} // 渡されたオリジナルのパラメータ
+ src: "https//..." // 生成された画像へのパス
+ attributes: {...} // 画像をレンダリングするために必要な追加のHTML属性（width、height、styleなど）
+}
+```
+
+## 代替テキスト
+
+すべてのユーザーが同じように画像を見れるわけではないため、画像を使用する際のアクセシビリティは特に重要です。画像に対して[説明的な代替テキスト](https://www.w3.org/WAI/tutorials/images/)を提供するために、`alt`属性を使用してください。
+
+この属性は``コンポーネントでは必須です。代替テキストが指定されていない場合、``はエラーをスローします。
+
+画像が単に装飾用である場合（つまり、ページの理解に貢献していない場合）は、`alt=""`を設定して、スクリーンリーダーが画像を無視するようにしてください。
-
-
+## デフォルトの画像サービス
-
-
+[Sharp](https://github.com/lovell/sharp)は、`astro:assets`で使用されるデフォルトの画像サービスです。
-
-
+画像を変換するために[Squoosh](https://github.com/GoogleChromeLabs/squoosh)を使用したい場合は、以下のように設定を更新してください。
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig, squooshImageService } from 'astro/config';
+
+export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+});
```
-### MDXでの利用
+## コミュニティインテグレーション
-`.mdx`ファイル内では、インポートとエクスポートを通して``と``が画像の`src`を受け取ることができます。
+Astroプロジェクトで画像を最適化したり、画像を扱ったりするための、サードパーティの[コミュニティインテグレーション](https://astro.build/integrations?search=images)があります。
-```mdx
-// src/pages/index.mdx
+## v2.xからv3.0へのアップグレード
-import { Image, Picture } from '@astrojs/image/components';
-import rocket from '../assets/rocket.png';
-export const logo = 'https://docs.astro.build/assets/full-logo-light.png';
+Astro v3.0では、`astro:assets`は実験的な機能ではなくなりました。
+
+``は組み込みのコンポーネントとなり、以前の`@astrojs/image`インテグレーションは削除されました。
+
+これらのことと、Astroで画像を使用するためのその他の変更により、以前のバージョンからAstroプロジェクトをアップグレードすると、いくつかの破壊的な変更が発生する可能性があります。
+
+Astro v2.xプロジェクトをv3.0にアップグレードするには、以下の手順に適切に従ってください。
+
+### `experimental.assets`からのアップグレード
+
+以前に`astro:assets`の実験的なフラグを有効にしていた場合は、Astro v3.0ではデフォルトでアセット機能が含まれているため、プロジェクトを更新する必要があります。
+
+#### `experimental.assets`フラグの削除
+
+実験的なフラグを削除します。
+
+```js title="astro.config.mjs" del={4-6}
+import { defineConfig } from 'astro/config';
-
-
-
-
+export default defineConfig({
+ experimental: {
+ assets: true
+ }
+});
```
-### デフォルト値を設定する
+必要に応じて、`astro/client-image`への参照を`astro/client`に置き換えるために、`src/env.d.ts`ファイルも更新します。
-現在、``と``コンポーネントにデフォルト値を指定する方法はありません。必須属性はそれぞれのコンポーネントに設定する必要があります。
+```ts title="src/env.d.ts" del={1} ins={2}
+///
+///
+```
-代わりの方法として、再利用できるよう他のAstroコンポーネントでこれらのコンポーネントをラッピングできます。例えば、以下のようにブログ記事画像をコンポーネントとして作成できます。
+#### `~/assets`インポートエイリアスの削除
-```astro title="src/components/BlogPostImage.astro"
----
-import { Picture } from '@astrojs/image/components';
+このImportエイリアスは、`astro:assets`にデフォルトで含まれなくなりました。実験的なアセット機能でこのエイリアスを使用していた場合は、相対ファイルパスに変換するか、[自分でImportエイリアスを作成](/ja/guides/aliases/)する必要があります。
-const {src, ...attrs} = Astro.props;
+```astro title="src/pages/posts/post-1.astro" del={2} ins={3}
+---
+import rocket from '~/assets/rocket.png'
+import rocket from '../../assets/rocket.png';
---
-
+```
-
+});
```
-### 画像インテグレーションで``を使う
+### 画像を保存する場所を決める
+
+[画像を保存する場所](#画像を保存する場所)を決めるには、今読んでいるこのガイドを参照してください。`astro:assets`がもたらす柔軟性を活用して、画像を保存するための新しいオプションを利用したい場合があるかもしれません。たとえば、プロジェクトの`src/`からの相対画像は、Markdown、MDX、MarkdocいずれにおいてもMarkdown標準の``構文により参照できるようになりました。
+
+### 既存の``タグを更新する
+
+以前は画像をインポートすると、画像のパスを含む単純な`string`が返されました。現在は、インポートされた画像アセットは以下のシグネチャをもつオブジェクトとなります。
-公式の画像インテグレーションにより、画像のインポートはソース文字列ではなくオブジェクトを返すように変更されます。このオブジェクトは、インポートされたファイルから派生した以下のプロパティを持ちます。
```ts
-{
+interface ImageMetadata {
src: string;
width: number;
height: number;
- format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
+ format: string;
}
```
-画像インテグレーションがインストールされている場合は、``を使用する際にオブジェクトの`src`プロパティを参照してください。
+（[UIフレームワークコンポーネント内の画像](#uiフレームワークコンポーネント内の画像)を含む）既存の``タグの`src`属性の更新が必要です。また、インポートした画像から利用できるようになった他の属性も更新できます。
-```astro ".src"
+```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6}
---
import rocket from '../images/rocket.svg';
---
-
+
+
+
```
-あるいは、インポートに`?url`を追加して、ソース文字列を返すように指示する。
+### Markdown、MDX、Markdocファイルを更新する
-```astro "?url"
----
-import rocket from '../images/rocket.svg?url';
----
-
+プロジェクトの`src/`からの相対画像は、Markdown、MDX、MarkdocいずれにおいてもMarkdown標準の``構文により参照できるようになりました。
+
+これにより、画像を`public/`ディレクトリからプロジェクトの`src/`に移動し、処理を加えて最適化できます。`public/`内の既存の画像とリモート画像は引き続き有効ですが、Astroのビルドプロセスでは最適化されません。
+
+```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/"
+# 私のMarkdownページ
+
+
+
+
+
+
```
-## CMSやCDN上の画像利用
+画像の属性をより細かく制御する必要がある場合は、Markdown構文に加えて、Astroの``コンポーネントやJSXの``タグを使用可能な`.mdx`ファイル形式を使用することをおすすめします。AstroにMDXサポートを追加するには、[MDXインテグレーション](/ja/guides/integrations-guide/mdx/)を使用します。
+
+### `@astrojs/image`を削除する
+
+
+Astro v2.xで画像インテグレーションを使用していた場合は、以下の手順を完了させてください。
+
+1. `@astrojs/image`を削除します。
+
+ [インテグレーションを削除する](/ja/guides/integrations-guide/#インテグレーションを削除する)ためにアンインストールし、また`astro.config.mjs`ファイルからも削除する必要があります。
+
+ ```js del={3,7}
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import image from '@astrojs/image';
+
+ export default defineConfig({
+ integrations: [
+ image(),
+ ]
+ })
+ ```
+
+2. 既存の``コンポーネントを移行します。
+
+ 新しい組み込みの``コンポーネントを使用するために、`@astrojs/image/components`からの`import`文をすべて`astro:assets`に変更します。
+
+ [現在サポートされていない画像アセットのプロパティ](#プロパティ)を削除します。
+
+ たとえば、`aspectRatio`はもうサポートされていません。これは、`width`と`height`属性から自動的に推測されるためです。
+
+ ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3}
+ ---
+ import { Image } from '@astrojs/image/components';
+ import { Image } from 'astro:assets'
+ import localImage from "../assets/logo.png";
+ const localAlt = "Astroのロゴ";
+ ---
+
+
+ ```
+
+3. 既存の``コンポーネントを削除します。
+
+ 現在、組み込みのアセット機能には``コンポーネントは含まれていません。
-CDNネットワーク上の画像をAstroで利用するには、画像の完全なURLを``タグやMarkdownの`src`属性として利用します。
+ 代わりに、HTMLの画像属性`srcset`と`sizes`、または``タグを使用して、[アートディレクションやレスポンシブ画像を作成](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#アートディレクション)できます。
-代わりに、もしCDNがNode.js SDKを提供している場合はプロジェクトでSDKを利用できます。例えば、[CloudinaryのSDK](https://cloudinary.com/documentation/node_integration)は適切な`src`を利用して``タグを生成できます。
+4. デフォルトの画像サービスを選択します。
-Astroの画像インテグレーションの[``を用いた外部画像](#リモート画像)や[``](#リモート画像-1)コンポーネントを利用するには、リモート画像を扱うための適切なサイズとフォーマットを指定する必要があります。
+ [Sharp](https://github.com/lovell/sharp)は、`astro:assets`で使用されるデフォルトの画像サービスとなりました。Sharpを使用する場合は、特に設定は必要ありません。
-## Altテキスト
+ 画像を変換するために[Squoosh](https://github.com/GoogleChromeLabs/squoosh)を使用したい場合は、以下の`image.service`オプションを使用して設定を更新します。
-画像が誰も同じように見えるわけではないため、画像を扱う上でアクセシビリティは特に重要になります。`alt`属性は画像に[Altテキストによる記述](https://www.w3.org/WAI/tutorials/images/)を与えます。
+ ```js title="astro.config.mjs" ins={4-6}
+ import { defineConfig, squooshImageService } from 'astro/config';
-この属性は画像インテグレーションの``と``コンポーネントには必須です。Altテキストが指定されていない場合これらのコンポーネントはエラーを投げます。
+ export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+ });
+ ```
-画像が単なる飾り(ページの理解に貢献しない画像)の場合、スクリーンリーダーが画像を無視するように`alt=""`を設定します。
+### コンテンツコレクションのスキーマを更新する
-## コミュニテーインテグレーション
+ブログ記事のカバー画像など、コンテンツコレクションのエントリに関連付けられた画像を、現在のフォルダからの相対パスによりフロントマターに宣言できるようになりました。
-公式の[`@astrojs/image`](/ja/guides/integrations-guide/image/)インテグレーションに加え、Astroプロジェクトで画像の最適化や処理を行うためのサードパーティー製の[コミュニティー画像インテグレーション](https://astro.build/integrations?search=images)がいくつかあります。
+コンテンツコレクションの新しい`image`ヘルパーにより、Zodを使用して画像のメタデータを検証できるようになりました。コンテンツコレクションで画像を使用する方法について、詳しくは[こちら](#コンテンツコレクションと画像)を参照してください。
diff --git a/src/content/docs/ko/core-concepts/astro-components.mdx b/src/content/docs/ko/core-concepts/astro-components.mdx
index b6f3403bffbaf..232e59cd76947 100644
--- a/src/content/docs/ko/core-concepts/astro-components.mdx
+++ b/src/content/docs/ko/core-concepts/astro-components.mdx
@@ -282,7 +282,7 @@ HTML 컴포넌트는 유효한 HTML만 포함할 수 있으며, 이로 인해 As
- 프론트매터나 서버측 가져오기, 동적 표기법을 지원하지 않습니다.
- 모든 `
+
+
-Ao adicionar imagens em um [componente de framework de UI](/pt-br/core-concepts/framework-components/) (e.x React, Svelte), utilize a sintaxe de imagem apropriada para aquele particular framework de componente.
+```
-## Aonde armazenar imagens
+#### Passando o componente Image
-### `src/`
+O componente ``, assim como qualquer outro componente Astro, **não está disponível para componentes de frameworks de UI**.
-Suas imagens armazenadas em `src/` podem ser utilizadas por componentes (`.astro`, `.mdx` e em outros frameworks de UI) mas não por arquivos Markdown.
+Porém, você pode passar o conteúdo estático gerado por `` para um componente de framework dentro de um arquivo `.astro` como um filho ou utilizando um [`` nomeado](/pt-br/core-concepts/framework-components/#posso-utilizar-componentes-astro-dentro-de-meus-componentes-de-frameworks):
-Nós recomendamos que você mantenha suas imagens em [`public/`](#public) ou as armazene [remotamente](#utilizando-imagens-de-um-cms-ou-cdn) se você precisa utilizar arquivos Markdown.
-Os importe de um **caminho de arquivo relativo** ou [atalho de importação](/pt-br/guides/aliases/) em qualquer arquivo de componente e então utilize a importação como o atributo `src` da imagem.
+```astro title="EnvolvedorImagem.astro"
+---
+import ComponenteReact from './ComponenteReact.jsx';
+import { Image } from "astro:assets"
+import estrelas from "~/estrelas/docline.png";
+---
+
+
+
+
+```
+## Gerando imagens com `getImage()`
+
+:::caution
+`getImage()` depende em APIs únicas do servidor e quebra a build quando é utilizado no cliente.
+:::
+
+A função `getImage()` foi planejada para gerar imagens destinadas a serem em outro lugar do que diretamente no HTML, por exemplo em uma [Rota de API](/pt-br/core-concepts/endpoints/#endpoints-do-servidor-rotas-de-api). Ela te permite criar seu próprio componente `` customizado.
+
+`getImage()` recebe um objeto de opções com as [mesmas propriedades que o componente Image](#propriedades) (exceto `alt`).
```astro
---
-// src/pages/index.astro
+import { getImage } from "astro:assets";
+import meuPlanoFundo from "../planoFundo.png"
-// Acesse imagens em `src/imagens/`
-import logo from '../imagens/logo.png';
+const planoFundoOtimizado = await getImage({src: meuPlanoFundo, format: 'avif'})
---
-
+
+
+```
+
+Retorna um objeto com as seguintes propriedades:
+
+```js
+{
+ options: {...} // Parâmetros originais passados
+ src: "https//..." // Caminho para a imagem gerada
+ attributes: {...} // Atributos HTML adicionais necessários para renderizar a imagem (width, height, style, etc..)
+}
```
-### `public/`
+## Texto Alternativo
-Suas imagens armazenadas em `public/` podem ser utilizadas por componentes (`.astro`, `.mdx` e outros frameworks de UI) e também por arquivos Markdown.
+Nem todos os usuários podem ver imagens da mesma forma, então acessibilidade é uma preocupação especialmente importante ao utilizar imagens. Utilize o atributo `alt` para fornecer [texto alternativo descritivo](https://www.w3.org/WAI/tutorials/images/) para imagens.
+Esse atributo é necessário para o componente ``. `` irá lançar um erro se nenhum texto alternativo for fornecido.
-Porém, arquivos no diretório `/public` são sempre servidas ou copiadas como estão, sem nenhum processamento. Se você está utilizando imagens fora de arquivos Markdown, nós recomendamos que imagens locais sejam mantidas em `src/` quando possível para que o Astro possa transformar, otimizar e fazer bundle delas.
+Se a imagem for meramente decorativa (ou seja, não contribui para o entendimento da página), defina `alt=""` para que leitores de tela saibam ignorar a imagem.
-O atributo `src` é **relativo ao diretório public**. No Markdown, você pode também utilizar a notação `![]()`.
+## Serviço de imagem padrão
-```astro title="src/pages/index.astro"
+[Sharp](https://github.com/lovell/sharp) é o serviço de imagem padrão utilizado em `astro:assets`.
+
+Se você preferir utilizar [Squoosh](https://github.com/GoogleChromeLabs/squoosh) para transformar suas imagens, atualize sua configuração com o seguinte:
+
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig, squooshImageService } from 'astro/config';
+
+export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+});
+```
+
+## Integrações da Comunidade
+
+Há diversas [integrações de imagem da comunidade](https://astro.build/integrations?search=images) por terceiros para otimizar e trabalhar com imagens em seu projeto Astro.
+
+## Atualize para v3.0 da v2.x
+
+`astro:assets` não está mais atrás de uma flag experimental no Astro v3.0.
+
+`` agora é um componente integrado e a integração `@astrojs/image` anterior foi removida.
+
+Essa e outras mudanças em como utilizar imagens no Astro pode causar algumas mudanças radicais ao atualizar seu projeto Astro de uma versão anterior.
+
+Por favor siga as instruções abaixo apropriadamente para atualizar um projeto Astro v2.x para v3.0.
+
+### Atualize de `experimental.assets`
+
+Se você anteriormente habilitou a flag experimental para `astro:assets`, você vai precisar atualizar seu projeto para Astro v3.0 que agora inclui funcionalidades de assets por padrão.
+
+#### Remova a flag `experimental.assets`
+
+Remova a flag experimental:
+
+```js title="astro.config.mjs" del={4-6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+ experimental: {
+ assets: true
+ }
+});
+```
+
+Se necessário, também atualize seu arquivo `src/env.d.ts` para substituir a referência `astro/client-image` com `astro/client`:
+
+```ts title="src/env.d.ts" del={1} ins={2}
+///
+///
+```
+
+#### Remova o atalho de importação `~/assets`
+
+Esse atalho de importação não é mais incluso por padrão com `astro:assets`. Se você esteve utilizando esse atalho com assets experimentais, você deve convertê-los para camianhos de arquivo relativos, ou [criar seu próprio atalho de importação](/pt-br/guides/aliases/).
+
+```astro title="src/pages/posts/post-1.astro" del={2} ins={3}
---
-// Acesse imagens in `public/imagens/`
+import foguete from '~/assets/foguete.png'
+import foguete from '../../assets/foguete.png';
---
-
```
-### `src/assets/` (experimental)
+#### Adicione suporte simples de assets para Cloudflare, Deno, Vercel Edge e Netlify Edge
-Veja o guia [Assets (Experimental)](/pt-br/guides/assets/) para habilitar o uso experimental da pasta `/assets/`.
+Astro v3.0 permite `astro:assets` funcionar sem erros em Cloudflare, Deno, Vercel Edge e Netlify Edge, que não suporta a otimização integrada do Astro, Squoosh e Sharp. Note que Astro não realiza nenhuma transformação e processamento de imagem nesses ambientes. Porém, você ainda pode aproveitar os outros benefícios de se utilizar `astro:assets`, incluindo nenhum Cumulative Layout Shift (CLS), a aplicação do atributo `alt`, e a experiência de autoria consistente.
-Isso vai exigir que você atualize suas imagens existentes, remover a atual integração Image do Astro, e também vai exigir mudanças manuais adicionais para explorar as vantagens de algumas de suas funcionalidades.
+Se você anteriormente evitou utilizar `astro:assets` por conta dessas limitações, agora você pode utilizá-lo sem problemas. Você pode configurar o serviço de imagem no-op para explicitamente optar por esse compartamento:
-## Integração Image do Astro
+```js title="astro.config.mjs" ins={4-8}
+import { defineConfig } from 'astro/config';
-:::note[a ser depreciada em v3.0]
-A integração [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) não terá mais suporte ativo no Astro v3.0.
+export default defineConfig({
+ image: {
+ service: {
+ entrypoint: 'astro/assets/services/noop'
+ }
+ }
+});
+```
-Nós sugerimos remover ela assim que for conveniente e utilizar o módulo experimental `astro:assets` que fará parte do `astro@3.0`.
+### Decida onde armazenar suas imagens
-Siga o [Guia de Assets (Experimental)](/pt-br/guides/assets/) para começar a usar a nova solução de imagens do Astro hoje mesmo!
+Veja o guia de Imagens para te ajudar a decidir [onde armazenar suas imagens](#onde-armazenar-imagens). Você pode desejar se aproveitar de novas opções para armazenar suas imagens com a flexibilidade adicional que `astro:assets` traz. Por exemplo, imagens relativas a partir do `src/` do seu projeto podem ser referenciadas em Markdown, MDX e Markdoc utilizando a sintaxe padrão do Markdown ``.
-**`astro:assets` não é um substituto completo do `@astrojs/image` nesse momento, mas está sob constante desenvolvimento.**
-:::
+### Atualize tags `` existentes
-Para documentação de como usar `@astrojs/image` no Astro v2, por favor veja a [documentação do pacote `@astrojs/image`](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)
+Anteriormente, importar uma imagem iria retornar uma simples `string` com o caminho da imagem. Agora, assets de imagem importadas correspodem a seguinte assinatura:
-## Utilizando Imagens de um CMS ou CDN
+```ts
+interface ImageMetadata {
+ src: string;
+ width: number;
+ height: number;
+ format: string;
+}
+```
-CDNs de imagens funcionam com Astro. Utilize a URL completa de uma imagem como o atributo `src` em uma tag `` ou notação do Markdown.
+Você deve atualizar o atributo `src` de quaisquer tags `` existentes (incluindo quaisquer [imagens em componentes de framework de UI](#imagens-em-componentes-de-frameworks-de-ui)) e você também pode atualizar outros atributos que agora estão disponíveis para você da imagem importada.
-Alternativamente, se o CDN providencia um SDK Node.js, você pode utilizá-lo no seu projeto. Por exemplo, o [SDK da Cloudinary](https://cloudinary.com/documentation/node_integration) podem gerar a tag `` com a `src` apropriada para você.
+```astro title="src/components/MeuComponente.astro" ".src" ".width" ".height" del={4} ins={6}
+---
+import foguete from '../imagens/foguete.svg';
+---
+
-## Texto Alternativo
+
+```
-Nem todos os usuários podem ver imagens da mesma forma, então acessibilidade é uma preocupação especialmente importante ao se utilizar imagens. Use o atributo `alt` para providenciar [texto alternativo descritivo](https://www.w3.org/WAI/tutorials/images/) para imagens.
+### Atualize seus arquivos Markdown, MDX e Markdoc
-Esse atributo é necessário para que os componentes `` e `` da integração Image. Esses componentes irão jogar com um erro quando nenhum texto alternativo é providenciado.
+Imagens relativas da `src/` do seu projeto agora podem ser referenciadas em Markdown, MDX e Markdoc utilizando a sintaxe padrão do Markdown ``.
-Se a imagem é meramente decorativa (ou seja, não contribui para o entendimento da página), defina `alt=""` para que a imagem seja propriamente entendida e ignorada por leitores de tela.
+Isso te permite mover suas imagens do diretório `public/` para o `src/` do seu projeto onde agora elas serão processadas e otimizadas. Suas imagens existentes em `public/` e imagens remotas ainda são válidas mas não são otimizadas pelo processo de build do Astro.
+```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/"
+# Minha Página Markdown
+
+
-## Integrações da Comunidade
+
+
+```
+
+Se você requer mais controle sobre seus atributos de imagem, nós recomendamos utilizar o formato de arquivo `.mdx`, que te permite incluir o componente `` do Astro ou uma tag `` JSX em adição a sintaxe do Markdown. Utilize a [integração MDX](/pt-br/guides/integrations-guide/mdx/) para adicionar suporte de MDX para Astro.
+
+### Remova `@astrojs/image`
+
+
+Se você estava utilizando a integração de imagem em Astro v2.x, complete as seguintes etapas:
+
+1. Remova a integração `@astrojs/image`.
+
+ Você deve [remover a integração](/pt-br/guides/integrations-guide/#removendo-uma-integração) a desinstalando e então a removendo do seu arquivo `astro.config.mjs`.
+
+ ```js del={3,7}
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import image from '@astrojs/image';
+
+ export default defineConfig({
+ integrations: [
+ image(),
+ ]
+ })
+ ```
+
+2. Migre quaisquer componentes ``.
+
+ Modifique todas as declarações `import` de `@astrojs/image/components` para `astro:assets` para utilizar o novo componente `` integrado.
+
+ Remova quaisquer atributos do componente que não são [propriedades de asset de imagem atualmente suportadas](#propriedades).
+
+ Por exemplo, `aspectRatio` não é mais suportado, já que agora é automaticamente inferido dos atributos `width` e `height`.
+
+ ```astro title="src/components/MeuComponente.astro" del= {2,11} ins={3}
+ ---
+ import { Image } from '@astrojs/image/components';
+ import { Image } from 'astro:assets'
+ import imagemLocal from "../assets/logo.png";
+ const altLocal = "A logo do Astro";
+ ---
+
+
+ ```
+
+3. Remova quaisquer componentes ``.
+
+ Atualmente, a funcionalidade de assets integrada não inclui um componente ``.
+
+ No lugar, você pode utilizar os atributos de imagem HTML `srcset` e `sizes` ou a tag `` [para direção de imagem ou para criar imagens responsivas](https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction).
+
+4. Escolha o serviço de imagem padrão.
+
+ [Sharp](https://github.com/lovell/sharp) agora é o serviço de imagem padrão usado para `astro:assets`. Se você quiser utilizar Sharp, nenhuma configuração é necessária.
+
+ Se você preferir utilizar [Squoosh](https://github.com/GoogleChromeLabs/squoosh) para transformar suas imagens, atualize sua configuração com a opção `image.service` a seguir:
+
+ ```js title="astro.config.mjs" ins={4-6}
+ import { defineConfig, squooshImageService } from 'astro/config';
+
+ export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+ });
+ ```
+
+### Atualize Esquemas de Coleções de Conteúdo
+
+Agora você pode declarar uma imagem associada a uma entrada de coleções de conteúdo, como a imagem de capa de uma postagem de blog, em seu frontmatter utilizando seu caminho relativo a pasta atual.
-Em adição a integração oficial [`@astrojs/image`](/pt-br/guides/integrations-guide/image/), tem várias [integrações de imagens da comunidade](https://astro.build/integrations?search=images) feitas por terceiros para otimizar e trabalhar com imagens em seu projeto Astro.
+O novo utilitário `image` para coleções de conteúdo te permite validar os metadados da imagem utilizando Zod. Aprenda mais sobre [como utilizar imagens em coleções de conteúdo](/pt-br/guides/images/#imagens-em-coleções-de-conteúdo)
\ No newline at end of file
diff --git a/src/content/docs/zh-cn/core-concepts/astro-components.mdx b/src/content/docs/zh-cn/core-concepts/astro-components.mdx
index b19d373777f7e..c608adc7fd58b 100644
--- a/src/content/docs/zh-cn/core-concepts/astro-components.mdx
+++ b/src/content/docs/zh-cn/core-concepts/astro-components.mdx
@@ -335,7 +335,7 @@ HTML 组件必须只包含有效的 HTML，因此缺乏关键的 Astro 组件功
- 他们不支持 frontmatter、服务器端导入或动态表达。
- 无法捆绑任何 `
+
+
+
+```
+
+#### 传递 Image 组件
+
+`` 组件，就像任何其他 Astro 组件一样，**对 UI 框架组件不可用**。
+
+但是，你可以将 `` 生成的静态内容作为子组件传递给 `.astro` 文件中的框架组件，或者使用 [命名的 ``](/zh-cn/core-concepts/framework-components/#我可以在我的框架组件中使用-astro-组件吗)。
+
+
+```astro title="ImageWrapper.astro"
+---
+import ReactComponent from './ReactComponent.jsx';
+import { Image } from "astro:assets"
+import stars from "~/stars/docline.png";
---
-
+
+
+
+
```
-### `public/`
+## 使用 `getImage()` 生成图像
-存储在 `public/` 中的图像可以被组件（`.astro`，`.mdx`和其他UI框架）和Markdown文档使用。
+:::caution
+`getImage()` 依赖于仅在服务端可用的 API，当在客户端使用时会导致构建失败。
+:::
-然而，位于 `/public` 目录中的文件始终按原样提供或复制，不进行任何处理。如果你在 Markdown 文件之外使用图像，我们建议尽可能将本地图像保存在 `src/` 中，以便 Astro 对其进行转换、优化和打包。
+`getImage()` 函数用于生成图像，这些图像将被用于除了直接在 HTML 中使用之外的其他地方，例如在 [API 路由](/zh-cn/core-concepts/endpoints/#服务器端点api-路由) 中。它还允许你创建自己的自定义 `` 组件。
-`src` 属性是 **相对于 public 文件夹的**。在 Markdown 中，你可以使用 `![]()` 表示。
+`getImage()` 函数接受一个选项对象，其中包含与 [Image 组件](#属性) 相同的属性（除了 `alt`）。
```astro
---
-// src/pages/index.astro
+import { getImage } from "astro:assets";
+import myBackground from "../background.png"
-// 存取放在 `public/images/` 里的图片
+const optimizedBackground = await getImage({src: myBackground, format: 'avif'})
---
-
+
+
```
-### `src/assets/` （实验性）
+它返回一个具有以下属性的对象：
-请参阅 [资源（实验性）](/zh-cn/guides/assets/) 指南，了解如何启用 `/assets/` 文件夹的实验性用法。
+```js
+{
+ options: {...} // 传递的原始参数
+ src: "https//..." // 生成图像的路径
+ attributes: {...} // 渲染图像所需的附加 HTML 属性（宽度、高度、样式等）
+}
+```
-这将需要你更新现有图片，删除当前的 Astro 图片集成，并且还需要额外的手动更改以利用其某些新功能。
+## 替代文本
-## Astro 的图片集成
+不是所有用户都能以相同的方式看到图像，因此在使用图像时，无障碍性尤为重要。使用 `alt` 属性为图像提供 [描述性的 alt 文本](https://www.w3.org/WAI/tutorials/images/)。
-:::note[将在 v3.0 中弃用]
-Astro v3 将不再主动支持 [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) 集成
+这个属性是 `` 组件必须的。如果没有提供 alt 文本，`` 将抛出一个错误。
-我们建议你尽早删除它，并使用将内置在 `astro@3.0` 中的实验性 `astro:assets` 模块。
+如果图像仅仅是装饰性的（即不会对页面的理解有所贡献），请设置 `alt=""` 以便屏幕阅读器和其他辅助技术知道忽略该图像。
-请按照 [资源（实验性）使用指南](/zh-cn/guides/assets/) 开始使用新的图片解决方案！
+## 默认图像服务
-**`astro:assets` 目前还不能完全替代 `@astrojs/image` ，但它正在被积极开发中。**
-:::
+[Sharp](https://github.com/lovell/sharp) 是 `astro:assets` 的默认图像服务。
+
+如果你想使用 [Squoosh](https://github.com/GoogleChromeLabs/squoosh) 来转换你的图像，请使用以下配置更新你的配置：
+
+
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig, squooshImageService } from 'astro/config';
+
+export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+});
+```
+
+## 社区集成
+
+这里有几个第三方 [社区图像集成](https://astro.build/integrations?search=images)，用于优化和处理 Astro 项目中的图像。
+
+## 从 v2.x 升级到 v3.0
+
+`astro:assets` 不再是 Astro v3.0 中的实验性标志。
+
+`` 现在是内置组件，之前的 `@astrojs/image` 集成已被删除。
+
+当你从早期版本升级你的 Astro 项目时，这些和其他伴随的更改，可能会导致一些破坏性的变化。
+
+请根据需要按照以下说明将 Astro v2.x 项目升级到 v3.0。
+
+### 从 `experimental.assets` 升级
+
+如果你之前启用了 `astro:assets` 的实验性标志，你需要更新你的项目到 Astro v3.0，它现在默认包含了 assets 功能。
+
+#### 移除 `experimental.assets` 标志
+
+移除实验性标志：
+
+```js title="astro.config.mjs" del={4-6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+ experimental: {
+ assets: true
+ }
+});
+```
+
+如果需要，还可以更新你的 `src/env.d.ts` 文件，将 `astro/client-image` 引用替换为 `astro/client`：
+
+```ts title="src/env.d.ts" del={1} ins={2}
+///
+///
+```
+
+#### 移除`~/assets` 导入别名
+
+这个导入别名不再默认包含在 `astro:assets` 中。如果你之前使用这个别名，你必须将它们转换为相对文件路径，或者 [创建你自己的导入别名](/zh-cn/guides/aliases/)。
+
+```astro title="src/pages/posts/post-1.astro" del={2} ins={3}
+---
+import rocket from '~/assets/rocket.png'
+import rocket from '../../assets/rocket.png';
+---
+```
+
+#### 为 Cloudflare, Deno, Vercel Edge 和 Netlify Edge 添加简单的资源支持
+
+ Astro v3.0 允许 `astro:assets` 在 Cloudflare、Deno、Vercel Edge 和 Netlify Edge 中无错误地工作，这些环境不支持 Astro 的内置 Squoosh 和 Sharp 图像优化。请注意，Astro 不会在这些环境中执行任何图像转换和处理。但是，你仍然可以享受使用 `astro:assets` 的其他好处，包括没有累积布局移位（CLS）、强制执行的 `alt` 属性和一致的创作体验。
+
+ 如果你之前因为这些限制而避免使用 `astro:assets`，现在你可以在没有问题的情况下使用它们。你可以配置无操作图像服务来显式地选择这种行为：
+
+ ```js title="astro.config.mjs" ins={4-8}
+ import { defineConfig } from 'astro/config';
+
+ export default defineConfig({
+ image: {
+ service: {
+ entrypoint: 'astro/assets/services/noop'
+ }
+ }
+ });
+ ```
+
+### 决定在哪里存储你的图像
+
+请参阅 [图像指南](#在哪里存储图像) 来帮助你决定在哪里存储你的图像。你可能希望利用 `astro:assets` 带来的灵活性，来存储你的图像的新选项。例如，现在可以使用标准的 Markdown `` 语法，在 Markdown、MDX 和 Markdoc 中引用项目 `src/` 中的相对图像。
+
+### 更新现有的 `` 标签
+
+以前，导入图像将返回一个简单的 `string`，其中包含图像的路径。现在，导入的图像资源与以下签名相匹配：
+
+```ts
+interface ImageMetadata {
+ src: string;
+ width: number;
+ height: number;
+ format: string;
+}
+```
+
+你必须更新任何现有 `` 标签的 `src` 属性（包括任何 [UI 框架组件中的图像](#框架组件中的图像)），你也可以更新从导入的图像中获得的其他属性。
+
+```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6}
+---
+import rocket from '../images/rocket.svg';
+---
+
+
+
+```
+
+### 更新你的 Markdown, MDX, 和 Markdoc 文件
+
+现在可以使用标准的 Markdown `` 语法，在 Markdown、MDX 和 Markdoc 中引用项目 `src/` 中的相对图像。
+
+这允许你将图像从 `public/` 目录移动到你的项目 `src/`，它们现在将被处理和优化。你现有的 `public/` 中的图像和远程图像仍然有效，但不会被 Astro 的构建过程优化。
+
+```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/"
+# 我的 Markdown 页面
+
+
+
+
+
+
+```
+
+如果你需要对图像属性做更多的控制，我们建议使用 `.mdx` 文件格式，除了 Markdown 语法，你还可以使用 Astro 的 `` 组件或 JSX `` 标签。使用 [MDX 集成](/zh-cn/guides/integrations-guide/mdx/) 为 Astro 添加对 MDX 的支持。
+
+### 移除 `@astrojs/image`
+
+
+如果你在 Astro v2.x 中使用了图像集成，请完成以下步骤：
+
+1. 移除 `@astrojs/image` 集成。
+
+ 你必须通过卸载并从你的 `astro.config.mjs` 文件中删除它，来 [移除集成](/zh-cn/guides/integrations-guide/#移除集成)。
+
+ ```js del={3,7}
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import image from '@astrojs/image';
+
+ export default defineConfig({
+ integrations: [
+ image(),
+ ]
+ })
+ ```
+
+2. 迁移任何现有的 `` 组件。
+
+ 将所有 `import` 语句从 `@astrojs/image/components` 更改为 `astro:assets`，以便使用新的内置 `` 组件。
+
+ 移除任何当前不[支持的图像属性](/zh-cn/guides/images/#属性)。
+
+ 例如，`aspectRatio` 不再支持，因为它现在可以从 `width` 和 `height` 属性中自动推断出来。
+
+ ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3}
+ ---
+ import { Image } from '@astrojs/image/components';
+ import { Image } from 'astro:assets'
+ import localImage from "../assets/logo.png";
+ const localAlt = "The Astro Logo";
+ ---
+
+
+ ```
+
+3. 移除任何现有的 `` 组件。
-有关在 Astro v2 中使用 `@astrojs/image` 的文档，请参阅 [`@astrojs/image` 文档](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)
+ 目前，内置的 assets 功能不包括 `` 组件。
-## 使用 CMS 或 CDN 上的图片
+ 相反，你可以使用 HTML 图像属性 `srcset` 和 `sizes` 或 `` 标签进行艺术指导或创建响应式图像。
-Image CDN 可与 Astro 配合使用，可将图片的完整网址作为 `` 标签中的 `src` 属性或 Markdown 标记
+4. 选择一个默认图像服务。
-如果 CDN 提供了 Node.js SDK ，则可以在项目中使用它。例如，[Cloudinary 的 SDK](https://cloudinary.com/documentation/node_integration) 可以生成带有相应 `src` 属性 的 ` ` 标签。
+ [Sharp](https://github.com/lovell/sharp) 现在是 `astro:assets` 的默认图像服务。如果你想使用 Sharp，无需任何配置。
-## Alt Text
+ 如果你想使用 [Squoosh](https://github.com/GoogleChromeLabs/squoosh) 来转换你的图像，请使用下面的 `image.service` 选项更新你的配置：
-并非所有用户都能以相同的方式查看图片，因此在使用图片时可访问性是一个特别重要的问题。使用 `alt` 属性为图片提供 [描述性替代文本](https://www.w3.org/WAI/tutorials/images/)。
+ ```js title="astro.config.mjs" ins={4-6}
+ import { defineConfig, squooshImageService } from 'astro/config';
-此属性对于映像集成的 `` 和 `` 组件是必需的，如果未提供替代文本，这些组件将引发错误。
+ export default defineConfig({
+ image: {
+ service: squooshImageService(),
+ },
+ });
+ ```
-如果图像只是装饰性的（即无助于理解页面）请设置 `alt=""`，以便屏幕阅读器知道忽略该图像。
+### 更新内容集合结构
-## 社区开发的集成
+你现在可以在 frontmatter 中声明一个与内容集合条目相关联的图像，例如博客文章的封面图像，使用相对于当前文件夹的路径：
-除了官方的 [`@astrojs/image`](/zh-cn/guides/integrations-guide/image/) 集成外，社区还开发了[社区图片集成](https://astro.build/integrations?search=images)，用于处理和优化 Astro 项目中的图片。
+内容集合中新的 `image` 助手可让你使用 Zod 验证图像元数据。了解更多关于 [如何在内容集合中使用图像](/zh-cn/guides/images/#内容集合中的图像) 的内容。
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/image.mdx b/src/content/docs/zh-cn/guides/integrations-guide/image.mdx
deleted file mode 100644
index 5c627611d689b..0000000000000
--- a/src/content/docs/zh-cn/guides/integrations-guide/image.mdx
+++ /dev/null
@@ -1,730 +0,0 @@
----
-type: integration
-title: '@astrojs/image'
-description: 了解如何在 Astro 项目中使用 @astrojs/image 集成。
-githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/image/'
-hasREADME: true
-category: other
-i18nReady: true
----
-
-> ⚠️ 此集成将在 Astro v3.0 (2023年秋季)中被 `astro:assets` 模块取代。更多信息请查看 [资源文档](/zh-cn/guides/assets/)。
-
-这个 **[Astro 集成][astro-integration]** 可以优化你的 [Astro 项目](https://astro.build/) 中的图片。它仅在 Astro v2 中支持全部静态站点以及 [部分服务端渲染的托管平台](#安装).
-
-## 为什么是 `@astrojs/image`？
-
-图片在整体网站性能和可用性方面起着很大的作用。提供适当尺寸的图片可以起到巨大差异，但要自动完成这一点往往很棘手。
-
-此集成提供了 `` 和 `` 组件以及一个基本的图片转换器，完全支持静态站点和服务端渲染。内置的图片转换器也是可替换的，这为与你最喜欢的托管图片服务集成打开了大门。
-
-## 安装
-
-除了我们的集成之外，我们还建议在适当的时候安装 [sharp](https://sharp.pixelplumbing.com/)。
-
-`@astrojs/image` 默认的图像转换器基于 [Squoosh](https://github.com/GoogleChromeLabs/squoosh)，使用 WebAssembly 库来支持大多数部署环境，包括那些不支持 sharp 的环境，例如 StackBlitz。
-
-为了更快的构建速度和更细粒度的图像转换控制，如果满足以下条件，请额外安装 sharp：
-
-* 你正在使用 Astro 构建静态站点。
-
-* 你正在使用支持 NodeJS 的 SSR 部署主机，比如 `@astrojs/netlify/functions`、`@astrojs/vercel/serverless` 或 `@astrojs/node`。
-
-注意 `@astrojs/image` 当前不支持：
-
-* Cloudflare SSR
-* `@astrojs/deno`
-* `@astrojs/netlify/edge-functions`
-* `@astrojs/vercel/edge`
-
-### 快速安装
-
-`astro add` 命令行工具为你自动进行安装。在一个新的终端窗口中运行下列其中一条命令（如果你不确定你使用的是哪个包管理器，请运行第一个命令）。然后按照提示，在终端中输入“y”（意思是“是”），每一条都是如此。
-
-```sh
-# 使用 NPM
-npx astro add image
-# 使用 Yarn
-yarn astro add image
-# 使用 PNPM
-pnpm astro add image
-```
-
-如果你遇到任何问题，[请随时在 GitHub 上向我们报告](https://github.com/withastro/astro/issues) 并尝试下面的手动安装步骤。
-
-### 手动安装
-
-首先,使用包管理器安装 `@astrojs/image` 包。如果你使用 npm 或者不确定，在终端运行：
-
-```sh
-npm install @astrojs/image
-```
-
-然后在 `astro.config.*` 文件中通过 `integrations` 属性来应用这个集成：
-
-```js ins={3} "image()"
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- // ...
- integrations: [image()]，
-});
-```
-
-### 安装 `sharp` (可选)
-
-首先,使用包管理器安装 `sharp` 包。如果你使用 npm 或不确定，在终端运行这个命令：
-
-```sh
-npm install sharp
-```
-
-然后在你的 `astro.config.*` 文件中更新 integration 配置，使用内置的 `sharp` 图片转换器。
-
-```js ins={8}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- // ...
- integrations: [
- image({
- serviceEntryPoint: '@astrojs/image/sharp'，
- })，
- ]，
-});
-```
-
-### 更新 `env.d.ts`
-
-为了获得最佳的开发体验，可以把 integrations 的类型定义添加到项目的 `env.d.ts` 文件中。
-
-```typescript
-// 将 `astro/client` 替换成 `@astrojs/image/client`
-///
-```
-
-或者，如果你的项目是通过 `tsconfig.json` 使用类型的，你可以这样做
-
-```json
-{
- "compilerOptions": {
- // 将 `astro/client` 替换成 `@astrojs/image/client`
- "types": ["@astrojs/image/client"]
- }
-}
-```
-
-## 使用
-
-```astro title="src/pages/index.astro"
----
-import { Image， Picture } from '@astrojs/image/components';
-import heroImage from '../assets/hero.png';
----
-
-// 优化图片，同时保持原始宽度、高度和图像格式
-
-
-// 为响应式图片或艺术指导指定多种尺寸
-
----
-```
-
-内置的图片转换器支持调整图片大小和编码到不同的图片格式。第三方图片服务也可以添加自定义转换的支持(例如：`blur`、`filter`、`rotate` 等)。
-
-Astro 的 `` 和 `` 组件需要 `alt` 属性，用于为图片提供描述性文本。如果 alt 文本缺失会记录警告，未来的集成版本在没有 alt 文本的情况下会抛出错误。
-
-如果图片仅仅是装饰性的(即对理解页面内容没有贡献)，设置 `alt=""`，这样屏幕阅读器可以正确理解并忽略这个图片。
-
-### ``
-
-内置的 `` 组件用于为通过 URL 访问的远程图片和从项目的 `src/` 目录导入的本地图片创建优化的 ``。
-
-除了组件特定的属性之外，`` 组件中包含的 `` 的任何有效 HTML 属性也会包含在构建输出的 `` 中。
-
-#### src
-
-
+
+
+
+
+
+
+
+
+
+```
+
+### `src/assets/` （实验性）
+
+请参阅 [资源（实验性）](/zh-cn/guides/images/) 指南，了解如何启用 `/assets/` 文件夹的实验性用法。
+
+这将需要你更新现有图片，删除当前的 Astro 图片集成，并且还需要额外的手动更改以利用其某些新功能。
+
+## Astro 的图片集成
+
+:::note[将在 v3.0 中弃用]
+Astro v3 将不再主动支持 [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) 集成
+
+我们建议你尽早删除它，并使用将内置在 `astro@3.0` 中的实验性 `astro:assets` 模块。
+
+请按照 [资源（实验性）使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案！
+
+**`astro:assets` 目前还不能完全替代 `@astrojs/image` ，但它正在被积极开发中。**
+:::
+
+有关在 Astro v2 中使用 `@astrojs/image` 的文档，请参阅 [`@astrojs/image` 文档](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)
+
+## 使用 CMS 或 CDN 上的图片
+
+Image CDN 可与 Astro 配合使用，可将图片的完整网址作为 `
```
-### `src/assets/` (experimental)
+#### Adicione suporte simples de assets para Cloudflare, Deno, Vercel Edge e Netlify Edge
-Veja o guia [Assets (Experimental)](/pt-br/guides/assets/) para habilitar o uso experimental da pasta `/assets/`.
+Astro v3.0 permite `astro:assets` funcionar sem erros em Cloudflare, Deno, Vercel Edge e Netlify Edge, que não suporta a otimização integrada do Astro, Squoosh e Sharp. Note que Astro não realiza nenhuma transformação e processamento de imagem nesses ambientes. Porém, você ainda pode aproveitar os outros benefícios de se utilizar `astro:assets`, incluindo nenhum Cumulative Layout Shift (CLS), a aplicação do atributo `alt`, e a experiência de autoria consistente.
-Isso vai exigir que você atualize suas imagens existentes, remover a atual integração Image do Astro, e também vai exigir mudanças manuais adicionais para explorar as vantagens de algumas de suas funcionalidades.
+Se você anteriormente evitou utilizar `astro:assets` por conta dessas limitações, agora você pode utilizá-lo sem problemas. Você pode configurar o serviço de imagem no-op para explicitamente optar por esse compartamento:
-## Integração Image do Astro
+```js title="astro.config.mjs" ins={4-8}
+import { defineConfig } from 'astro/config';
-:::note[a ser depreciada em v3.0]
-A integração [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) não terá mais suporte ativo no Astro v3.0.
+export default defineConfig({
+ image: {
+ service: {
+ entrypoint: 'astro/assets/services/noop'
+ }
+ }
+});
+```
-Nós sugerimos remover ela assim que for conveniente e utilizar o módulo experimental `astro:assets` que fará parte do `astro@3.0`.
+### Decida onde armazenar suas imagens
-Siga o [Guia de Assets (Experimental)](/pt-br/guides/assets/) para começar a usar a nova solução de imagens do Astro hoje mesmo!
+Veja o guia de Imagens para te ajudar a decidir [onde armazenar suas imagens](#onde-armazenar-imagens). Você pode desejar se aproveitar de novas opções para armazenar suas imagens com a flexibilidade adicional que `astro:assets` traz. Por exemplo, imagens relativas a partir do `src/` do seu projeto podem ser referenciadas em Markdown, MDX e Markdoc utilizando a sintaxe padrão do Markdown ``.
-**`astro:assets` não é um substituto completo do `@astrojs/image` nesse momento, mas está sob constante desenvolvimento.**
-:::
+### Atualize tags `