---
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.
