diff --git a/.changeset/pretty-rats-yawn.md b/.changeset/pretty-rats-yawn.md
new file mode 100644
index 000000000..aad63ee7b
--- /dev/null
+++ b/.changeset/pretty-rats-yawn.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/image': patch
+---
+
+- Updates how the `<Image />` component is exported to support older versions of Astro
+- Adds an example of using the `<Image />` component in markdown pages
\ No newline at end of file
diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
index f37013b43..88f8f1900 100644
--- a/packages/integrations/image/README.md
+++ b/packages/integrations/image/README.md
@@ -152,6 +152,30 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog
 ```
 </details>
 
+<details>
+<summary><strong>Images in markdown</strong></summary>
+  
+  <br/>
+  
+  The `<Image />` component can also be used to optimize images in markdown pages. For local images imported from your project's `src` directory, use Astro's the `setup` frontmatter to import the image file.
+
+```html
+---
+setup: |
+  import { Image } from '@astrojs/image/components'
+  import hero from '../../assets/blog/introducing-astro.jpg'
+title: Hello world!
+publishDate: 12 Sep 2021
+name: Nate Moore
+value: 128
+description: Just a Hello World Post!
+---
+
+<Image src={hero} width={640} />
+<Image src="https://example.com/image.jpg" width={640} aspectRatio="16:9" />
+```
+</details>
+
 ## Troubleshooting
 - If your installation doesn't seem to be working, make sure to restart the dev server.
 - If you edit and save a file and don't see your site update accordingly, try refreshing the page.
diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.js
similarity index 100%
rename from packages/integrations/image/components/index.ts
rename to packages/integrations/image/components/index.js