import Badge from "~/components/Badge.astro"

Il existe plusieurs [intégrations d'images communautaires](https://astro.build/integrations?search=images) tierces pour optimiser et travailler avec des images dans votre projet Astro.

`astro:assets` n'est plus derrière un drapeau expérimental dans Astro v3.0.

`<Image />` est maintenant un composant intégré et l'intégration précédente `@astrojs/image` a été supprimée.

Ces changements, ainsi que d'autres changements liés à l'utilisation des images dans Astro, peuvent entraîner des ruptures lorsque vous mettez à jour votre projet Astro à partir d'une version antérieure.

Veuillez suivre les instructions ci-dessous pour mettre à jour un projet Astro v2.x vers la version 3.0.

Si vous aviez précédemment activé le drapeau expérimental pour `astro:assets`, vous devrez mettre à jour votre projet pour Astro v3.0 qui inclut maintenant les fonctionnalités des assets par défaut.

Supprime le drapeau expérimental :

```js title="astro.config.mjs" del={4-6}

import { defineConfig } from 'astro/config';

export default defineConfig({

experimental: {

assets: true

}

});

Si nécessaire, mettez également à jour votre fichier `src/env.d.ts` pour remplacer la référence `astro/client-image` par `astro/client` :

```ts title="src/env.d.ts" del={1} ins={2}

Cet alias d'importation n'est plus inclus par défaut avec `astro:assets`. Si vous utilisiez cet alias avec des actifs expérimentaux, vous devez les convertir en chemins de fichiers relatifs, ou [créer vos propres alias d'importation](/fr/guides/imports/#alias).

```astro title="src/pages/posts/post-1.astro" del={2} ins={3}

Astro v3.0 permet à `astro:assets` de fonctionner sans erreur dans Cloudflare, Deno, Vercel Edge et Netlify Edge, qui ne supportent pas l'optimisation d'image Squoosh et Sharp intégrée à Astro. Notez qu'Astro n'effectue aucune transformation ou traitement d'image dans ces environnements. Cependant, vous pouvez toujours profiter des autres avantages de l'utilisation de `astro:assets`, y compris l'absence de décalage cumulatif de la mise en page (CLS), l'attribut `alt` imposé, et une expérience de création cohérente.

Si vous évitiez auparavant d'utiliser `astro:assets` à cause de ces contraintes, vous pouvez maintenant le faire sans problème. Vous pouvez configurer le service d'images no-op pour qu'il accepte explicitement ce comportement :

```js title="astro.config.mjs" ins={4-8}

import { defineConfig } from 'astro/config';

export default defineConfig({

image: {

service: {

entrypoint: 'astro/assets/services/noop'

}

}

});

Consultez le guide Images pour vous aider à décider [où stocker vos images](#où-stocker-les-images).Vous pouvez souhaiter profiter des nouvelles options pour stocker vos images avec la flexibilité ajoutée `astro:assets` brings. Par exemple, les images relatives de votre projet `src/` peuvent maintenant être référencées dans Markdown, MDX et Markdoc en utilisant la syntaxe Markdown standard ``.

Auparavant, l'importation d'une image renvoyait une simple chaîne de caractères contenant le chemin de l'image. Désormais, les images importées correspondent à la signature suivante :

interface ImageMetadata {

src: string;

width: number;

height: number;

format: string;

}

Vous devez mettre à jour l'attribut `src` de toutes les balises `<img>` existantes (y compris toutes les [images dans les composants du cadre de l'interface utilisateur](#images-dans-les-composants-framework-ui)) et vous pouvez également mettre à jour d'autres attributs qui sont maintenant disponibles pour vous à partir de l'image importée.

```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6}

Les images relatives de votre projet `src/` peuvent maintenant être référencées dans Markdown, MDX et Markdoc en utilisant la syntaxe Markdown standard ``.

Cela vous permet de déplacer vos images du répertoire `public/` vers votre projet `src/` où elles seront traitées et optimisées. Vos images existantes dans `public/` et les images distantes sont toujours valides mais ne sont pas optimisées par le processus de construction d'Astro.

```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/"



Si vous souhaitez avoir plus de contrôle sur les attributs de vos images, nous vous recommandons d'utiliser le format de fichier `.mdx`, qui vous permet d'inclure le composant `<Image />` d'Astro ou une balise JSX `<img />` en plus de la syntaxe Markdown. Utilisez l'[intégration MDX](/fr/guides/integrations-guide/mdx/) pour ajouter la prise en charge de MDX à Astro.

Si vous utilisiez l'intégration d'images dans Astro v2.x, suivez les étapes suivantes :

<Steps>

1. Supprimez l'intégration `@astrojs/image`.

Vous devez [supprimer l'intégration](/fr/guides/integrations-guide/#supprimer-une-intégration) en la désinstallant puis en la supprimant de votre fichier `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. Mettre à jour les types (si nécessaire)

Si vous aviez des types spéciaux configurés pour `@astrojs/image` dans `src/env.d.ts`, vous pouvez avoir besoin de les changer pour les types Astro par défaut si votre mise à jour vers la v3 n'a pas effectué cette étape pour vous.

```ts title="src/env.d.ts" del={1} ins={2}

/// <reference types="@astrojs/image/client" />

/// <reference types="astro/client" />

```

De même, mettez à jour `tsconfig.json` si nécessaire :

```json title="tsconfig.json" del={3} ins={4}

{

"compilerOptions": {

"types": ["@astrojs/image/client"]

"types": ["astro/client"]

}

}

```

3. Migrer tous les composants `<Image />` existants

Changez toutes les instructions `import` de `@astrojs/image/components` à `astro:assets` afin d'utiliser le nouveau composant intégré `<Image />`.

Supprimez tous les attributs du composant qui ne sont pas des [propriétés d'image actuellement supportées](/fr/guides/images/#propriétés).

Par exemple, `aspectRatio` n'est plus supporté, car il est maintenant automatiquement déduit des attributs `width` et `height`.

```astro title="src/components/MyComponent.astro" del= {2,11} ins={3}

```

4. Choisir un service d'images par défaut

[Sharp](https://github.com/lovell/sharp) est maintenant le service d'image par défaut utilisé pour `astro:assets`. Si vous souhaitez utiliser Sharp, aucune configuration n'est nécessaire.

Si vous préférez utiliser [Squoosh](https://github.com/GoogleChromeLabs/squoosh) pour transformer vos images, mettez à jour votre configuration avec l'option `image.service` suivante :

```js title="astro.config.mjs" ins={4-6}

import { defineConfig, squooshImageService } from 'astro/config';

export default defineConfig({

image: {

service: squooshImageService(),

},

});

```

</Steps>

Vous pouvez maintenant déclarer une image associée à une entrée de collection de contenu, telle que l'image de couverture d'un article de blog, dans votre frontmatter en utilisant son chemin relatif au dossier courant.

La nouvelle aide `image` pour les collections de contenu vous permet de valider les métadonnées de l'image en utilisant Zod. En savoir plus sur [comment utiliser les images dans les collections de contenus](/fr/guides/images/#images-dans-les-collections-de-contenus)

Dans Astro v3.0, si vous devez conserver l'ancien comportement d'importation des images et exiger une représentation sous forme de chaîne de l'URL de l'image, ajoutez `?url` à la fin du chemin de l'image lorsque vous l'importez. Par exemple :

```astro title="src/pages/blog/MyImages.astro"

Cette approche permet d'obtenir la chaîne d'URL. Gardez à l'esprit que pendant le développement, Astro utilise un chemin `src/`, mais lors de la construction, il génère des chemins hachés comme `/_astro/cat.a6737dd3.png`.

Si vous préférez travailler directement avec l'objet image lui-même, vous pouvez accéder à la propriété `.src`. Cette approche est la meilleure pour des tâches telles que la gestion des dimensions des images pour les métriques de Core Web Vitals et la prévention de CLS.

Si vous êtes en train de passer au nouveau comportement d'importation, la combinaison des méthodes `?url` et `.src` peut être la bonne méthode pour une gestion transparente des images.