WordPress Bilder einfügen: So optimieren Sie Ihre Visuals

Bilder in WordPress einfügen: Beiträge und Seiten professionell gestalten

Bilder machen WordPress-Beiträge und Seiten anschaulicher, verständlicher und professioneller. Sie lockern lange Texte auf, erklären komplexe Inhalte, zeigen Produkte, unterstützen Anleitungen und verbessern die Wirkung Ihrer Website. Gleichzeitig können schlecht vorbereitete Bilder die Ladezeit verschlechtern, Speicherplatz verbrauchen und die Nutzererfahrung beeinträchtigen.

In dieser Anleitung erfahren Sie, wie Sie Bilder im WordPress-Editor korrekt einfügen, welche Bildformate sinnvoll sind, wie Sie Alt-Texte pflegen, wie Galerien und Beitragsbilder funktionieren und worauf Sie bei Performance, SEO und Barrierefreiheit achten sollten.

Warum Bilder wichtig sind

Bilder erfüllen auf einer Website mehrere Aufgaben. Sie sind nicht nur Dekoration, sondern können Inhalte erklären, Vertrauen schaffen und Nutzer gezielt führen.

Bilder helfen bei:

• verständlicheren Anleitungen,
• professionellerem Design,
• besserer Lesbarkeit langer Beiträge,
• Produktpräsentation,
• Markenwirkung,
• Barrierefreiheit, wenn Alt-Texte korrekt gepflegt sind,
• SEO, wenn Bilder thematisch passend eingebunden werden,
• Social-Media-Vorschauen, wenn Beitragsbilder genutzt werden.

Die beste Wirkung erzielen Bilder, wenn sie nicht zufällig eingefügt werden, sondern den Inhalt gezielt unterstützen.

1. Bilder vor dem Upload vorbereiten

Bevor Sie ein Bild in WordPress hochladen, sollten Sie es vorbereiten. Viele Bilder aus Smartphones, Kameras oder Grafikprogrammen sind deutlich grösser, als sie für eine Website sein müssen.

Prüfen Sie vor dem Upload:

• Ist das Bild wirklich notwendig?
• Ist der Bildausschnitt korrekt?
• Ist die Datei komprimiert?
• Ist die Bildbreite passend?
• Hat die Datei einen sinnvollen Namen?
• Ist das richtige Dateiformat gewählt?
• Enthält das Bild keine vertraulichen Informationen?

Für viele Inhaltsbilder reichen Breiten zwischen etwa 1200 und 1920 Pixeln aus. Kleine Grafiken, Logos oder Icons benötigen deutlich weniger. Laden Sie keine unbearbeiteten 5-MB- oder 10-MB-Dateien hoch, wenn das Bild auf der Website nur klein angezeigt wird.

2. Das richtige Bildformat wählen

Das Bildformat beeinflusst Qualität, Dateigrösse und Darstellung. Nicht jedes Format ist für jeden Zweck ideal.

Für normale Inhaltsbilder ist WebP häufig eine sehr gute Wahl. Für transparente Grafiken kann PNG sinnvoll sein. Für Fotos ist JPG weiterhin verbreitet, sollte aber gut komprimiert werden.

3. Gute Dateinamen verwenden

Der Dateiname sollte vor dem Upload angepasst werden. WordPress übernimmt den Dateinamen in die Medien-URL. Später lässt sich der sichtbare Titel zwar ändern, aber die Datei selbst bleibt normalerweise unter ihrem ursprünglichen Namen gespeichert.

Gute Dateinamen sind:

• kurz,
• verständlich,
• kleingeschrieben,
• mit Bindestrichen getrennt,
• ohne Umlaute,
• ohne Leerzeichen,
• ohne Sonderzeichen,
• thematisch passend.

Beispiele:

• Gut: wordpress-bild-einfuegen-block-editor.webp
• Gut: produktfoto-schwarze-kaffeetasse.jpg
• Weniger gut: IMG_8392.JPG
• Weniger gut: Bild neu final groß!!.png

4. Bild im Block-Editor einfügen

In modernen WordPress-Versionen fügen Sie Bilder meistens über den Block-Editor ein. Der passende Block heisst Bild.

So gehen Sie vor:

1. Öffnen Sie den gewünschten Beitrag oder die gewünschte Seite.
2. Klicken Sie an die Stelle, an der das Bild erscheinen soll.
3. Klicken Sie auf das Plus-Symbol.
4. Suchen Sie nach Bild.
5. Wählen Sie den Bild-Block aus.
6. Entscheiden Sie, ob Sie ein Bild hochladen, aus der Mediathek wählen oder per URL einfügen möchten.

Nach dem Einfügen können Sie Ausrichtung, Grösse, Linkverhalten, Alt-Text und weitere Einstellungen anpassen.

5. Hochladen, Mediathek oder URL?

Beim Einfügen eines Bildes bietet WordPress mehrere Möglichkeiten. Jede Variante hat einen anderen Einsatzzweck.

6. Bildgrösse im Editor auswählen

Nach dem Einfügen können Sie wählen, welche Bildgrösse angezeigt werden soll. WordPress erzeugt beim Upload je nach Einstellungen mehrere Bildgrössen.

Typische Optionen:

• Vorschaubild: sehr klein, geeignet für Übersichten oder kleine Elemente.
• Mittel: geeignet für kleinere Inhaltsbilder.
• Gross: geeignet für breite Inhaltsbereiche.
• Vollständige Grösse: Originaldatei, nur verwenden, wenn wirklich nötig.

Verwenden Sie nicht automatisch die vollständige Grösse. Wenn das Bild im Beitrag nur 800 Pixel breit angezeigt wird, muss keine 4000-Pixel-Datei geladen werden.

7. Ausrichtung und Darstellung anpassen

Über die Werkzeugleiste des Bildblocks können Sie die Ausrichtung ändern. Je nach Theme stehen unterschiedliche Optionen zur Verfügung.

Mögliche Ausrichtungen:

• linksbündig,
• zentriert,
• rechtsbündig,
• weite Breite,
• volle Breite.

Nicht jedes Theme unterstützt „weite Breite“ oder „volle Breite“ gleich. Prüfen Sie die Darstellung nach dem Speichern immer in der Vorschau, besonders auf Mobilgeräten.

8. Alt-Text korrekt pflegen

Der Alternativtext beschreibt, was auf einem Bild zu sehen ist. Er ist wichtig für Barrierefreiheit, Bildverständnis und Suchmaschinen. Screenreader können Alt-Texte vorlesen, wenn Nutzer das Bild nicht sehen können.

Ein guter Alt-Text:

• beschreibt den Bildinhalt präzise,
• ist nicht zu lang,
• enthält keine Keyword-Liste,
• passt zum Kontext des Beitrags,
• ist bei rein dekorativen Bildern gegebenenfalls leer.

Beispiele:

• Gut: WordPress-Editor mit geöffnetem Bild-Block
• Gut: Produktfoto einer schwarzen Kaffeetasse auf hellem Hintergrund
• Schlecht: Bild
• Schlecht: WordPress SEO Bild Hosting Schweiz kaufen schnell günstig

Alt-Texte sollten für Menschen geschrieben werden, nicht als künstliche Keyword-Sammlung.

9. Bildbeschriftungen nutzen

Eine Bildbeschriftung ist ein sichtbarer Text direkt unter dem Bild. Sie ist optional, kann aber sinnvoll sein, wenn das Bild zusätzliche Erklärung benötigt.

Beschriftungen eignen sich für:

• Screenshots in Anleitungen,
• Diagramme,
• Statistiken,
• Produktdetails,
• Bildnachweise,
• Vergleichsbilder,
• Fotos mit Kontext.

Verwenden Sie Beschriftungen nicht unnötig bei rein dekorativen Bildern.

10. Bilder verlinken oder nicht?

In den Bildeinstellungen können Sie festlegen, ob ein Bild verlinkt wird. WordPress bietet je nach Block und Version verschiedene Optionen.

Mögliche Linkziele:

• Keine: Bild ist nicht klickbar.
• Mediendatei: Klick öffnet die Bilddatei.
• Anhang-Seite: WordPress erstellt eine eigene Seite für das Bild.
• Benutzerdefinierte URL: Bild verlinkt auf eine gewünschte Adresse.

Für normale Inhaltsbilder ist Keine oft die beste Wahl. Wenn ein Bild gross betrachtet werden soll, kann ein Link zur Mediendatei sinnvoll sein. Anhang-Seiten sind aus SEO-Sicht oft nicht ideal, wenn sie dünne Inhaltsseiten erzeugen.

11. Beitragsbild festlegen

Das Beitragsbild, auch Featured Image genannt, ist ein spezielles Bild für Beiträge oder Seiten. Viele Themes zeigen es in Blogübersichten, Archivseiten, Kartenlayouts, Headerbereichen oder Social-Media-Vorschauen an.

Sie finden das Beitragsbild im Editor meist in der rechten Seitenleiste unter Beitragsbild.

Ein gutes Beitragsbild sollte:

• zum Thema passen,
• einheitliches Format haben,
• nicht zu gross sein,
• professionell wirken,
• auch auf Mobilgeräten gut aussehen,
• einen sinnvollen Alt-Text erhalten, falls relevant.

Bei einem Blog oder einer Knowledgebase wirken einheitliche Beitragsbilder deutlich professioneller als zufällige Bildformate.

12. Galerie-Block verwenden

Wenn Sie mehrere Bilder als Raster anzeigen möchten, verwenden Sie den Galerie-Block. Damit können mehrere Bilder aus der Mediathek ausgewählt und gemeinsam dargestellt werden.

Galerien eignen sich für:

• Projektfotos,
• Produktvarianten,
• Vorher-Nachher-Bilder,
• Eventfotos,
• Referenzen,
• Schritt-für-Schritt-Anleitungen.

Achten Sie bei Galerien besonders auf Dateigrösse und Lazy Loading. Viele grosse Bilder auf einer Seite können die Ladezeit stark erhöhen.

13. Bilder in Spalten oder Layouts einfügen

Wenn Sie Text und Bild nebeneinander darstellen möchten, können Sie den Spalten-Block oder Gruppen-Block verwenden. Viele Themes und Pagebuilder bieten zusätzliche Layoutmöglichkeiten.

Typische Einsatzbereiche:

• Bild links, Text rechts,
• Vergleich von zwei Bildern,
• Teamvorstellung,
• Produktvorteile,
• Feature-Abschnitte,
• Landingpages.

Prüfen Sie solche Layouts immer mobil. Was auf dem Desktop gut aussieht, kann auf dem Smartphone zu eng oder unübersichtlich wirken.

14. Bilder in klassischen Editor einfügen

Wenn Sie den klassischen Editor verwenden, funktioniert das Einfügen etwas anders. Dort nutzen Sie die Schaltfläche Dateien hinzufügen oberhalb des Texteditors.

Der Ablauf:

1. Beitrag oder Seite öffnen.
2. Cursor an die gewünschte Stelle setzen.
3. Auf Dateien hinzufügen klicken.
4. Bild hochladen oder aus der Mediathek wählen.
5. Alt-Text, Ausrichtung und Grösse festlegen.
6. Auf In den Beitrag einfügen klicken.

Auch im klassischen Editor gelten dieselben Grundregeln: Bilder vorher optimieren, sinnvolle Dateinamen nutzen und Alt-Texte pflegen.

15. Screenshots in Anleitungen verwenden

Screenshots sind besonders hilfreich für Knowledgebase-Artikel und technische Anleitungen. Sie zeigen genau, wo ein Nutzer klicken muss oder welche Einstellung gemeint ist.

Gute Screenshots sollten:

• nur den relevanten Bereich zeigen,
• keine persönlichen Daten enthalten,
• keine Kundendaten zeigen,
• nicht unnötig gross sein,
• bei Bedarf markiert oder beschriftet werden,
• aktuell zur beschriebenen Oberfläche passen.

Wenn sich eine Software-Oberfläche ändert, sollten auch Screenshots regelmässig geprüft und aktualisiert werden.

16. Bilder und Ladezeit

Bilder gehören zu den häufigsten Ursachen langsamer Websites. Besonders mehrere grosse Bilder in einem Beitrag können die Ladezeit deutlich erhöhen.

Optimieren Sie Ladezeiten durch:

• komprimierte Bilder,
• passende Bildabmessungen,
• WebP, wenn sinnvoll,
• Lazy Loading,
• keine unnötigen Galerien,
• keine hochgeladenen Originaldateien in voller Grösse,
• saubere Caching-Konfiguration,
• schnelles Hosting.

WordPress unterstützt Lazy Loading für viele Bilder automatisch. Trotzdem sollten Sie sich nicht allein darauf verlassen. Eine zu grosse Datei bleibt gross, auch wenn sie später geladen wird.

17. Bilder und mobile Darstellung

Viele Besucher rufen Websites über Smartphones auf. Deshalb müssen Bilder auf kleinen Bildschirmen gut aussehen und schnell laden.

Prüfen Sie:

• Wird das Bild mobil korrekt skaliert?
• Ist der Bildausschnitt auch auf kleinen Geräten sinnvoll?
• Überragt das Bild nicht den Bildschirm?
• Sind Galerien mobil bedienbar?
• Bleibt Text neben Bildern lesbar?
• Werden wichtige Details nicht zu klein dargestellt?

Nutzen Sie die Vorschau im WordPress-Editor oder testen Sie direkt auf einem Smartphone.

18. Häufige Fehler beim Einfügen von Bildern

• Originalbilder direkt hochladen: Grosse Dateien verschlechtern Ladezeit und Backups.
• Kein Alt-Text: Schlecht für Barrierefreiheit und Bildverständnis.
• Falsches Format: PNG für grosse Fotos führt oft zu unnötig grossen Dateien.
• Externe Bilder ungeprüft einbinden: Rechtliche, technische und Performance-Risiken.
• Vollständige Grösse verwenden: Browser muss unnötig grosse Bilder laden.
• Uneinheitliche Beitragsbilder: Blogübersichten wirken unprofessionell.
• Zu viele Bilder pro Seite: Lange Ladezeiten und unruhiges Layout.
• Bilder nicht mobil geprüft: Darstellung kann auf Smartphones schlecht wirken.

SEO und GEO: Bilder als Kontext nutzen

Bilder können Inhalte verständlicher machen und zusätzliche Signale liefern. Für SEO sind vor allem Dateiname, Alt-Text, Kontext, Ladezeit und technische Einbindung wichtig. Bilder sollten das Thema unterstützen und nicht nur als Dekoration dienen.

Für GEO, also Generative Engine Optimization, sind Bilder besonders hilfreich, wenn sie erklärenden Charakter haben: Screenshots, Diagramme, Produktbilder, Vorher-Nachher-Darstellungen oder Schritt-für-Schritt-Abbildungen. Damit solche Inhalte gut verstanden werden können, sollten sie sinnvoll beschriftet und im Text erklärt werden.

Gute Praxis:

• Bild im Textumfeld erklären,
• präzisen Alt-Text verwenden,
• bei Screenshots sichtbare Schritte beschreiben,
• keine unnötigen Stockbilder ohne Informationswert verwenden,
• Bilder aktuell halten,
• Bilddateien technisch erreichbar lassen.

Empfohlene Vorgehensweise

1. Bild auswählen: Nur Bilder verwenden, die den Inhalt unterstützen.
2. Datei vorbereiten: Zuschneiden, verkleinern und komprimieren.
3. Dateiname anpassen: Kleinschreibung, Bindestriche, keine Umlaute oder Sonderzeichen.
4. Bild hochladen: Über Bild-Block oder Mediathek.
5. Passende Bildgrösse wählen: Nicht automatisch vollständige Grösse verwenden.
6. Alt-Text pflegen: Bildinhalt natürlich beschreiben.
7. Ausrichtung prüfen: Darstellung im Beitrag kontrollieren.
8. Mobile Vorschau testen: Smartphone-Ansicht prüfen.
9. Ladezeit beachten: Besonders bei mehreren Bildern oder Galerien.
10. Beitragsbild setzen: Für Blog- und Archivdarstellung sinnvoll.

Häufige Fragen zum Einfügen von Bildern in WordPress

Wie füge ich ein Bild in WordPress ein?

Öffnen Sie den Beitrag oder die Seite, klicken Sie auf das Plus-Symbol, wählen Sie den Block Bild und laden Sie eine Datei hoch oder wählen Sie ein Bild aus der Mediathek.

Welche Bildgrösse sollte ich verwenden?

Verwenden Sie die kleinste Grösse, die im Layout noch gut aussieht. Für normale Inhaltsbilder ist selten die vollständige Originalgrösse nötig.

Was ist der Alt-Text?

Der Alt-Text beschreibt den Bildinhalt für Screenreader, Suchmaschinen und Situationen, in denen das Bild nicht geladen wird.

Soll ich WebP verwenden?

WebP ist für viele Website-Bilder sehr gut geeignet, weil es hohe Qualität bei kleiner Dateigrösse ermöglicht. Prüfen Sie dennoch, ob Ihr Workflow und Ihre Website es korrekt unterstützen.

Kann ich Bilder von externen URLs einfügen?

Technisch ja, aber es ist oft nicht empfehlenswert. Externe Bilder können verschwinden, langsamer laden, Datenschutzfragen auslösen oder Nutzungsrechte verletzen.

Was ist der Unterschied zwischen Bild und Beitragsbild?

Ein normales Bild erscheint im Inhalt. Das Beitragsbild ist ein spezielles Vorschaubild, das viele Themes in Blogübersichten, Archiven oder Social-Media-Vorschauen verwenden.

Wie füge ich mehrere Bilder ein?

Verwenden Sie den Galerie-Block. Damit können mehrere Bilder aus der Mediathek ausgewählt und als Raster dargestellt werden.

Warum lädt meine Seite nach dem Einfügen von Bildern langsam?

Häufig sind Bilder zu gross, nicht komprimiert oder in voller Originalgrösse eingebunden. Optimieren Sie Dateigrösse, Format und Bildabmessungen.