[v3 image assets] (#3739)

* starting to take notes

* notes re: using in Astro files

* draft - images in astro files

* choosing image img

* move v3 upgrade guide stuff to bottom

* draft - images in markdown files

* draft - images in mdx

* draft - images in framework components

* sprinkled a few more only local images optimized

* added and updates setting defaults on image component

* carried over other Images page sections

* split pages: images guide and other to be used elsewhere

* update assets folder guidance, and some formatting

* 3 migration guides - update links to image resources. NEED TO CHECK ALL CODE SAMPLES FOR USAGE

* update link to public folder

* link check in `ko` file

* drafted upgrade to v3 content

* v3 update guide - content collections advice

* add info re: Sharp the default

* more fine-tuning and reorg

* remove assets page and sidebar entry

* fixed links to old assets page in non-error pages

* update netlify.toml with redirect assets to images

* removes the old image integration guide and redirects to image

* replaced error messages locally for checks

* delete image integration guide from other languages

* removed the built-in alias from code samples and explanations

* remove references to assets folder entirely

* added info about remote images

* next pass at new image page (upgrade stuff still to do)

* address links, incl fake config-ref links

* another quick link hotfix in error message

* change remaining links to images; incl eggregious error message hotfixes

* move non-en images pages to old translations; update migrate-to links

* more link fixes in astro-components; missing-image-dimensions and from- guides

* draft pass at v3 upgrade stuff!

* some proper Spanish

Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

* fix long sentence

* quick formatting fixes

* Apply suggestions from code review

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

* Update src/content/docs/en/guides/images.mdx

* remove too harsh info re image tag in Markdown

* Apply suggestions from Yan comma review

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>

* Update src/content/docs/en/guides/images.mdx

* removed experimental flag from image service api config example

* add code example showing removing astro integration

* moved the no op image service blurb into here from v3 guide

* updated from- guides with updated image assets content

* i18n(zh-cn): Translate images.mdx (#4314)

Co-authored-by: Camol <kwwnjujlc@gmail.com>
Co-authored-by: Xiaoyue Lin <36526527+100gle@users.noreply.github.com>

* Apply suggestions from morinokami code review

Co-authored-by: Shinya Fujino <shf0811@gmail.com>

* Everyone caught so many little fixes!

Co-authored-by: Elian ☕️ <hello@elian.codes>
Co-authored-by: Shinya Fujino <shf0811@gmail.com>
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>

* extra line

Co-authored-by: Shinya Fujino <shf0811@gmail.com>

* another extra line

Co-authored-by: Shinya Fujino <shf0811@gmail.com>

* Rename and edit "4. Uninstall Sharp"

* i18n(zh-cn): Update zh from upstream (#4393)

* i18n(ja): Update images.mdx (#4418)

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>

* i18n(pt-BR): Update `images.mdx` for 3.0 (#4411)

* i18n(pt-BR): Update `images.mdx` for 3.0

* Apply suggestions from translation review

Co-authored-by: Alisson Nunes <alynva@gmail.com>

* oops, missed suggestion

Co-authored-by: Alisson Nunes <alynva@gmail.com>

* Update translation based on latest changes

* Fix typo

* Fix links

---------

Co-authored-by: Alisson Nunes <alynva@gmail.com>

* Bring back ES guide changes

---------

Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
Co-authored-by: 李瑞丰 <liruifeng1024@gmail.com>
Co-authored-by: Camol <kwwnjujlc@gmail.com>
Co-authored-by: Xiaoyue Lin <36526527+100gle@users.noreply.github.com>
Co-authored-by: Shinya Fujino <shf0811@gmail.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Elian ☕️ <hello@elian.codes>
Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>
Co-authored-by: Alisson Nunes <alynva@gmail.com>

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"

src/content/docs/de/guides/images.mdx → 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 `<img>`-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
 <!-- src/pages/post-1.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/).
 :::
 
 ### `<Image />`

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 `<img>` 或 `<img />` 元素来展示图片，同时也支持所有 HTML 图片属性。
+
+src 属性是必需的，其格式取决于图像的存储位置以及你是否启用了对资源的实验性支持：
+
+```astro
+---
+// src/pages/index.astro
+import rocket from '../images/rocket.svg';
+---
+<!-- 位于其它服务器上的图片 -->
+<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro">
+
+<!-- 存储在 public/assets/stars.png 的本地图片 -->
+<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。">
+
+<!-- 存储在 src/images/rocket.svg 的本地图片 -->
+<img src={rocket} alt="外空中的一架火箭。"/>
+```
+
+### 在 Markdown 文件中
+
+可以在 `.md` 文件中使用 Markdown 标准语法 `![]()`，或 HTML 标准语法 `<img>` 标签，来调用位于 `public/` 文件夹下或其它服务器上的图片。
+
+如果你无法将图片保留在 `public/` 中，我们建议启用 [资源的实验性支持](/zh-cn/guides/images/), 或使用 `.mdx` 文件格式，该格式允许你将导入的组件与类似 Markdown 的语法结合起来。使用 [MDX 集成](/zh-cn/guides/integrations-guide/mdx/) 向 Astro 添加对 MDX 的支持。
+```md
+<!-- src/pages/post-1.md -->
+
+# 我的 Markdown 页面
+
+<!-- 存储在 public/assets/stars.png 的本地图片 -->
+![一片繁星闪烁的夜空。](/assets/stars.png)
+<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。">
+
+<!-- 位于其它服务器上的图片 -->
+![Astro](https://docs.astro.build/assets/logomark-light.png)
+<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro">
+```
+
+### 在 MDX 文件中
+
+你可以在 .mdx 文件中使用标准 Markdown `![]()` 语法或 JSX  的 `<img />` 标签来显示 `public/ ` 文件夹或远程服务器中的图片。
+
+此外，你也可以导入和使用位于项目 `src/` 目录中的图像，就像在 Astro 组件中一样。
+
+
+```mdx title="src/pages/post-1.mdx"
+
+import rocket from '../images/rocket.svg';
+
+# My MDX Page
+
+// 存放在项目中 src/images/rocket.svg 路径的图片
+<img src={rocket} alt="外空中的一架火箭。"/>
+
+// 存放在项目中 public/assets/stars.png 路径的图片
+![一片繁星闪烁的夜空。](/assets/stars.png)
+<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。" />
+
+// 位于其它服务器上的图片
+![Astro](https://docs.astro.build/assets/logomark-light.png)
+<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro" />
+```
+
+### 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';
+---
+<img src={logo} width="40" alt="Astro 的图标" />
+```
+
+### `public/`
+
+存储在 `public/` 中的图像可以被组件（`.astro`，`.mdx`和其他UI框架）和Markdown文档使用。
+
+然而，位于 `/public` 目录中的文件始终按原样提供或复制，不进行任何处理。如果你在 Markdown 文件之外使用图像，我们建议尽可能将本地图像保存在 `src/` 中，以便 Astro 对其进行转换、优化和打包。
+
+`src` 属性是 **相对于 public 文件夹的**。在 Markdown 中，你可以使用 `![]()` 表示。
+
+```astro
+---
+// src/pages/index.astro
+
+// 存取放在 `public/images/` 里的图片
+---
+<img src="/images/logo.png" />
+```
+
+### `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 配合使用，可将图片的完整网址作为 `<img>` 标签中的 `src` 属性或 Markdown 标记
+
+如果 CDN 提供了 Node.js SDK ，则可以在项目中使用它。例如，[Cloudinary 的 SDK](https://cloudinary.com/documentation/node_integration) 可以生成带有相应 `src` 属性 的 ` <img>` 标签。
+
+## Alt Text
+
+并非所有用户都能以相同的方式查看图片，因此在使用图片时可访问性是一个特别重要的问题。使用 `alt` 属性为图片提供 [描述性替代文本](https://www.w3.org/WAI/tutorials/images/)。
+
+此属性对于映像集成的 `<Image />` 和 `<Picture/>` 组件是必需的，如果未提供替代文本，这些组件将引发错误。
+
+如果图像只是装饰性的（即无助于理解页面）请设置 `alt=""`，以便屏幕阅读器知道忽略该图像。
+
+## 社区开发的集成
+
+除了官方的 [`@astrojs/image`](/zh-cn/guides/integrations-guid/image/) 集成外，社区还开发了[社区图片集成](https://astro.build/integrations?search=images)，用于处理和优化 Astro 项目中的图片。

src/content/docs/ar/core-concepts/astro-components.mdx

@@ -286,7 +286,7 @@ const { title } = Astro.props
 
 - لا يدعمون frontmatter، أو الإستيراد على جانب الخادم (Server-side imports)، أو التعابير الديناميكية.
 - أي وسوم `<script>` تُركت غير مجمّعة، سيتم التعامل معها كما لو انها تحتوي على `is:inline`.
-- يمكنهم فقط [إسناد الموارد الموجودة في مجلد `public/`](/ar/guides/images/#public) 
+- يمكنهم فقط [إسناد الموارد الموجودة في مجلد `public/`](/ar/core-concepts/project-structure/#public) 
 
 :::note
 [عنصر `<slot />`](/ar/core-concepts/astro-components/#المداخل) الموجود داخل مكوّن HTML سيعمل كما يعمل في مكوّن أسترو. لإستخدام عنصر ["HTML Web Component Slot"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) بدلًا من ذلك، أضف  `is:inline` إلى عنصر `<slot />` الخاص بك.

src/content/docs/en/core-concepts/astro-components.mdx

@@ -342,7 +342,7 @@ Astro supports importing and using `.html` files as components or placing these
 HTML components must contain only valid HTML, and therefore lack key Astro component features:
 - They don't support frontmatter, server-side imports, or dynamic expressions.
 - Any `<script>` tags are left unbundled, treated as if they had `is:inline`. 
-- They can only [reference assets that are in the `public/` folder](/en/guides/images/#public).
+- They can only [reference assets that are in the `public/` folder](/en/core-concepts/project-structure/#public).
 
 :::note
 A [`<slot />` element](/en/core-concepts/astro-components/#slots) inside an HTML component will work as it would in an Astro component. In order to use the [HTML Web Component Slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) element instead, add `is:inline` to your `<slot>` element.