# Bilder & Medien

> Bilder und Dateien hochladen, einbinden, mit Alt-Text versehen und in der Mediathek verwalten.

## Bilder im Editor

Es gibt drei Wege, ein Bild in eine Seite zu bringen:

- **Einfügen oder ziehen:** Kopiere ein Bild in die Zwischenablage und füge es im Editor ein, oder ziehe eine
  Bilddatei in den Editor. Es wird automatisch hochgeladen.
- **Slash-Menü:** `/bild` fügt einen Bild-Baustein ein. Dort wählst du **Bild hochladen** oder fügst eine URL ein.
- **Markdown:** `![Alternativtext](media:<id> "Bildunterschrift")` – die ID bekommst du in der Mediathek.

Gib jedem Bild einen **Alternativtext**. Er beschreibt das Bild für Screenreader und Suchmaschinen; ohne ihn ist das
Bild für Menschen mit Screenreader unsichtbar. Eine **Bildunterschrift** ist optional.

## Was Docsello mit Bildern macht

Hochgeladene Bilder werden automatisch in moderne Formate (AVIF, WebP) und mehrere Größen umgerechnet. Auf der
Website reserviert Docsello den Platz für jedes Bild und zeigt bis zum Laden einen unscharfen Platzhalter – die Seite
springt nicht, und Bilder weiter unten werden erst geladen, wenn der Leser dorthin scrollt. Ein Klick auf ein Bild
vergrößert es.

Lädt jemand dieselbe Datei ein zweites Mal hoch, erkennt Docsello das (*Schon vorhanden*) und verwendet die
vorhandene Datei.

## Dateien

Andere Dateien aus der Mediathek (PDF, ZIP, …) bindest du als Download-Baustein ein oder verlinkst sie im Text:

```markdown
::file{src="media:<id>" name="Handbuch.pdf"}

Das [Handbuch als PDF](media:<id>) enthält alle Details.
```

Gibt es die Datei nicht mehr, zählt die Übersicht der Verwaltung den Link nach dem Veröffentlichen als defekt.

## Die Mediathek

In der Seitenleiste unter **Medien** findest du alle Bilder und Dateien des Workspaces:

- **Hochladen** per Button oder Drag & Drop. Erlaubt sind Bilder (PNG, JPG, WebP, AVIF, GIF, SVG), PDF, Videos, ZIP,
  Markdown, JSON und CSV.
- **Suchen** nach Dateiname oder Alt-Text und filtern nach *Alle*, *Bilder* oder *Dateien*.
- Ein Klick auf eine Datei öffnet die **Details**: Dateiname, Typ, Abmessungen, Größe, Datum, den **Alt-Text** zum
  Bearbeiten und das fertige **Markdown** zum Kopieren.
- Unter **Verwendung** siehst du, auf welchen Seiten, in welchen Änderungsanfragen, Screenshots und Website-Einstellungen
  (Logo, Favicon, Startseite) die Datei verwendet wird.

Ein geänderter Alt-Text wird beim nächsten Generieren in alle Seiten übernommen.

:::warning[Löschen ist endgültig]
Gelöschte Dateien lassen sich nicht wiederherstellen. Wird eine Datei noch verwendet, löscht Docsello sie erst nach
einer zweiten Bestätigung (**Trotzdem löschen**) – Seiten zeigen dann nur noch den Alt-Text, Screenshots verlieren ihr
Bild. Dateien anderer Personen können nur Admins löschen.
:::

## Videos und Einbettungen

Videos von YouTube oder Loom, Figma-Entwürfe und andere Seiten bindest du mit dem Baustein **Einbettung** ein
(`::embed{url="https://…"}`). YouTube-Videos laden erst beim Klick. Siehe [Bausteine](doc:bausteine).

## Per API hochladen

Bilder und Dateien lassen sich auch über die [REST-API](doc:rest-api) (`POST /api/v1/media`) oder den
[MCP-Server](doc:mcp-server) (`upload_media`) hochladen. Die Antwort enthält die Referenz `media:<id>` für das Markdown.