38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
---
|
||
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
|
||
|
||
```
|
||
|
||
### 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.
|