From 2583076f837e83f6402874334a0b85753d9f5d80 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armand.philippot.eu>
Date: Mon, 28 Oct 2024 13:38:42 +0100
Subject: [PATCH] i18n(fr): create `reference/modules/astro-assets.mdx` (#9824)

* i18n(fr): create `reference/modules/astro-assets.mdx`

See #9687 and #9820

* remove extra space

Co-authored-by: Thomas Bonnet <thomasbnt@protonmail.com>

---------

Co-authored-by: Thomas Bonnet <thomasbnt@protonmail.com>
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
---
 .../fr/reference/modules/astro-assets.mdx     | 159 ++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/content/docs/fr/reference/modules/astro-assets.mdx

diff --git a/src/content/docs/fr/reference/modules/astro-assets.mdx b/src/content/docs/fr/reference/modules/astro-assets.mdx
new file mode 100644
index 0000000000000..ef8915473c995
--- /dev/null
+++ b/src/content/docs/fr/reference/modules/astro-assets.mdx
@@ -0,0 +1,159 @@
+---
+title: Référence de l'API des ressources
+i18nReady: true
+tableOfContents:
+  minHeadingLevel: 2
+  maxHeadingLevel: 6
+---
+import Since from '~/components/Since.astro';
+import ReadMore from '~/components/ReadMore.astro';
+
+<p><Since v="3.0.0" /></p>
+
+Astro fournit des composants intégrés et des fonctions d'aide pour optimiser et afficher vos images. Pour des fonctionnalités et des exemples d'utilisation, [consultez notre guide d'images](/fr/guides/images/).
+
+## Importations depuis `astro:assets`
+
+```js
+import { 
+  Image,
+  Picture,
+  getImage,
+ } from 'astro:assets';
+```
+
+### `<Image />`
+
+```astro title="src/components/MyComponent.astro"
+---
+// importe le composant Image et l'image
+import { Image } from 'astro:assets';
+import myImage from "../assets/mon_image.png"; // Image a une résolution de 1600x900
+---
+
+<!-- `alt` est obligatoire sur le composant Image -->
+<Image src={myImage} alt="Une description de mon image." />
+```
+
+```html
+<!-- Sortie -->
+<!-- L'image est optimisée, les attributs appropriés sont appliqués -->
+<img
+  src="/_astro/mon_image.hash.webp"
+  width="1600"
+  height="900"
+  decoding="async"
+  loading="lazy"
+  alt="Une description de mon image."
+/>
+```
+#### Propriétés
+
+- src (requis)
+- alt (requis)
+- width et height (requis pour les images dans `public/` et celles distantes)
+- format
+- quality
+- densities
+- widths
+
+En plus des propriétés ci-dessus, le composant `<Image />` accepte toutes les propriétés acceptées par la balise HTML `<img>`.
+
+Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#image--astroassets).
+
+### `<Picture />`
+
+<p><Since v="3.3.0" /></p>
+
+Utilisez le composant Astro intégré `<Picture />` pour afficher une image réactive avec plusieurs formats et/ou tailles.
+
+```astro title="src/pages/index.astro"
+---
+import { Picture } from 'astro:assets';
+import myImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
+---
+
+<!-- `alt` est obligatoire sur le composant Picture -->
+<Picture src={myImage} formats={['avif', 'webp']} alt="Une description de mon image." />
+```
+
+```html
+<!-- Sortie -->
+<picture>
+  <source srcset="/_astro/mon_image.hash.avif" type="image/avif" />
+  <source srcset="/_astro/mon_image.hash.webp" type="image/webp" />
+  <img
+    src="/_astro/mon_image.hash.png"
+    width="1600"
+    height="900"
+    decoding="async"
+    loading="lazy"
+    alt="Une description de mon image."
+  />
+</picture>
+```
+
+Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#picture-).
+
+#### Propriétés
+
+`<Picture />` accepte toutes les propriétés du composant `<Image />` en plus des suivantes :
+
+##### `formats`
+
+Un tableau de formats d'image à utiliser pour les balises `<source>`. Par défaut, il est défini sur `['webp']`.
+
+##### `fallbackFormat`
+
+Format à utiliser comme valeur de repli pour la balise `<img>`. La valeur par défaut est `.png` pour les images statiques, `.gif` pour les images animées et `.svg` pour les fichiers SVG.
+
+##### `pictureAttributes`
+
+Un objet d'attributs à ajouter à la balise `<picture>`. Utilisez cette propriété pour appliquer des attributs à l'élément externe `<picture>` lui-même. Les attributs appliqués directement au composant `<Picture />` s'appliqueront à l'élément interne `<img>`, à l'exception de ceux utilisés pour la transformation d'image.
+
+### `getImage()`
+
+<p>
+
+**Type :** `(options: UnresolvedImageTransform) => Promise<GetImageResult>`
+</p>
+
+:::caution
+`getImage()` s'appuie sur des API serveur uniquement et interrompt la construction lorsqu'il est utilisé sur le client.
+:::
+
+La fonction `getImage()` est prévue pour générer des images destinées à être utilisées ailleurs que directement en HTML, par exemple dans une [route d'API](/fr/guides/endpoints/#points-de-terminaison-du-serveur-routes-api). Elle vous permet également de créer votre propre composant `<Image />` personnalisé.
+
+`getImage()` prend un objet d'options avec les [mêmes propriétés que le composant Image](/fr/reference/components-reference/#propriétés) (à l'exception de `alt`).
+
+```astro
+---
+import { getImage } from "astro:assets";
+import myBackground from "../background.png"
+
+const optimizedBackground = await getImage({src: myBackground, format: 'avif'})
+---
+
+<div style={`background-image: url(${optimizedBackground.src});`}></div>
+```
+
+Elle renvoie un objet avec le type suivant :
+
+```ts
+type GetImageResult = {
+  /* Attributs HTML supplémentaires nécessaires au rendu de l'image (largeur, hauteur, style, etc.) */
+  attributes: Record<string, any>;
+  /* Paramètres passés validés */
+  options: ImageTransform;
+  /* Paramètres d'origine transmis */
+  rawOptions: ImageTransform;
+  /* Chemin d'accès à l'image générée */
+  src: string;
+  srcSet: {
+    /* Valeurs générées pour srcset, chaque entrée a une URL et un descripteur de taille */
+    values: SrcSetValue[];
+    /* Une valeur prête à être utilisée dans l'attribut `srcset` */
+    attribute: string;
+  };
+}
+```