# Upload your photos and videos

The media library receives your photos, videos and documents. It lightens each image and each video for the web. This article teaches you to upload a file, follow its processing, describe it and delete it.

## Before you start

- The Author, Editor and Administrator roles can upload files.
- You have nothing to prepare. Upload your photos and videos as they come out of your device.
- Files are shared between the Staging and the Production. A media item used in a page goes online with it when the site is published.

## Upload a file

1. In the admin menu, open **Media** then **Library**.
2. Click **Add media file**. The **Drop files to upload** area opens.
3. Drag your files into the area, or click **Select files**. Each file appears in the media library as soon as it arrives.

![The media library in grid view: the Add media file button, the All media items and All dates filters, Bulk select, the search, then seven photos and a video.](https://static.lovelyrender.com/uploads/2026/10/1029-doc-design-mediatheque.png)

From the editor, you can drop a file on a Media block. It goes into the same media library.

The file name is rewritten in lowercase, without accents or spaces. `Été à Nantes.jpg` becomes `ete-a-nantes.jpg`.

## Know the accepted formats

The type of a file is read from its content, never from its name.

| Family | Extensions |
| --- | --- |
| Frames | `jpg`, `jpeg`, `png`, `webp`, `avif`, `gif`, `svg`, `heic` |
| Videos | `mp4`, `m4v`, `webm`, `mov`, `qt`, `avi` |
| Subtitles | `vtt` |
| Audio | `mp3`, `wav`, `ogg` |
| Documents | `pdf`, `docx`, `xlsx`, `pptx`, `odt`, `ods`, `odp`, `rtf`, `txt`, `csv` |
| Archives | `zip` |

Any other type is refused with **This file type is not accepted:** followed by its type. A file whose name lies about its content is refused with **This file’s name does not match its content.**

## Keep an eye on your space

A file can weigh up to 4 GB, within the space left on your plan. The admin bar shows the space used out of that of your plan, for example `3.6 / 25 GB`.

When less than 5% of the space is left, the media screens show **Only … left of your plan’s … of storage.** An upload that would exceed the space is refused with **Upload refused: your site’s storage is full.**

To free up space, delete the media you no longer use, or ask us for a larger plan.

## Follow the processing of an image

Each image is converted to the AVIF format in the background. The browser loads the width that matches the visitor’s screen.

| File uploaded | Processing |
| --- | --- |
| A JPEG or PNG photo | Produced in several widths in the AVIF format, plus a full-size AVIF version. |
| An image more than 3,840 px wide | Reduced to 3,840 px wide, proportions kept. |
| An animated GIF | Converted to animated AVIF. The animation is kept. |
| An iPhone HEIC photo | Converted to JPEG on upload, then processed like the others. |
| A photo taken crooked | Straightened according to the orientation recorded by the device. |
| An SVG file | Kept as vector and cleaned. Executable code and addresses to other sites are removed. |

Allow about a minute for the versions of an image. Meanwhile, your original file is served in full resolution. A page never shows a broken image.

**Note:** If the server cannot read a HEIC photo, the upload shows **This server cannot read HEIC photos. Convert the photo to JPEG before uploading it.**

## Follow the processing of a video

A video is re-encoded in two formats: WebM, the lightest, then MP4, which plays everywhere. The browser chooses on its own. A preview image is cut from the video.

| File uploaded | Processing | During processing |
| --- | --- | --- |
| An `.mp4` or a `.webm` | Re-encoded if the gain exceeds 5%. Otherwise your file is kept intact. The other format is produced alongside. | Your file plays during processing. |
| A `.mov`, `.qt`, `.m4v` or `.avi` | Converted to MP4 and WebM. The original is deleted once both versions are produced. | The video does not play yet. |

Allow a few minutes for a video. Re-encoding often reduces the weight. It gives space back to your plan.

As long as processing is not finished, the Media block in the editor shows a notice. It disappears by itself and never appears on your site.

| Note | Left to produce |
| --- | --- |
| **The thumbnail and the optimized formats are being prepared.** | The preview image and the two formats. |
| **The thumbnail is being prepared.** | The preview image. |
| **The optimized formats are being prepared. The video already plays.** | The two formats. |

**Warning:** Wait for the notice to disappear before publishing a page whose video has just arrived. A `.mov` or an `.avi` would not play yet. An `.mp4` would serve the heavy file.

Lovely Render hosts the videos of your pages. For long videos, use a video host and the [Embed](https://lovelyrender.com/documentation/embed-block/) block.

## Describe a media item

1. In the media library, click a media item. The **Attachment details** window opens.
2. Fill in the **Alt text**, which describes the image for a person who cannot see it.
3. Optional: fill in the **Title**, the **Image caption**, the **Description** and the **Credit**. Each field is saved when you leave it.

![The details of a photo in the media library: its upload date, author, name, type, weight and dimensions, then the Alternative text, Title, Image caption and Description fields and the file address.](https://static.lovelyrender.com/uploads/2026/10/879-doc-design-details.png)

The alternative text entered here prefills each Media block where you place the image. Changing it in a block only changes that block. [Credit your photos and videos](https://lovelyrender.com/documentation/credit-photos-videos/) describes the **Credit** field.

## Delete a media item

1. In the media library, click the media item.
2. In the **Attachment details** window, click **Delete permanently** and confirm.

The media item leaves the Staging media library at once. Your live site keeps displaying it until the next publication of the site.

The file stays on the server as long as a version of the site uses it. Restoring a version from before the deletion brings the image back with its pages.

**Warning:** Before deleting a media item, check that no page displays it. After publication, a page that still displays it would show a missing image.

## See also

- [Media](https://lovelyrender.com/documentation/media-block/)
- [Find a photo on Pexels](https://lovelyrender.com/documentation/find-pexels-photo/)
- [Credit your photos and videos](https://lovelyrender.com/documentation/credit-photos-videos/)
- [Publish your site](https://lovelyrender.com/documentation/publish-site/)