> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# Bilder

> Einzelbilder mit Link, Alt-Text und responsiven Darstellungsoptionen einbinden.

Die Inhaltsart **Bilder** bindet ein einzelnes Bild ein, optional mit Link, Alt-Text und gerätespezifischer Darstellung.

## Inhaltsart auswählen

Im Editor einer Seite, Einkaufswelt oder eines Bausteins auf **+ Neu** klicken, im Tab **Inhalt** auf **Bilder**. Es öffnet sich der Dialog **„Neues Bild"**.

## Felder

### Allgemein

| Feld                           | Bedeutung                                                                                    |
| ------------------------------ | -------------------------------------------------------------------------------------------- |
| **Beschreibung**               | Interner Name des Inhalts (max. 255 Zeichen)                                                 |
| **Datei**                      | Bilddatei auswählen (öffnet den [Dateimanager](/docs/de/dynamic-content/user-guide/dateien)) |
| **Alt-Text**                   | Alternativtext für Screenreader und SEO (max. 255 Zeichen)                                   |
| **In allen Sprachen anzeigen** | Stellt den Inhalt sprachübergreifend bereit                                                  |

### Einstellungen

| Feld              | Bedeutung                                                      |
| ----------------- | -------------------------------------------------------------- |
| **Breite (px)**   | Feste Bildbreite in Pixeln. `0` = volle Containerbreite (100%) |
| **Link**          | Externe URL, auf die das Bild verlinkt                         |
| **Ziel-Seite**    | Interne Seite als Linkziel (Alternative zu Link)               |
| **Ladepriorität** | Priorität für den Browser (Default: Auto)                      |
| **Ladeverhalten** | Wann das Bild geladen wird (Default: Eager = sofort)           |

### Darstellung

Pro Gerätetyp lässt sich festlegen, wie das Bild angezeigt wird. Verfügbare Stufen: **Mobil**, **Tablet hoch**, **Tablet quer**, **Desktop**, **Desktop Large** (Default überall: **Wie Bild**, übernimmt die Originaldarstellung).

### Veröffentlichung

| Feld               | Bedeutung                                                              |
| ------------------ | ---------------------------------------------------------------------- |
| **Layout Bereich** | Bereich des Seitenlayouts, in dem das Bild erscheint (Default: Inhalt) |
| **Aktiv**          | Macht das Bild sichtbar                                                |

## Tipps

<Tip>
  Pflege immer einen **Alt-Text**: er ist wichtig für Barrierefreiheit (Screenreader) und SEO.
</Tip>

<Tip>
  Lade Bilder vorab über [Dateien](/docs/de/dynamic-content/user-guide/dateien) in passende Verzeichnisse hoch, dann findest du sie schneller im Dateimanager.
</Tip>

<Tip>
  Für **First-Contentful-Paint-relevante Bilder** (z.B. großes Hero-Banner ganz oben) Ladepriorität und Ladeverhalten auf sofortiges Laden lassen. Für Bilder weiter unten kann Lazy Loading sinnvoll sein.
</Tip>

## Verwandte Themen

<CardGroup cols={2}>
  <Card title="Bildergalerien" icon="images" href="/docs/de/dynamic-content/user-guide/inhaltsarten/bildergalerien">
    Mehrere Bilder als Galerie einbinden.
  </Card>

  <Card title="Dateien" icon="folder-open" href="/docs/de/dynamic-content/user-guide/dateien">
    Bilder und Medien zentral hochladen.
  </Card>

  <Card title="Inhaltsarten" icon="shapes" href="/docs/de/dynamic-content/user-guide/inhaltsarten">
    Alle verfügbaren Inhaltsarten.
  </Card>
</CardGroup>