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
- In the admin menu, open Media then Library.
- Click Add media file. The Drop files to upload area opens.
- Drag your files into the area, or click Select files. Each file appears in the media library as soon as it arrives.
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.
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. |
Lovely Render hosts the videos of your pages. For long videos, use a video host and the Embed block.
Describe a media item
- In the media library, click a media item. The Attachment details window opens.
- Fill in the Alt text, which describes the image for a person who cannot see it.
- Optional: fill in the Title, the Image caption, the Description and the Credit. Each field is saved when you leave it.
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 describes the Credit field.
Delete a media item
- In the media library, click the media item.
- 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.