# Manage media items

The Media area lets you add and manage the media items to use on your website.

From the **Media** area, you can upload, delete, edit, search, and sort the media items to use on your website. Before media items are displayed on your website, our Content Delivery Network (CDN) optimizes and scales them to improve performance.

If you store media items in your backend (for example, commercetools API platform or a CMS), you don't need to upload them to the Studio. In such a case, you can display media items on your website by associating a [data source filter](/frontend-studio/frontend-component-settings.md#data-source-filters) with a Frontend component on your [page version](/frontend-studio/page-versions.md).

## Supported file format and size

In the **Media** area you can upload files of the following formats:

- AVIF
- GIF
- JPEG
- MP4
- PDF
- PNG
- SVG
- WEBP

The maximum file size is 20 MB.

SVG files must contain XML definitions. Failure to do so may result in Studio malfunctions.

Animated GIF files will appear as static images on your website.

[AVIF](https://caniuse.com/?search=avif) images might not render correctly on some web browsers. If you encounter rendering issues, re-upload the image in a different format. You can use [CanIUse](https://caniuse.com/) to check the browser compatibility of image formats.

## Upload a media item

To upload a media item, follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. Do one of the following:

   - Click **Add media**, then select the file from your computer.
   - Drag the file from your computer to the **Media** page.

   ![The Media page with the Add media button and some of the uploaded media items](https://docs.commercetools.com/frontend-studio/images/media-area.png)

## Delete a media item

To delete a media item, follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. Do one of the following:

   - Select the media item to delete by clicking it, the media data pane opens. Then, click **Delete**.

     You will not be asked to confirm the deletion. By clicking **Delete** you permanently delete the media item.

     ![The media data pane with the Delete button inside it](https://docs.commercetools.com/frontend-studio/images/media-area-image-details.png)

   - Select one or multiple media items to delete by selecting the related checkbox. To select all media items, click **Select all**. Then, click **Delete**.

     You will not be asked to confirm the deletion. By clicking **Delete** you permanently delete the media items.

     ![Some media items selected on the Media page via their respective checkboxes and the Delete button is displayed](https://docs.commercetools.com/frontend-studio/images/media-area-select-images.png)

## Edit a media item settings

### Edit a media item name, alt title, or description

To edit a media item name, alt title, or description follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. Select the media item to edit by clicking it, the media item data pane opens.

3. In the **Settings** section, enter the new value in the **Name**, **ALT title**, or **Description** field.

4. Click **Save**.

The value in the **ALT title** field is the default alt title of the media item, unless [from the page builder](/frontend-studio/using-the-page-builder.md#components-pane) you enter an alt title in the settings of the Frontend component where the media item is used. If you do not enter any value in the **ALT title** field, the value in the **Name** field will be the alt title of the media item.

In the **Description** field, we suggest entering a description of the media item that helps accessibility and SEO, and that can be used in the frontend code to be displayed to customers.

### Edit media item tags

Tags let you assign categories to media items to make their [search and filtering](/frontend-studio/media-in-the-studio.md#search-and-filter-media-items) easier. To edit the tags of a media item, follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. Select the media item to edit by clicking it, the media item data pane opens.

3. In **Settings > Tags**, do the following:

   - To add a tag, select it from the drop-down list or enter the name of the tag and press `Enter` / `Return` on your keyboard.
   - To remove a tag, click the **x** icon next to the tag name.

4. Click **Save**.

## Search and filter media items

To search and filter media items, follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. Do one or more of the following:

   - Enter the search term in the search box.

   - Select one or multiple tags from the **Tag list** drop-down.

     You can enter the name of the tag in the **Tag list** field to ease the selection.

   - Select the **Uploaded by me** checkbox.

   ![The Tag list drop-down of the Media page with some tags listed](https://docs.commercetools.com/frontend-studio/images/media-area-tags.png)

## Sort media items

You can sort media items by size or upload date. To do so, follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. From the sorting drop-down, select the sorting criterion.

![The sorting drop-down of the Media page with the sorting criteria listed](https://docs.commercetools.com/frontend-studio/images/media-area-sort-media-item.png)

## See where a media item is used

You can see on which [page versions](/frontend-studio/page-versions.md) a media item is used. To do so, follow these steps:

1. From the Studio home page or from the left menu, go to **Media**.

2. Select the media item by clicking it, the media item data pane opens.

3. Expand the **Media usage** section.

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Manage comments and reviews](/frontend-studio/collaboration.md)
- [Next page: Use Components](/frontend-studio/using-components-in-the-studio.md)
- [Search documentation and API specs](/search.md)