Skip to content

Commit

Permalink
i18n(fr): update guides/images.mdx (#11082)
Browse files Browse the repository at this point in the history
Co-authored-by: Thomas Bonnet <thomasbnt@protonmail.com>
  • Loading branch information
ArmandPhilippot and thomasbnt authored Feb 27, 2025
1 parent c5fc6c3 commit c8196bf
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions src/content/docs/fr/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ Importez et utilisez les composants [`<Image />`](#afficher-des-images-optimisé
import { Image } from 'astro:assets';
import localBirdImage from '../../images/subfolder/localBirdImage.png';
---
<Image src={localBirdImage} alt="A bird sitting on a nest of eggs." />
<Image src="/images/bird-in-public-folder.jpg" alt="A bird." width="50" height="50" />
<Image src="https://example.com/remote-bird.jpg" alt="A bird." width="50" height="50" />
<Image src={localBirdImage} alt="Un oiseau assis sur un nid d'œufs." />
<Image src="/images/bird-in-public-folder.jpg" alt="Un oiseau." width="50" height="50" />
<Image src="https://example.com/remote-bird.jpg" alt="Un oiseau." width="50" height="50" />
<img src={localBirdImage.src} alt="A bird sitting on a nest of eggs.">
<img src="/images/bird-in-public-folder.jpg" alt="A bird.">
<img src="https://example.com/remote-bird.jpg" alt="A bird.">
<img src={localBirdImage.src} alt="Un oiseau assis sur un nid d'œufs.">
<img src="/images/bird-in-public-folder.jpg" alt="Un oiseau.">
<img src="https://example.com/remote-bird.jpg" alt="Un oiseau.">
```

<ReadMore>Consultez la référence complète de l'API des composants [`<Image />`](/fr/reference/modules/astro-assets/#image-) et [`<Picture />`](/fr/reference/modules/astro-assets/#picture-).</ReadMore>
Expand Down Expand Up @@ -202,7 +202,7 @@ Pour les images distantes, utilisez l'URL complète de l'image comme valeur pour
<img src="https://example.com/remote-cat.jpg" alt="Un chat qui dort." >
```

### Choisir `<Image />` vs `<img>`
### Choisir entre `<Image />` et `<img>`

Le composant `<Image />` optimise votre image et déduit la largeur et la hauteur (pour les images qu'il peut traiter) en se basant sur le rapport hauteur/largeur d'origine afin d'éviter le CLS. C'est la manière à privilégier pour utiliser des images dans les fichiers `.astro` chaque fois que cela est possible.

Expand Down Expand Up @@ -271,7 +271,7 @@ Alternativement, le CDN peut fournir ses propres SDK pour s'intégrer plus facil

## Images dans les fichiers Markdown

Utilisez la syntaxe Markdown standard `![alt](src)` dans vos fichiers `.md`. Cette syntaxe fonctionne avec l'[API du Service d'images](/fr/reference/image-service-reference/) d'Astro pour optimiser vos images locales et les images distantes autorisées.
Utilisez la syntaxe Markdown standard `![alt](src)` dans vos fichiers `.md`. Cette syntaxe fonctionne avec l'[API du Service d'images](/fr/reference/image-service-reference/) d'Astro pour optimiser vos images locales stockées dans `src/` et les images distantes. Les images stockées dans le dossier `public/` ne sont jamais optimisées.

```md
<!-- src/pages/post-1.md -->
Expand All @@ -291,9 +291,9 @@ Utilisez la syntaxe Markdown standard `![alt](src)` dans vos fichiers `.md`. Cet
![Astro](https://example.com/images/remote-image.png)
```

La balise `<img>` n'est pas prise en charge pour les images locales et les composants `<Image />` et `<Picture />` ne sont pas disponibles dans les fichiers `.md`.
La balise HTML `<img>` peut également être utilisée pour afficher des images stockées dans `public/` ou des images distantes sans aucune optimisation ou traitement d'image. Cependant, `<img>` n'est pas prise en charge pour vos images locales dans `src`.

Si vous avez besoin de plus de contrôle sur les attributs de votre image, nous vous recommandons d'utiliser [l'intégration MDX d'Astro](/fr/guides/integrations-guide/mdx/) pour ajouter la prise en charge du format de fichier `.mdx`. MDX permet d'ajouter des composants à Markdown et il existe des [options d'image supplémentaires disponibles dans MDX](#images-dans-les-fichiers-mdx).
Les composants `<Image />` et `<Picture />` ne sont pas disponibles dans les fichiers `.md`. Si vous avez besoin de plus de contrôle sur les attributs de votre image, nous vous recommandons d'utiliser [l'intégration MDX d'Astro](/fr/guides/integrations-guide/mdx/) pour ajouter la prise en charge du format de fichier `.mdx`. MDX permet d'utiliser des [options d'image supplémentaires disponibles dans MDX](#images-dans-les-fichiers-mdx), y compris la combinaison de composants avec la syntaxe Markdown.

## Images dans les fichiers MDX

Expand All @@ -303,7 +303,7 @@ De plus, il y a un support pour [la syntaxe standard Markdown `![alt](src)`](#im

```mdx title="src/pages/post-1.mdx"
---
title: Ma Page titre
title: Le titre de ma page
---
import { Image } from 'astro:assets';
import rocket from '../assets/rocket.png';
Expand Down Expand Up @@ -341,7 +341,7 @@ En outre, vous pouvez déclarer une image associée à une entrée de la collect
```md title="src/content/blog/my-post.md" {3}
---
title: "Mon premier article de blog"
cover: "./firstpostcover.jpeg" # will resolve to "src/content/blog/firstblogcover.jpeg"
cover: "./firstpostcover.jpeg" # se résoudra en "src/content/blog/firstblogcover.jpeg"
coverAlt: "Photographie d'un coucher de soleil derrière une chaîne de montagnes."
---

Expand Down

0 comments on commit c8196bf

Please sign in to comment.