diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json
deleted file mode 100644
index 4d765f2..0000000
--- a/demo/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "prettier"]
-}
diff --git a/demo/.gitignore b/demo/.gitignore
deleted file mode 100644
index 1437c53..0000000
--- a/demo/.gitignore
+++ /dev/null
@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
diff --git a/demo/.prettierrc.js b/demo/.prettierrc.js
deleted file mode 100644
index c41a1c0..0000000
--- a/demo/.prettierrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  semi: true,
-  singleQuote: true,
-  trailingComma: 'all',
-};
diff --git a/demo/README.md b/demo/README.md
deleted file mode 100644
index e03b35c..0000000
--- a/demo/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/demo/app/app/page.tsx b/demo/app/app/page.tsx
deleted file mode 100644
index 8da34d5..0000000
--- a/demo/app/app/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import '../../styles/globals.css';
-import Image from 'next/image';
-import styles from '../../styles/Home.module.css';
-
-import images from '../../data/images.json';
-
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <main className={styles.main}>
-        <h1 className={styles.title}>Cloudinary Netlify Plugin</h1>
-
-        <ul className={styles.grid}>
-          {images.map((image) => {
-            return (
-              <li key={image.src}>
-                <img
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  alt={image.title}
-                />
-              </li>
-            );
-          })}
-        </ul>
-
-        <ul className={styles.grid}>
-          {images.map((image) => {
-            return (
-              <li key={image.src}>
-                <Image
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  alt={image.title}
-                />
-              </li>
-            );
-          })}
-        </ul>
-      </main>
-    </div>
-  );
-}
diff --git a/demo/app/layout.tsx b/demo/app/layout.tsx
deleted file mode 100644
index 62c3ff7..0000000
--- a/demo/app/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
diff --git a/demo/data/images.json b/demo/data/images.json
deleted file mode 100644
index bccc89a..0000000
--- a/demo/data/images.json
+++ /dev/null
@@ -1,50 +0,0 @@
-[
-  {
-    "width": 2376,
-    "height": 1574,
-    "src": "/images/beach.jpeg",
-    "title": "Beach"
-  },
-  {
-    "width": 1364,
-    "height": 1705,
-    "src": "/images/city.jpeg",
-    "title": "City"
-  },
-  {
-    "width": 2344,
-    "height": 1560,
-    "src": "/images/earth.jpeg",
-    "title": "Earth"
-  },
-  {
-    "width": 2340,
-    "height": 1560,
-    "src": "/images/galaxy.jpeg",
-    "title": "Galaxy"
-  },
-  {
-    "width": 2148,
-    "height": 1611,
-    "src": "/images/iceberg.jpeg",
-    "title": "Iceberg"
-  },
-  {
-    "width": 1364,
-    "height": 1705,
-    "src": "/images/jungle.jpeg",
-    "title": "Jungle"
-  },
-  {
-    "width": 2340,
-    "height": 1561,
-    "src": "/images/mountain.jpeg",
-    "title": "Mountain"
-  },
-  {
-    "width": 2340,
-    "height": 1560,
-    "src": "/images/waterfall.jpeg",
-    "title": "Waterfall"
-  }
-]
diff --git a/demo/next-env.d.ts b/demo/next-env.d.ts
deleted file mode 100644
index fd36f94..0000000
--- a/demo/next-env.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/demo/next.config.js b/demo/next.config.js
deleted file mode 100644
index 91ef62f..0000000
--- a/demo/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-};
-
-module.exports = nextConfig;
diff --git a/demo/package.json b/demo/package.json
deleted file mode 100644
index cd16167..0000000
--- a/demo/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "demo",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "format": "prettier --write --ignore-path .gitignore ."
-  },
-  "dependencies": {
-    "next": "13.4.19",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "18.2.21",
-    "eslint": "8.48.0",
-    "eslint-config-next": "13.4.19",
-    "eslint-config-prettier": "9.0.0",
-    "netlify-plugin-cloudinary": "workspace:*",
-    "prettier": "3.0.3"
-  }
-}
diff --git a/demo/pages/_app.tsx b/demo/pages/_app.tsx
deleted file mode 100644
index 244e40b..0000000
--- a/demo/pages/_app.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import '../styles/globals.css';
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
deleted file mode 100644
index a9f7701..0000000
--- a/demo/pages/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState, useEffect } from 'react';
-import Head from 'next/head';
-import Image from 'next/image';
-import styles from '../styles/Home.module.css';
-
-import dataImages from '../data/images.json';
-
-export default function Home({ images }) {
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setIsLoaded(true);
-    }, 1000);
-  }, []);
-
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Cloudinary Netlify Plugin</title>
-        <meta name="description" content="Cloudinary Netlify Plugin" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>Cloudinary Netlify Plugin</h1>
-
-        <p className={styles.description}>
-          Supercharge images on your Netlify site with Cloudinary!
-        </p>
-
-        <h2 className={styles.title}>Getting Started</h2>
-
-        <ul className={styles.description}>
-          <li>
-            ✅{' '}
-            <a href="https://app.netlify.com/plugins/netlify-plugin-cloudinary/install">
-              Install the plugin on Netlify
-            </a>{' '}
-            (or search for &quot;cloudinary&quot;)
-          </li>
-          <li>
-            ✅ Add <code>CLOUDINARY_CLOUD_NAME</code> as a Build Variable
-          </li>
-          <li>✅ Trigger a new Netlify build</li>
-        </ul>
-
-        <p className={styles.description}>
-          <a href="https://github.com/colbyfayock/netlify-plugin-cloudinary">
-            More details and advanced configuration on GitHub
-          </a>
-        </p>
-
-        <h2 className={styles.title}>Images Transformed to Use Cloudinary</h2>
-
-        <ul className={styles.grid}>
-          {images.map((image) => {
-            return (
-              <li key={image.src}>
-                <img
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  alt={image.title}
-                />
-              </li>
-            );
-          })}
-        </ul>
-
-        <ul className={styles.grid}>
-          {images.map((image) => {
-            return (
-              <li key={image.src}>
-                <Image
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  alt={image.title}
-                />
-              </li>
-            );
-          })}
-        </ul>
-
-        {isLoaded && (
-          <ul className={styles.grid}>
-            {images.map((image) => {
-              return (
-                <li key={image.src}>
-                  <img
-                    src={image.src}
-                    width={image.width}
-                    height={image.height}
-                    alt={image.title}
-                  />
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </main>
-    </div>
-  );
-}
-
-export async function getStaticProps() {
-  return {
-    props: {
-      images: dataImages,
-    },
-  };
-}
diff --git a/demo/public/images/test/beach.jpeg b/demo/public/images/test/beach.jpeg
deleted file mode 100644
index 7ad87d4..0000000
Binary files a/demo/public/images/test/beach.jpeg and /dev/null differ
diff --git a/demo/styles/Home.module.css b/demo/styles/Home.module.css
deleted file mode 100644
index f1dd3c0..0000000
--- a/demo/styles/Home.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  padding: 2rem 0;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-h2.title {
-  font-size: 2rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-ul.description {
-  list-style: none;
-  padding-left: 0;
-}
-
-.grid {
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  list-style: none;
-  padding: 0;
-  margin: 4rem 0;
-}
diff --git a/demo/styles/globals.css b/demo/styles/globals.css
deleted file mode 100644
index d736e3b..0000000
--- a/demo/styles/globals.css
+++ /dev/null
@@ -1,37 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
-}
-
-a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-a:hover,
-a:focus,
-a:active {
-  text-decoration: underline;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-}
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
deleted file mode 100644
index 4f46d37..0000000
--- a/demo/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "noEmit": true,
-    "incremental": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "strictNullChecks": true
-  },
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.json"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/demo/public/images/beach.jpeg b/docs/public/images/examples/beach.jpeg
similarity index 100%
rename from demo/public/images/beach.jpeg
rename to docs/public/images/examples/beach.jpeg
diff --git a/demo/public/images/city.jpeg b/docs/public/images/examples/city.jpeg
similarity index 100%
rename from demo/public/images/city.jpeg
rename to docs/public/images/examples/city.jpeg
diff --git a/demo/public/images/earth.jpeg b/docs/public/images/examples/earth.jpeg
similarity index 100%
rename from demo/public/images/earth.jpeg
rename to docs/public/images/examples/earth.jpeg
diff --git a/demo/public/images/galaxy.jpeg b/docs/public/images/examples/galaxy.jpeg
similarity index 100%
rename from demo/public/images/galaxy.jpeg
rename to docs/public/images/examples/galaxy.jpeg
diff --git a/demo/public/images/iceberg.jpeg b/docs/public/images/examples/iceberg.jpeg
similarity index 100%
rename from demo/public/images/iceberg.jpeg
rename to docs/public/images/examples/iceberg.jpeg
diff --git a/demo/public/images/jungle.jpeg b/docs/public/images/examples/jungle.jpeg
similarity index 100%
rename from demo/public/images/jungle.jpeg
rename to docs/public/images/examples/jungle.jpeg
diff --git a/demo/public/images/mountain.jpeg b/docs/public/images/examples/mountain.jpeg
similarity index 100%
rename from demo/public/images/mountain.jpeg
rename to docs/public/images/examples/mountain.jpeg
diff --git a/demo/public/images/waterfall.jpeg b/docs/public/images/examples/waterfall.jpeg
similarity index 100%
rename from demo/public/images/waterfall.jpeg
rename to docs/public/images/examples/waterfall.jpeg
diff --git a/docs/src/data/images.json b/docs/src/data/images.json
new file mode 100644
index 0000000..efa99a7
--- /dev/null
+++ b/docs/src/data/images.json
@@ -0,0 +1,66 @@
+[
+  {
+    "width": 2376,
+    "height": 1574,
+    "src": "/images/examples/beach.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726174-aeca546d-1589-4dd2-90a7-b1e78867d196.jpeg",
+    "srcCloudinary": "images/examples/beach.jpeg",
+    "title": "Beach"
+  },
+  {
+    "width": 1364,
+    "height": 1705,
+    "src": "/images/examples/city.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726176-48c8b53d-1054-45e3-9311-71cf4947147f.jpeg",
+    "srcCloudinary": "images/examples/city.jpeg",
+    "title": "City"
+  },
+  {
+    "width": 2344,
+    "height": 1560,
+    "src": "/images/examples/earth.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726178-f2e89dba-b14b-49c1-8ef9-2e2c66a8b046.jpeg",
+    "srcCloudinary": "images/examples/earth.jpeg",
+    "title": "Earth"
+  },
+  {
+    "width": 2340,
+    "height": 1560,
+    "src": "/images/examples/galaxy.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726180-0ed180bc-4918-45b6-bda2-0c29538c19ac.jpeg",
+    "srcCloudinary": "images/examples/galaxy.jpeg",
+    "title": "Galaxy"
+  },
+  {
+    "width": 2148,
+    "height": 1611,
+    "src": "/images/examples/iceberg.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726182-4a0152df-fd79-4986-8459-e02f079aca6f.jpeg",
+    "srcCloudinary": "images/examples/iceberg.jpeg",
+    "title": "Iceberg"
+  },
+  {
+    "width": 1364,
+    "height": 1705,
+    "src": "/images/examples/jungle.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726185-801d9914-1208-48cc-95ab-8d8d2d63575f.jpeg",
+    "srcCloudinary": "images/examples/jungle.jpeg",
+    "title": "Jungle"
+  },
+  {
+    "width": 2340,
+    "height": 1561,
+    "src": "/images/examples/mountain.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726186-cc658080-15ea-45d3-a7f1-1ccff217f7c0.jpeg",
+    "srcCloudinary": "images/examples/mountain.jpeg",
+    "title": "Mountain"
+  },
+  {
+    "width": 2340,
+    "height": 1560,
+    "src": "/images/examples/waterfall.jpeg",
+    "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726189-51a8b091-931f-43fe-99ae-9f9d17942db5.jpeg",
+    "srcCloudinary": "images/examples/waterfall.jpeg",
+    "title": "Waterfall"
+  }
+]
diff --git a/docs/src/pages/_meta.json b/docs/src/pages/_meta.json
index 2e8e38f..40c02d9 100644
--- a/docs/src/pages/_meta.json
+++ b/docs/src/pages/_meta.json
@@ -27,6 +27,7 @@
   },
   "guides": "Guides",
   "troubleshooting": "Troubleshooting",
+  "examples": "Examples",
 
   "menubar-installation": {
     "title": "Installation",
diff --git a/docs/src/pages/examples/cdn-images.mdx b/docs/src/pages/examples/cdn-images.mdx
new file mode 100644
index 0000000..75f685d
--- /dev/null
+++ b/docs/src/pages/examples/cdn-images.mdx
@@ -0,0 +1,30 @@
+import { getCldImageUrl } from 'next-cloudinary';
+
+import images from '../../data/images.json';
+
+# CDN Images
+
+Images that are being sourced from an external CDN.
+
+export const Grid = () => {
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {images.map((image) => {
+        return (
+          <li key={image.src}>
+            <img
+              src={image.srcCdn}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
\ No newline at end of file
diff --git a/docs/src/pages/examples/client-images.mdx b/docs/src/pages/examples/client-images.mdx
new file mode 100644
index 0000000..5d4fc74
--- /dev/null
+++ b/docs/src/pages/examples/client-images.mdx
@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+
+import images from '../../data/images.json';
+
+# Client Images
+
+Images loaded in 1 second clientside after the application renders. Each image
+is loaded from the local `/images`, which because it's not available in the initial
+page output, hits a redirect to a Cloudinary image.
+
+export const Grid = () => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoaded(true);
+    }, 1000);
+  }, []);
+
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {isLoaded && images.map((image) => {
+        return (
+          <li key={image.src}>
+            <img
+              src={image.src}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+      {!isLoaded && (
+        <p className="font-bold">Loading...</p>
+      )}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
\ No newline at end of file
diff --git a/docs/src/pages/examples/cloudinary-images.mdx b/docs/src/pages/examples/cloudinary-images.mdx
new file mode 100644
index 0000000..7345972
--- /dev/null
+++ b/docs/src/pages/examples/cloudinary-images.mdx
@@ -0,0 +1,32 @@
+import { getCldImageUrl } from 'next-cloudinary';
+
+import images from '../../data/images.json';
+
+# Cloudinary Images
+
+Images already being delivered from Cloudinary will not be replaced.
+
+export const Grid = () => {
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {images.map((image) => {
+        return (
+          <li key={image.src}>
+            <img
+              src={getCldImageUrl({
+                src: image.srcCloudinary
+              })}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
\ No newline at end of file
diff --git a/docs/src/pages/examples/local-images.mdx b/docs/src/pages/examples/local-images.mdx
new file mode 100644
index 0000000..6a2d18d
--- /dev/null
+++ b/docs/src/pages/examples/local-images.mdx
@@ -0,0 +1,29 @@
+import images from '../../data/images.json';
+
+# Local Images
+
+Images loaded from the default local directory of `/images` which
+are then replaced in the page output.
+
+export const Grid = () => {
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {images.map((image) => {
+        return (
+          <li key={image.src}>
+            <img
+              src={image.src}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
\ No newline at end of file
diff --git a/docs/src/pages/examples/next-image.mdx b/docs/src/pages/examples/next-image.mdx
new file mode 100644
index 0000000..fe76f5b
--- /dev/null
+++ b/docs/src/pages/examples/next-image.mdx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+
+import images from '../../data/images.json';
+
+# Next Image
+
+Grid of images using the Next Image component.
+
+export const Grid = () => {
+  return (
+    <ul className="grid grid-cols-2 lg:grid-cols-3 gap-6 my-8">
+      {images.map((image) => {
+        return (
+          <li key={image.src}>
+            <Image
+              src={image.src}
+              width={image.width}
+              height={image.height}
+              alt={image.title}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  )
+}
+
+## Demo
+
+<Grid />
\ No newline at end of file