using alt files

docs/src/content/docs/getting-started/installation.mdx

@@ -3,9 +3,19 @@ title: Installation
 sidebar:
     order: 1
 ---
+import { Image } from "astro:assets"
 import { FileTree } from '@astrojs/starlight/components';
 import { Steps } from '@astrojs/starlight/components';
 
+import extensionViewSrc from "../../../assets/vscode-extensions-view.png"
+import extensionViewAlt from "../../../assets/vscode-extensions-view.png.txt?raw"
+
+import marketplaceSrc from "../../../assets/vscode-marketplace.png"
+import marketplaceAlt from "../../../assets/vscode-marketplace.png.txt?raw"
+
+import vscodeViewSrc from "../../../assets/vscode-genaiscript-view.png"
+import vscodeViewAlt from "../../../assets/vscode-genaiscript-view.png.txt?raw"
+
 
 GenAiScript is available as a Visual Studio Code Extension. You can download it from the Marketplace
 or access the latest development build from GitHub.
@@ -30,22 +40,22 @@ Open your project folder in Visual Studio Code.
 <li>
 Click on the **Extensions** view
 
-![Extensions View](../../../assets/vscode-extensions-view.png)
+<Image src={extensionViewSrc} alt={extensionViewAlt} />
 
 </li>
 <li>
 
 Search **genaiscript** and click **Install**.
 
-[![Extension in Marketplace User Interface](../../../assets/vscode-marketplace.png)](https://marketplace.visualstudio.com/items?itemName=genaiscript.genaiscript-vscode)
+<Image src={marketplaceSrc} alt={marketplaceAlt} />
 
 </li>
 
 <li>
 
 If successful, you will see the icon in the **Extensions** view.
 
-![Extensions View](../../../assets/vscode-genaiscript-view.png)
+<Image src={vscodeViewSrc} alt={vscodeViewAlt} />
 
 </li>