initial docs

contents/docs/getting-started/components/image/index.mdx

@@ -0,0 +1,37 @@
+---
+title: Image
+description: This section provides an overview of how DocuBook handles images in Markdown.
+date: 14-12-2024
+---
+
+In DocuBook, all images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
+
+## Images
+
+Similarly, images in Markdown are transformed into the Next.js `Image` component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:
+
+### Markdown
+
+```markdown
+![Alt text for the image](https://via.placeholder.com/150)
+```
+
+### Rendered Output
+
+The above Markdown is converted to:
+
+```jsx
+<Image
+  src="https://via.placeholder.com/150"
+  alt="Alt text for the image"
+  width={800}
+  height={350}
+/>
+```
+
+## Benefits
+
+- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of images.
+- **Responsive Images**: Next.js `Image` component handles responsive images, providing the best quality for various device sizes.
+
+By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.