Using Media
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, Composable Commerce 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 with a Frontend component on your page version.
Upload a media item
To upload a media item, follow these steps:
From the Studio home page or from the left menu, go to Media.
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 maximum file size is 20 MB.
Animated GIFs will appear as static images on your website.
Experimental image formats such as AVIF might not render correctly on some web browsers. If you encounter image rendering issues, you should re-upload the image in a different format. You can use CanIUse to check image format browser compatibility.
SVG files must contain XML definitions. Failure to do so may result in Studio malfunctions.
Delete a media item
To delete a media item, follow these steps:
From the Studio home page or from the left menu, go to Media.
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.
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.
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:
From the Studio home page or from the left menu, go to Media.
Select the media item to edit by clicking it, the media item data pane opens.
In the Settings section, enter the new value in the Name, ALT title, or Description field.
Click Save.
The value in the ALT title field is the default alt title of the media item, unless from the page builder 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.
Search and filter media items
To search and filter media items, follow these steps:
From the Studio home page or from the left menu, go to Media.
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.
Sort media items
You can sort media items by size or upload date. To so so, follow these steps:
From the Studio home page or from the left menu, go to Media.
From the sorting drop-down, select the sorting criterion.
See where a media item is used
You can see on which page versions a media item is used. To do so, follow these steps:
From the Studio home page or from the left menu, go to Media.
Select the media item by clicking it, the media item data pane opens.
Expand the Media usage section.