---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media"
locale: en
meta:
  "og:title": "Academy Lesson"
---

[Go to home](https://academy.laioutr.com/en)

- [Agentic Frontend Manager](https://academy.laioutr.com/en/lernpfade/frontend-manager-learning-path)

- [Manage and deliver media](https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media)

Content, media and collections

# Manage and deliver media

8 min

Images and videos live in the media library of Cockpit and Studio. This lesson shows how media is uploaded, organised and placed in blocks, and how the image CDN and video CDN deliver it in the right size so pages stay fast. This includes alt texts.

## Key takeaways

- The media library is the same in Cockpit and Studio.
- The image CDN picks a suitable format and size.
- Large media do not slow pages down when served through the CDN.

## Read more

- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min

  Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
- [Deliver images through the Laioutr CDN](https://academy.laioutr.com/en/artikel/deliver-images-through-the-laioutr-cdn)4 min

  The Laioutr CDN stores a project's images in a dedicated store and delivers them from the project's own hostname. Size and format are adapted at the edge on request, and delivered images stay cached for a long time.
- [Deliver videos through the Video CDN](https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn)6 min

  Editors upload videos to the Laioutr CDN media library in Studio and pick them in a section. The CDN delivers them from the project's hostname with an automatically generated poster, and optionally also adaptively as HLS and DASH.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic Frontend Manager",
          "item": "https://academy.laioutr.com/en/lernpfade/frontend-manager-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Manage and deliver media",
          "item": "https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media",
          "position": 3
        }
      ]
    }
  ]
}
```