--- title: Images and videos description: Add clear images and embedded videos to make your pages easier to understand. --- Use media when it helps readers understand something faster than text alone. ```mdx Overhead shot of moody plants Photo by [Nico Knaack](https://unsplash.com/@xoxnk) on [Unsplash](https://unsplash.com/photos/background-pattern-JF70XoUqlpQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) ``` ## Images ### Basic image syntax Use standard Markdown image syntax for simple images. ```mdx ![Overhead shot of moody plants](/images/plants.jpg) ``` Describe what is visible and relevant. Good alt text helps accessibility and supports readers using screen readers. ### Add a visible caption Use the `Image` component when you want a caption below the image. Add the caption as children between the opening and closing tags. ```mdx Overhead shot of moody plants Photo by [Nico Knaack](https://unsplash.com/@xoxnk). ``` The `title` prop is not a visible caption. Use it only when you want the browser tooltip/title attribute. ```mdx Overhead shot of moody plants ``` ### Use dark mode images Set `src` to an object when the image should change between light and dark mode. ```mdx Decorative image that changes between light and dark mode This image uses a different source in dark mode. Light mode photo by [Marek Piwnicki](https://unsplash.com/@marekpiwnicki) on [Unsplash](https://unsplash.com/photos/layered-blue-mountain-ranges-fade-into-the-sky--_OuVFhN5BU). Dark mode photo by [Nasa](https://unsplash.com/@nasa) on [Unsplash](https://unsplash.com/photos/earth-rising-over-the-moons-horizon-Y38PSLjc-Fg). ``` ### Constrain image size Use the `width` prop on the `Image` component to set a max rendered width in pixels. This helps keep large portrait or landscape images from filling the full content width. ```mdx Surreal architecture framed through a circular opening A constrained image can sit comfortably inside a wider page. ``` ### Align a constrained image Use `align="left"`, `align="center"`, or `align="right"` when an image is narrower than the content column. The default is `center`. ```mdx Surreal architecture framed through a circular opening ``` ### Disable click-to-zoom Set `zoom={false}` using the `Image` component when you want the image to stay static and avoid opening the zoom overlay. ```mdx Overhead shot of moody plants This image does not open the zoom overlay. ``` ## Videos ### Embed a video file Use the HTML `