diff --git a/src/content/docs/fr/guides/images.mdx b/src/content/docs/fr/guides/images.mdx index aeefe06e02bbc..f729102d3f5f4 100644 --- a/src/content/docs/fr/guides/images.mdx +++ b/src/content/docs/fr/guides/images.mdx @@ -159,7 +159,6 @@ import myImage from '../assets/my_image.png'; // Image est de 1600x900 Consultez le détail des [propriétés du composant ``](/fr/reference/modules/astro-assets/#propriétés-de-picture) dans la référence `astro:assets`. - ### Afficher les images non traitées avec la balise HTML `` La [syntaxe de template Astro](/fr/reference/astro-syntax/) prend également en charge l'écriture directe d'une balise ``, avec un contrôle total sur sa sortie finale. Ces images ne seront pas traitées ni optimisées. Elle accepte toutes les propriétés de balise HTML ``, et la seule propriété requise est `src`. @@ -349,17 +348,15 @@ coverAlt: "Photographie d'un coucher de soleil derrière une chaîne de montagne Ceci est un article de blog ``` -L'aide `image` pour le schéma des collections de contenu vous permet de valider les métadonnées de l'image en utilisant Zod. +L'assistant `image` pour le schéma des collections de contenu vous permet de valider et d'importer l'image. -```ts title="src/content/config.ts" +```ts title="src/content.config.ts" import { defineCollection, z } from "astro:content"; const blogCollection = defineCollection({ schema: ({ image }) => z.object({ title: z.string(), - cover: image().refine((img) => img.width >= 1080, { - message: "L'image de couverture doit avoir une largeur d'au moins 1080 pixels!", - }), + cover: image(), coverAlt: z.string(), }), }); @@ -396,7 +393,7 @@ const allBlogPosts = await getCollection("blog"); Le composant ``, comme tout autre composant Astro, n'est pas disponible dans les composants de framework UI. -Mais vous pouvez transmettre le contenu statique généré par `` à un composant de framework à l'intérieur d'un fichier `.astro` en tant qu'enfants ou en utilisant un [`` nommé](/fr/guides/framework-components/#puis-je-utiliser-les-composants-astro-à-lintérieur-des-composants-de-mon-framework-) : +Mais vous pouvez transmettre le contenu statique généré par `` à un composant de framework à l'intérieur d'un fichier `.astro` [en tant qu'enfants](/fr/guides/framework-components/#passer-des-enfants-à-des-composants-de-framework) ou en utilisant un [`` nommé](/fr/guides/framework-components/#puis-je-utiliser-les-composants-astro-à-lintérieur-des-composants-de-mon-framework-) : ```astro title="src/components/ImageWrapper.astro" @@ -462,25 +459,11 @@ pnpm add sharp ``` ::: -### Configurer Squoosh - -Si vous préférez utiliser [Squoosh](https://github.com/GoogleChromeLabs/squoosh) pour transformer vos images, mettez à jour votre configuration avec ce qui suit : - -```js title="astro.config.mjs" ins={4-6} -import { defineConfig, squooshImageService } from 'astro/config'; - -export default defineConfig({ - image: { - service: squooshImageService(), - }, -}); -``` - ### Configurer le service no-op passthrough -Si votre [adaptateur pour le mode `serveur' ou `hybride'](https://astro.build/integrations/?search=&categories%5B%5D=adapters) ne supporte pas l'optimisation d'image Squoosh et Sharp intégrée à Astro (par exemple Deno, Cloudflare), vous pouvez configurer un service d'image no-op pour vous permettre d'utiliser les composants `` et ``. 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'application de l'attribut `alt`, et une expérience de création cohérente. +Si votre [adaptateur](https://astro.build/integrations/?search=&categories%5B%5D=adapters) ne supporte pas l'optimisation d'image Sharp intégrée à Astro (par exemple Deno, Cloudflare), vous pouvez configurer un service d'image no-op pour vous permettre d'utiliser les composants `` et ``. 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'application de l'attribut `alt`, et une expérience de création cohérente. -Configurez `passthroughImageService()` pour éviter les traitements d'image Squoosh et Sharp : +Configurez `passthroughImageService()` pour éviter les traitements d'image Sharp : ```js title="astro.config.mjs" ins={4-6} "passthroughImageService" import { defineConfig, passthroughImageService } from 'astro/config';