You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
alt="Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds."
10
12
/>
13
+
</Frame>
11
14
12
-
## Image
15
+
## Images
13
16
14
-
Images are the most common way to add visual content to your documentation.
17
+
Add images to provide visual context, examples, or decoration to your documentation.
15
18
16
-
### Basics
19
+
### Basic image syntax
17
20
18
-
The [markdown syntax](https://www.markdownguide.org/basic-syntax/#images)lets you add images using the following code
21
+
Use [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images)to add images to your documentation:
19
22
20
23
```mdx
21
-
24
+
22
25
```
26
+
23
27
<Tip>
24
-
To make sure images are displayed correctly in production, add a forward slash to the image path (e.g. `/path/image.jpg`).
28
+
Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the image shows.
25
29
</Tip>
26
30
27
-
Note that the image file size must be less than 20MB. Otherwise, we recommend hosting on a CDN provider like [S3](https://aws.amazon.com/s3), [Cloudinary](https://cloudinary.com) or a similar service.
31
+
Image files must be less than 20MB. For larger files, host them on a CDN service like [Amazon S3](https://aws.amazon.com/s3) or [Cloudinary](https://cloudinary.com).
28
32
29
-
### Embeds
33
+
### HTML image embeds
30
34
31
-
To get more customizability with images, you can also use embeds to add images.
35
+
For more control over image display, use HTML `<img>` tags:
32
36
33
37
```html
34
-
<imgheight="200"src="/path/image.jpg" />
38
+
<img
39
+
src="/images/dashboard.png"
40
+
alt="Main dashboard interface"
41
+
height="300"
42
+
className="rounded-lg"
43
+
/>
35
44
```
36
45
37
-
### Disable Image Zoom
46
+
####Disable zoom functionality
38
47
39
-
To disable the default zoom on click for images, add the `noZoom` property to image embeds.
48
+
To disable the default zoom on click for images, add the `noZoom` property:
40
49
41
-
```html
42
-
<imgheight="200"noZoomsrc="/path/image.jpg" />
50
+
```html highlight="4"
51
+
<img
52
+
src="/images/screenshot.png"
53
+
alt="Descriptive alt text"
54
+
noZoom
55
+
height="200"
56
+
/>
43
57
```
44
58
45
-
###Linking Images
59
+
#### Link images
46
60
47
-
To link an image, for example to create a button on your docs, encompass the image in a link with the `noZoom` property. Images in `a` tags will automatically have a pointer cursor.
61
+
To make an image a clickable link, wrap the image in an anchor tag and add the `noZoom` property:
48
62
49
63
```html
50
64
<ahref="https://mintlify.com"target="_blank">
51
-
<imgheight="200"noZoomsrc="/path/image.jpg" />
65
+
<img
66
+
src="/images/logo.png"
67
+
alt="Mintlify logo"
68
+
noZoom
69
+
height="100"
70
+
/>
52
71
</a>
53
72
```
54
73
55
-
### Dark Mode
74
+
<Note>
75
+
Images within anchor tags automatically display a pointer cursor to indicate they are clickable.
76
+
</Note>
77
+
78
+
#### Light and dark mode images
56
79
57
-
To use separate images for light and dark mode, use Tailwind CSS to hide and show images.
80
+
To display different images for light and dark themes, use Tailwind CSS classes:
Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html). This is helpful if you prefer HTML tags to Markdown syntax, and lets you create documentation with infinite flexibility.
0 commit comments