---
title: Image and Link
description: This section provides an overview of how AriaDocs handles links and images in Markdown.
---

In AriaDocs, all links and images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.

## Links

When you create a link in your Markdown, it is converted to the Next.js `Link` component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:

### Markdown example

```markdown 
[Visit OpenAI](https://www.openai.com)
```

### Rendered Output

The above Markdown is converted to:

```jsx
<Link href="https://www.openai.com" target="_blank" rel="noopener noreferrer">
    Visit OpenAI
</Link>
```

## 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)
```

### 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 and links.
- **Improved User Experience**: Client-side navigation with Next.js `Link` improves the browsing experience.
- **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.
