> ## Documentation Index
> Fetch the complete documentation index at: https://help.standards.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Media

Media is a dynamic element type that is used to display a variety of visual content on Standards.

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/media-01.gif?s=dd3fb791b16d461cb7ce0c19a3aed12b" alt="Examples of various media from logos to icons and photos" width="1200" height="600" data-path="images/media-01.gif" />
</Frame>

***

## Media basics

**Media** is an element that can be added anywhere in your project and simply consists of a bounding box that can be sized, styled, and filled with content. Media elements may display static images, animated media, and vector files.

### Adding media

<Frame>
  <img src="https://mintcdn.com/standards/rVQ0ufZ3xBiSqe1k/images/media-add-menu.png?fit=max&auto=format&n=rVQ0ufZ3xBiSqe1k&q=85&s=b145f211e92ea323d91e94bc3ed40b60" alt="Add menu dropdown open showing a list of all options" width="1200" height="600" data-path="images/media-add-menu.png" />
</Frame>

<Steps>
  <Step title="Select the media add tool">
    From within the editor, select **Media** from the `+`menu in the top bar, or use the hotkey **M**
  </Step>

  <Step title="Select area to add to">
    Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.
  </Step>

  <Step title="Choose file">
    Once added, select or upload the file you want to fill the media element with
  </Step>
</Steps>

<Info>
  **Tip:** Hold <kbd>command</kbd> to add media directly into a column with 1 click.
</Info>

***

## General use

**Media** is a flexible element with a range of uses. Here are common general uses:

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/media-02.png?fit=max&auto=format&n=y7gYF6Re_-i4oGOd&q=85&s=86594e7fb68bb0f31bb2f228012be732" alt="Grid of photography examples" width="1200" height="600" data-path="images/media-02.png" />
</Frame>

### Static images

Choose an uploaded file such as .JPEG, .PNG, .webP or .TIFF to display a static image. Standards optimizes images for various screen sizes. Therefor, we recommend uploading your highest resolution images. **Tip for gradients**: It’s suggested to use high quality .JPEG files for gradients for better color, compression, and file size. Sometimes .PNG gradients will appear overly compressed.

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/media-03.png?fit=max&auto=format&n=y7gYF6Re_-i4oGOd&q=85&s=1c95e2d21c37bcaf93e07216718079b0" alt="Grid of logos in different colors" width="1200" height="600" data-path="images/media-03.png" />
</Frame>

### Vectors

Choose an uploaded .SVG file to display vectorized media. When preparing vectors for Standards, ensure the art-board is cropped to the artwork itself, with no additional space around within the exported file.

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/media-04.gif?s=567b20f606ab53038f9c219bdce11bfb" alt="Looping video footage" width="1200" height="600" data-path="images/media-04.gif" />
</Frame>

### Videos

Choose an uploaded file such as .MP4, .WebM, or .GIF to display an animation or video. As with images, Standards optimizes videos for various screen sizes. Therefor, we recommend uploading your highest quality videos below 100mb per file.

***

## Video media

**Media** is often greatly enhanced by incorporating motion or video, not only improving clarity and usability but also simply by adding moments of excitement to your project. **Media** that references video files gain unique settings to control behavior.

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/media-05.png?fit=max&auto=format&n=y7gYF6Re_-i4oGOd&q=85&s=d7386af7f11d3cc8ed4a8a6942cb2f8e" alt="Contextual toolbar beside selected image showing settings" width="1200" height="600" data-path="images/media-05.png" />
</Frame>

### Settings

* **Autoplay** Play the video once it loads without a trigger
* **Loop** Play from the beginning once it reaches the end
* **Mute** Mute any audio embedded in the video

### Hover

* **Play Video** Play and pause video media
* **Play Audio** Play and pause audio in video media

### Thumbnails

Media filled with video files automatically use the first frame as their static thumbnail. This can be overridden with a custom thumbnail for each breakpoint, accessed inside the in-body settings.

***

## Accessibility

When using Media throughout your project, it is important to keep accessibility in mind. Standards allows you to include meta descriptions for both **Media** elements, and the **Files** themselves. Learn more about [Accessibility](/accessibility).