diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index b34e112..e87b9c3 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -251,8 +251,8 @@ declare module 'astro:content' {
   collection: "fragments",
   data: InferEntrySchema<"fragments">
 },
-"fr/super-cookies.md": {
-  id: "fr/super-cookies.md",
+"fr/super-cookies.mdx": {
+  id: "fr/super-cookies.mdx",
   slug: "super-cookies",
   body: string,
   collection: "fragments",
diff --git a/src/content/fragments/en/super-cookies.md b/src/content/fragments/en/super-cookies.md
index 96cd7d7..53ca4c2 100644
--- a/src/content/fragments/en/super-cookies.md
+++ b/src/content/fragments/en/super-cookies.md
@@ -8,6 +8,10 @@ excerpt: It's a real recipe, not a joke about annoying files.
 tags: ["food"]
 ---
 
+import AstroImage from "../../../components/AstroImage.astro";
+export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
+export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";
+
 ## Vegetalian version
 
 ### Ingredients
@@ -70,5 +74,15 @@ Chocolate can be replaced by anything like nuts, raisins, legos... (don't eat le
 
 ## Figures
 
-![Fig.1 - All ingredients mixed together to form a brown paste.](https://assets.nardu.in/cookies-fig-1.jpg)
-![Fig.2 - Baked cookies are very soft.](https://assets.nardu.in/cookies-fig-2.jpg)
+<AstroImage
+	src={cookies1}
+	width="753"
+	height="1248"
+	alt="All ingredients mixed together to form a brown paste."
+/>
+<AstroImage
+	src={cookies2}
+	width="753"
+	height="1248"
+	alt="The cookies are rounded and soft after baking."
+/>
diff --git a/src/content/fragments/fr/image-full.mdx b/src/content/fragments/fr/image-full.mdx
index ecb339c..753bf5b 100644
--- a/src/content/fragments/fr/image-full.mdx
+++ b/src/content/fragments/fr/image-full.mdx
@@ -9,11 +9,24 @@ excerpt: Faire déborder une image de son conteneur sans tout casser.
 tags: ["CSS"]
 ---
 
+import AstroImage from "../../../components/AstroImage.astro";
+export const example =
+	"https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg";
+export const context =
+	"https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg";
+export const container =
+	"https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg";
+export const banner =
+	"https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg";
+export const broken =
+	"https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg";
+export const result = "https://assets.nardu.in/image_bleed_6c164e82b3.jpeg";
+
 ## Image inline
 
 On est parfois obligé d'utiliser des images dans des balises `img` plutôt que dans un `background` en css. Comment faire alors pour que l'image sorte de son conteneur pour en faire une bannière&nbsp;? Exemple pratique à partir de ce même site.
 
-[![](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg)
+<AstroImage src={example} width="320" height="568" alt="" />
 
 ### Contexte
 
@@ -42,7 +55,7 @@ img {
 }
 ```
 
-[![](https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg)
+<AstroImage src={context} width="320" height="568" alt="" />
 
 ### Déborder du conteneur
 
@@ -56,7 +69,7 @@ Afin de faire prendre à l'image toute la largeur, on agit sur son conteneur&nbs
 }
 ```
 
-[![](https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg)
+<AstroImage src={container} width="320" height="568" alt="" />
 
 ### Faire une bannière
 
@@ -71,7 +84,7 @@ On peut alors réduire la hauteur du conteneur pour obtenir une bannière plutô
 }
 ```
 
-[![](https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg)
+<AstroImage src={banner} width="320" height="568" alt="" />
 
 Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:
 
@@ -81,7 +94,7 @@ Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:
 }
 ```
 
-[![](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg)
+<AstroImage src={broken} width="320" height="568" alt="" />
 
 Pas top…
 
@@ -96,7 +109,7 @@ Pas top…
 }
 ```
 
-[![](https://assets.nardu.in/image_bleed_6c164e82b3.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_6c164e82b3.jpeg)
+<AstroImage src={result} width="320" height="568" alt="" />
 
 Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁
 
diff --git a/src/content/fragments/fr/super-cookies.md b/src/content/fragments/fr/super-cookies.mdx
similarity index 82%
rename from src/content/fragments/fr/super-cookies.md
rename to src/content/fragments/fr/super-cookies.mdx
index d5747c7..da7e0ca 100644
--- a/src/content/fragments/fr/super-cookies.md
+++ b/src/content/fragments/fr/super-cookies.mdx
@@ -8,6 +8,10 @@ excerpt: C'est vraiment une recette hein, pas une blague sur les fichiers tempor
 tags: ["cuisine"]
 ---
 
+import AstroImage from "../../../components/AstroImage.astro";
+export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
+export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";
+
 ## Version végétalienne
 
 ### Ingrédients
@@ -70,5 +74,15 @@ Le chocolat peut-être remplacé par n'importe quoi comme des noix, des raisins
 
 ## Figures
 
-![Fig.1 - Tous les ingrédients mélangés forment une pâte marron.](https://assets.nardu.in/cookies-fig-1.jpg)
-![Fig.2 - Les cookies cuits sont très moelleux.](https://assets.nardu.in/cookies-fig-2.jpg)
+<AstroImage
+	src={cookies1}
+	width="753"
+	height="1248"
+	alt="Tous les ingrédients mélangés forment une pâte marron."
+/>
+<AstroImage
+	src={cookies2}
+	width="753"
+	height="1248"
+	alt="Les cookies cuits sont bombés et très moelleux."
+/>