# Source: https://www.mintlify.com/docs/guides/media.md

# Source: https://www.mintlify.com/docs/editor/media.md

> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Add media

> Upload and use images and assets in your documentation.

## Supported file types

* **Images**: PNG, JPG, JPEG, SVG, GIF, WebP
* **Videos**: MP4, WebM
* **Fonts**: TTF, WOFF, WOFF2
* **Other**: PDF, ICO (favicons)

## Add media to a page

### Drag and drop

Drag and drop media from your computer or the asset manager onto a page in visual mode. Files save to the root of your `images/` folder.

### Slash command

Type <kbd>/image</kbd> to open the image menu, then upload a new image or select an existing one.

### Upload files

Use the asset manager in the sidebar to upload or search for files.

<Frame>
  <img src="https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=3d046b4640b7d0eb3db71aed63eb7264" alt="Assets manager selected in the editor sidebar menu." className="block dark:hidden" data-og-width="222" width="222" data-og-height="440" height="440" data-path="images/editor/assets-light.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?w=280&fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=34210d5f73471ef51369fc5d1a33b1ba 280w, https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?w=560&fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=7ce21050aac12a82c2ac26b05f980ee0 560w, https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?w=840&fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=ce5b9d21bdd1c42a8c5a12f5f48cd890 840w, https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?w=1100&fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=ffc3c6d6d0fc23aa7870c6b5d1364771 1100w, https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?w=1650&fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=9b2d4690bb106761079dfa1ab65fea1c 1650w, https://mintcdn.com/mintlify/OJeK62hgxFqOZjzS/images/editor/assets-light.png?w=2500&fit=max&auto=format&n=OJeK62hgxFqOZjzS&q=85&s=c0b567f995584ef894b06ca75e40cd01 2500w" />

  <img src="https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=d453a3bc99aff5c44ae89feb439dea9b" alt="Assets manager selected in the editor sidebar menu." className="hidden dark:block" data-og-width="222" width="222" data-og-height="440" height="440" data-path="images/editor/assets-dark.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?w=280&fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=e3c39f3082433b5cec1c82538b0e0361 280w, https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?w=560&fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=d1be53b1584c2855e2ad52c47463b6d3 560w, https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?w=840&fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=d83602d3cb12e37633bae02a1d66df47 840w, https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?w=1100&fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=efa292be65c218b6361539a39856cddd 1100w, https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?w=1650&fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=0e70d3b3137c54922786ee612f8a79b9 1650w, https://mintcdn.com/mintlify/tyM8nhezBDC6wj19/images/editor/assets-dark.png?w=2500&fit=max&auto=format&n=tyM8nhezBDC6wj19&q=85&s=dbdc5b5e07819e7c08fd1cc4264f3376 2500w" />
</Frame>

Click **Upload** in the asset manager to add files from your computer.

## Manage assets

### Organize with folders

Click the **+** button in the file explorer to create a new folder. Drag and drop files and folders in the file tree to reorganize them.

### Rename and edit assets

Hover over an asset and click the **...** button to rename the file or update its alt text.

### Delete assets

Hover over an asset and click the <Icon icon="trash" /> delete button.

## Best practices

* **Use descriptive names**: Name files clearly, like `api-dashboard-light.png` instead of `img1.png`.
* **Add alt text**: Provide descriptive alt text for accessibility and SEO.
* **Organize with folders**: Group related assets, such as light and dark mode variants or assets for a specific feature area.
* **Use appropriate formats**: PNG for graphics with transparency, JPG for photos, SVG for icons and logos.