diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
new file mode 100644
index 00000000..0fab20ae
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -0,0 +1,59 @@
+---
+title: Guides/Background Removal
+---
+
+import { CldImage } from 'svelte-cloudinary';
+
+# Removing a Background from an Image
+
+The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop.
+
+
+ Removing backgrounds require enabling the Cloudinary AI Background Removal Add-On which includes a free tier for getting started.
+
+
+## Example
+
+
+
+
+
+```svelte
+
+
+```
+
+
+```html
+
+```
+
+
+
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-optimization.mdx b/packages/docs/src/content/docs/guides/image-optimization.mdx
new file mode 100644
index 00000000..35a41ba5
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-optimization.mdx
@@ -0,0 +1,74 @@
+---
+title: Guides/Image Optimization
+---
+
+
+
+# Optimizing Images in Svelte/SvelteKit
+
+Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).
+
+You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop.
+
+## Example
+
+
+
+
+
+
+
+
+```svelte
+
+
+
+```
+
+
+
+
+```svelte
+
+```
+
+
+
+
+
+
+## Learn More
+
+- [Responsive Images](/guides/responsive-images)
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-overlays.mdx b/packages/docs/src/content/docs/guides/image-overlays.mdx
new file mode 100644
index 00000000..b0387493
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-overlays.mdx
@@ -0,0 +1,120 @@
+---
+title: Guides/Image Overlays
+---
+
+
+
+# Overlaying Images
+
+You can add images on top of other images by using image-based overlays.
+
+## Example
+
+
+
+
+
+
+
+
+```svelte
+
+
+
+```
+
+
+
+
+```svelte
+
+```
+
+
+
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-underlays.mdx b/packages/docs/src/content/docs/guides/image-underlays.mdx
new file mode 100644
index 00000000..445b2dfb
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-underlays.mdx
@@ -0,0 +1,76 @@
+---
+title: Guides/Image Underlays
+---
+
+
+
+# Adding Layers Under Images
+
+Underlays function very similar to overlays in terms of options, however they **do not support text**.
+
+See the examples above under Overlays to learn more about the available configurations.
+
+## Example
+
+
+
+
+
+
+
+
+```svelte
+
+
+
+```
+
+
+
+
+```svelte
+
+```
+
+
+
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
new file mode 100644
index 00000000..06aa8727
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/placeholders.mdx
@@ -0,0 +1,162 @@
+---
+title: Guides/Placeholders
+---
+
+
+
+# Display Placeholder While Image is Loading
+
+CldImage wraps the Unpic Image component, thus giving us access to the placeholder API
+which can display an SVG image while the image itself is loading.
+
+This helps for providing a great user experience, rather than an empty space, to help
+let the visitor know that image is loading.
+
+To do this, we have several options:
+
+- `placeholder="blur"` coupled with a `blurDataURL`
+- `placeholder="..."` with the contents being a data URL
+
+## Blurred Images
+
+To achieve a blurred image effect, we can first convert our Cloudinary image to a Data URL
+then pass it in to our CldImage component.
+
+
+
+ Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
+
+
+
+```js
+
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+export const load = () => {
+ const imageUrl = getCldImageUrl({
+ src: '',
+ width: 100, // Resize the original file to a smaller size
+ });
+ const response = await fetch(imageUrl);
+ const arrayBuffer = await response.arrayBuffer();
+ const buffer = Buffer.from(arrayBuffer);
+ const base64 = buffer.toString("base64");
+ const dataUrl = `data:${response.type};base64,${base64}`;
+ return {
+ dataUrl
+ }
+}
+```
+
+
+
+ Then when rendering CldImage, utilize the `dataUrl` using `placeholder` and `blurDataURL`:
+
+```svelte
+
+
+
+```
+
+## Shimmer
+
+In a similar fashion, we can create a shimmer effect when
+our images are loading.
+
+
+
+
+
+Inside of the SvelteKit app you can use a server side code `+page.server.js` to generate a data URL from our image.
+
+
+
+```js
+export const load = () => {
+ const shimmer = (w: number, h: number) => `
+ `;
+
+ const toBase64 = (str: string) =>
+ typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);
+
+ const dataUrl = `data:image/svg+xml;base64,${toBase64(shimmer(600, 400))}`;
+ return {
+ dataUrl
+ };
+};
+```
+
+
+
+ Then when rendering CldImage, utilize the `dataUrl` using `placeholder`:
+
+```svelte
+
+
+
+```
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/responsive-images.mdx b/packages/docs/src/content/docs/guides/responsive-images.mdx
new file mode 100644
index 00000000..0692d9da
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/responsive-images.mdx
@@ -0,0 +1,88 @@
+---
+title: Guides/Responsive Images
+---
+
+
+
+# Responsive Images
+
+The [CldImage](/cldimage/usage) component takes advantage of responsive images generated using the [Unpic component](https://unpic.pics/img/svelte/).
+
+Using the `sizes` prop, you can configure exactly the sizes you need for your application:
+
+```svelte
+
+
+
+ import { CldImage } from 'svelte-cloudinary';
+
+
+
+```
+
+Using cropping, we're setting a width of 600px and a height of 600px, telling Cloudinary we want to take our original image, crop it to that size, then position the focal point to the face in the image detected using AI.
+
+From a responsive standpoint, we're stating that we want full width images on anything less than 480px and half-width images on anything above.
+
+The challenge here is when cropping the image, we're cropping it to 600px, which is smaller than some of the sizes we want to responsively serve. We don't want to responsively change that cropped size, otherwise we would change the cropping results due to the crop attempting to grab different portions of the image depending on the size.
+
+To avoid attempting to load upscaled images, resulting in blurry or grainy images as well as more bandwidth used on a device, any responsive size that is greater than the set width will not be generated and instead, we'll deliver an image at the size specifiy (in this example, 600x600).
+
+For instance, in the above, the resulting responive image in the HTML may look like:
+
+```jsx copy
+
+
+```
+
+Notice that all of the URLs are the same except for the first one, as it's smaller than 600px.
+
+When the browser attempts to load these responsive images, it will effectively ignore the same URLs, only having loaded it once if resizing the browser.
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/social-media-card.mdx b/packages/docs/src/content/docs/guides/social-media-card.mdx
new file mode 100644
index 00000000..1fe3e9e3
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/social-media-card.mdx
@@ -0,0 +1,216 @@
+---
+title: Guides/Social Media Cards
+---
+
+
+
+# Generating Social Media Cards
+
+
+ CldOgImage does not render an `<img>` tag, meaning it can't be visually embedded on a page. The following examples make use of the `<CldImage>` tag to showcase what's possible.
+
+
+## Example
+
+
+
+
+
+
+
+
+```svelte
+
+
+
+```
+
+
+
+
+```svelte
+
+```
+
+
+
+
+## Learn More
+
+- [CldOgImage Configuration](/cldogimage/configuration)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/text-overlays.mdx b/packages/docs/src/content/docs/guides/text-overlays.mdx
new file mode 100644
index 00000000..e9927dee
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/text-overlays.mdx
@@ -0,0 +1,131 @@
+---
+title: Guides/Text Overlays
+---
+
+
+
+# Adding Text to an Image
+
+You can add text on top of your image with text-based overlays.
+
+## Example
+
+