# Bilder bearbeiten und ersetzen

<span>Hier lernen Sie, Bilder für die Website vorzubereiten, hochzuladen und in bestehenden Bildmodulen zu ersetzen. Zusätzlich werden Alternativtexte, Bildausrichtung, Verlinkungen und Hintergrundbilder verständlich erklärt.</span>

# Bild vor dem Upload vorbereiten

Ein gut vorbereitetes Bild lädt schneller, bleibt scharf und lässt sich leichter wiederfinden. Orientieren Sie sich möglichst am Format des vorhandenen Bildes.

<table border="1" id="bkmrk-eigenschaft-empfehlu" style="border-collapse: collapse; width: 100%; height: 174px;"><colgroup><col style="width: 17.02381%;"></col><col style="width: 42.02381%;"></col><col style="width: 40.952381%;"></col></colgroup><thead><tr style="height: 29px;"><td style="height: 29px;">**Eigenschaft**</td><td style="height: 29px;">**Empfehlung**</td><td style="height: 29px;">**Begründung**</td></tr></thead><tbody><tr style="height: 29px;"><td style="height: 29px;">Dateiformat</td><td style="height: 29px;">WebP oder JPG für Fotos, PNG für Transparenz</td><td style="height: 29px;">WebP und gut komprimiertes JPG-Dateien sind meist deutlich kleiner</td></tr><tr style="height: 29px;"><td style="height: 29px;">Breite</td><td style="height: 29px;">meist 1.600 bis 2.000 px für große Inhaltsbilder</td><td style="height: 29px;">Genug Reserve für große Bildschirme, ohne unnötig riesige Dateien.</td></tr><tr style="height: 29px;"><td style="height: 29px;">Dateigröße</td><td style="height: 29px;">möglichst unter 300 KB, große Titelbilder unter 500 KB</td><td style="height: 29px;">Kleinere Dateien verbessern Ladezeit und Nutzererlebnis</td></tr><tr style="height: 29px;"><td style="height: 29px;">Dateiname</td><td style="height: 29px;">klein, beschreibend, mit Bindestrich</td><td style="height: 29px;">Beispiel: team-tierarztpraxis-leipzig.webp statt IMG\_4837.jpg</td></tr><tr style="height: 29px;"><td style="height: 29px;">Seitenverhältnis</td><td style="height: 29px;">wie beim bisherigen Bild</td><td style="height: 29px;">So bleiben Höhe, Zuschnitt und Seitenlayout stabil.</td></tr></tbody></table>

<table border="1" id="bkmrk-datenschutz-und-rech" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td><span style="color: rgb(224, 62, 45);">Datenschutz und Rechte:</span>

<span style="color: rgb(224, 62, 45);">Laden Sie nur Bilder hoch, für die eine wirksame Nutzungserlaubnis vorliegt. Bei erkennbaren Personen müssen zusätzlich die datenschutzrechtlichen Voraussetzungen erfüllt sein.</span>

</td></tr></tbody></table>

# Vorhandenes Bildmodul öffnen

1. Fahren Sie mit der Maus über das zu ersetzende Bild.
2. Öffnen Sie das dunkelgraue Bildmodul über das Zahnrad.
3. Wählen Sie den Reiter "Inhalt" und öffnen Sie den Bereich "Bild".
4. Klicken Sie auf die Bildvorschau bzw. das Zahnrad an der Vorschau.

![Bild 9.jpg](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/I55hXybMdOtGsz2d-bild-9.jpg)

Das Bild wird im Reiter "Inhalt" des Bildmoduls ausgewählt.

# Neues Bild hochladen oder vorhandenes auswählen

1. Wählen Sie in der WordPress-Mediathek "Dateien hochladen", wenn das Bild noch nicht vorhanden ist.
2. Ziehen Sie die vorbereitete Datei in das Fenster oder wählen Sie sie über Ihren Computer aus.
3. Warten Sie, bis der Upload vollständig abgeschlossen ist.
4. Markieren Sie das Bild und kontrollieren Sie die Dateidetails.
5. Bestätigen Sie die Auswahl über "Bild hochladen" bzw. "Upload an image".

[![Bild 10.jpg](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/3RLyTlD4h4aWsCpZ-bild-10.jpg)](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/3RLyTlD4h4aWsCpZ-bild-10.jpg)

Über die Bildvorschau gelangen Sie in die WordPress-Mediathek

<table border="1" id="bkmrk-nicht-doppelt-hochla" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td>**<span style="color: rgb(22, 145, 121);">Nicht doppelt hochladen!  
</span>**<span style="color: rgb(22, 145, 121);">Suchen Sie vor dem Upload kurz in der Mediathek. Mehrfach vorhandene Dateien erschweren später die Pflege und verbrauchen unnötig Speicherplatz.</span>  
</td></tr></tbody></table>

# Alternativtext korrekt eintragen

Der Alternativtext beschreibt den Inhalt oder die Funktion des Bildes für Menschen, die es nicht sehen können. Er wird außerdem angezeigt, wenn das Bild nicht geladen werden kann.

- Inhaltliches Foto: Kurz beschreiben, was relevant zu sehen ist, zum Beispiel: "Tierärztin untersucht einen Labrador auf dem Behandlungstisch."
- Verlinktes Bild: die Funktion nennen, z.B. "Zur Online-Terminbuchung".
- Reine Dekoration: Je nach technischer Umsetzung leerer Alternativtext; bei Unsicherheit Agentur fragen.
- Nicht beginnen mit "Bild von" oder "Foto von"; Screenreader kündigen Bilder bereits als solche an.
- Keine unnatürlichen Aneinanderreihung von Suchbegriffen.

![Bild 11.jpg](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/SqvfoSYQKHmjNii2-bild-11.jpg)

DIVI bietet für das Bildmodul eigene Felder für Alternativ- und Titeltext.

<table border="1" id="bkmrk-wichtig%3A-wenn-sie-de" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td><span style="color: rgb(53, 152, 219);">Wichtig:</span>

<span style="color: rgb(53, 152, 219);">Wenn Sie den Alternativtext nur in DIVI eintragen, gilt er für dieses Modul. Wenn Sie ihn in der Mediathek pflegen, kann er bei zukünftigen Verwendungen des Bildes als Ausgangswert dienen.</span>

</td></tr></tbody></table>

# Bild ausrichten und Größe prüfen

Unter "Design &gt; Ausrichtung" wählen Sie links, zentriert oder rechts. Ändern Sie die Ausrichtung nur, wenn das Bild sichtbar falsch sitzt oder die Vorlage dies verlangt.

[![Bild 12.jpg](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/jsv4GmPp8mjGCZfb-bild-12.jpg)](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/jsv4GmPp8mjGCZfb-bild-12.jpg)

Die Ausrichtung des Bildmoduls befindet sich im Reiter "Design".

- Vermeiden Sie feste Höhen, wenn sie nicht bereits Bestandteil des Designs sind.
- Vergrößern Sie kleine Dateien nicht über ihre tatsächliche Auflösung hinaus.
- Kontrollieren Sie bei Personenfotos, ob Gesichter auf dem Smartphone sichtbar bleiben.
- Wenn das Bild stark beschnitten wird, kann es sich um ein Hintergrundbild statt um ein Bildmodul handeln.

# Bild verlinken oder in einer Lightbox öffnen

Im Bereich "Link" des Bildmoduls können Sie festlegen, was bei einem Klick geschieht.

![Bild 13.jpg](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/U06lGdYNUIm6FIPC-bild-13.jpg)

Link, Lightbox und Zielfenster werden direkt im Bildmodul eingestellt.

- in Lightbox öffnen: Zeigt das Bild vergrößert über der Seite.
- Bild-Link-URL: Führt zu einer Seite, Datei oder externen Adresse.
- Link-Ziel: Gleiches Fenster für interne Ziele, neues Fenster nach dem abgestimmten Webseiten-Konzept

<table border="1" id="bkmrk-pr%C3%9Cfen%21ein-verlinkte" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td>**<span style="color: rgb(230, 126, 35);">PRÜFEN!</span>**<span style="color: rgb(230, 126, 35);">  
Ein verlinktes Bild muss nach dem Speichern testweise angeklickt werden. Kontrollieren Sie Ziel, Weiterleitung und Öffnungsverhalten..</span>  
</td></tr></tbody></table>

# Bildmoduls oder Hintergrundbild?

Nicht jedes sichtbare Bild ist ein Bildmodul. Flächige Titelbilder liegen häufig als Hintergrund einer Sektion, Zeile oder Spalte. Das erkennen Sie daran, dass beim Überfahren kein dunkelgraues Bildmodul erscheint.

1. Ermitteln Sie anhand des farbigen Rahmens, ob das Bild zu einer blauen Sektion oder grünen Zeile gehört.
2. Öffnen Sie das betreffende Element über sein Zahnrad.
3. Gehen Sie zu "Inhalt &gt; Hintergrund" und wählen Sie dort das Bildsymbol.
4. Ersetzen Sie das Hintergrundbild nur, wenn das neue Bild dasselbe Seitenverhältnis und genügend freie Fläche für darüberliegende Text besitzt.
5. Prüfen Sie Desktop, Tablet und Smartphone besonders sorgfältig.

<table border="1" id="bkmrk-agenturfall%3A-hinterg" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><thead><tr><td>**<span style="color: rgb(224, 62, 45);">AGENTURFALL:</span>**

<span style="color: rgb(224, 62, 45);">Hintergrundposition, Parallax-Effekt, Masken oder komplexe Überlagerungen sollten nicht ohne Abstimmung geändert werden.</span>

</td></tr></thead></table>