Bilder in WordPress einfügen: Bild-Block, Galerie und Cover

Bilder in WordPress einfügen: Bild-Block, Galerie und Cover

Tech

Ein Bild in einen WordPress-Beitrag zu bringen dauert Sekunden. Damit es scharf aussieht, schnell lädt, auf dem Smartphone passt und auch für Screenreader etwas aussagt, lohnt ein genauerer Blick auf die Werkzeuge des Block-Editors. Dieser Artikel zeigt Bild-Block, Galerie, Cover und Mediathek in WordPress 7.1 (Stand Oktober 2026), erklärt, was WordPress beim Hochladen automatisch erzeugt, und führt am Ende zu den offiziellen Lernpfaden für alle, die eigene Blöcke oder Block-Themes bauen wollen.

Der Bild-Block: vier Wege zum Bild

Seit WordPress 5.0 (Dezember 2018) ist der Block-Editor, ursprünglich unter dem Projektnamen Gutenberg entwickelt, der Standard. Ein Bild fügen Sie über das Plus-Symbol und den Block Bild ein oder tippen in eine leere Zeile /bild. Der Platzhalter bietet dann drei Wege: Hochladen vom eigenen Rechner, Mediathek für Dateien, die schon auf der Website liegen, und Von URL einfügen. Ein vierter Weg ist, eine Datei direkt in den Editor zu ziehen oder aus der Zwischenablage einzufügen. Im Reiter Medien des Block-Inserters lassen sich außerdem frei lizenzierte Bilder aus Openverse suchen; WordPress speichert sie beim Einfügen in die Mediathek.

Von URL eingefügte Bilder bleiben auf dem fremden Server. Verschwindet die Datei dort, zeigt der Beitrag eine Lücke, und der Betreiber sieht jeden Abruf. Die WordPress-Dokumentation empfiehlt deshalb, solche Bilder über die Werkzeugleiste in die eigene Mediathek zu übernehmen. Das sollten Sie nur mit Bildern tun, deren Nutzung Ihnen erlaubt ist.

Werkzeugleiste: Ausrichtung, Zuschnitt, Link

Ist der Bild-Block ausgewählt, erscheint darüber eine Werkzeugleiste. Die Ausrichtung kennt sechs Varianten: keine, weite Breite, volle Breite, links, zentriert und rechts. Weite und volle Breite tauchen nur auf, wenn das Theme sie unterstützt. Links und rechts lassen den Text um das Bild fließen, was mit kleinen Bildern gut funktioniert, auf dem Smartphone mit großen aber schnell zu schmalen Textspalten führt. Das Zuschneiden öffnet einen Editor mit Seitenverhältnissen, Zoom, Drehen und Spiegeln; das Ergebnis wird als neue Datei gespeichert, das Original bleibt erhalten.

Über den Link-Knopf verweist das Bild auf eine Adresse, auf die Bilddatei, auf die Anhangseite oder öffnet sich beim Klick vergrößert in einer Lightbox. Weitere Knöpfe blenden die Bildunterschrift ein, tauschen das Bild aus, färben es per Duotone ein oder verwandeln den Block in ein Cover, um Text über das Bild zu legen.

Alternativtext richtig setzen

Das Feld Alternativer Text in der Seitenleiste beschreibt das Bild für Menschen, die es nicht sehen, und für Suchmaschinen. Gut ist eine knappe, konkrete Beschreibung dessen, was das Bild im Zusammenhang zeigt, etwa Screenshot: Seitenleiste des Bild-Blocks mit leerem Alt-Text-Feld statt Bild1 oder einer Kette von Suchbegriffen. Rein schmückende Bilder können als dekorativ markiert werden; sie erhalten dann ein leeres alt-Attribut. Wichtig ist der Unterschied zwischen den Ebenen: Ein Alt-Text im Block gilt nur für diesen Beitrag, ein Alt-Text in der Mediathek wird als Vorgabe übernommen, wenn das Bild später erneut eingefügt wird. Wie Dateinamen, Bildunterschriften und Alt-Texte in der Google-Bildersuche wirken, erklärt der Beitrag zu Google-Bildersuche und SEO.

Galerie, Cover und Medien und Text

Für mehrere Bilder ist der Block Galerie gedacht. Seit WordPress 5.9 besteht er aus einzelnen Bild-Blöcken, sodass jedes Bild eigenen Alt-Text, eigene Bildunterschrift und eigenen Link haben kann. Einstellbar sind Spaltenzahl, das einheitliche Zuschneiden auf gleiche Höhe und eine Bildunterschrift für die ganze Galerie.

Der Block Cover legt Text, Überschriften oder Buttons über ein Bild oder Video. Ein Farb-Overlay sorgt für Lesbarkeit, ein Fokuspunkt bestimmt, welcher Bildteil beim Beschneiden sichtbar bleibt, und ein fester Hintergrund erzeugt einen Parallax-Effekt. Für Seitenköpfe und Abschnittstrenner ist Cover die richtige Wahl, für Bilder mit Informationsgehalt eher nicht, weil Text auf Bildern schwer lesbar ist. Medien und Text stellt ein Bild neben einen Textblock und stapelt beides auf schmalen Bildschirmen untereinander.

Was beim Hochladen passiert: Bildgrößen und srcset

WordPress speichert nicht nur die hochgeladene Datei, sondern rechnet mehrere Varianten. Unter Einstellungen > Medien stehen drei davon: Vorschaubild (150 × 150 Pixel, zugeschnitten), Mittelgroß (höchstens 300 Pixel) und Groß (höchstens 1024 Pixel). Intern kommen weitere Größen hinzu, und Themes oder Plugins können eigene registrieren. Seit WordPress 5.3 verkleinert das System Fotos, die breiter oder höher als 2560 Pixel sind, auf diese Grenze und verwendet die verkleinerte Version; das Original bleibt im Upload-Ordner liegen. Entwickler können den Wert über den Filter big_image_size_threshold ändern.

Aus den Varianten baut WordPress seit Version 4.4 automatisch responsive Bilder. Das img-Element erhält ein srcset mit allen passenden Größen, der Browser lädt nur die, die zur Bildschirmbreite passt. Im Quelltext eines Beitrags sieht das etwa so aus:

<img src="hafen-1024x683.jpg" alt="Containerschiff im Hamburger Hafen"
  width="1024" height="683" loading="lazy" decoding="async"
  srcset="hafen-1024x683.jpg 1024w, hafen-300x200.jpg 300w,
          hafen-768x512.jpg 768w, hafen-1536x1024.jpg 1536w"
  sizes="auto, (max-width: 1024px) 100vw, 1024px">

Das Attribut loading mit dem Wert lazy setzt WordPress seit Version 5.5 für Bilder mit Breiten- und Höhenangabe: Der Browser lädt sie erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Seit WordPress 6.7 ergänzt das System bei solchen Bildern im sizes-Attribut den Wert auto, damit der Browser die tatsächlich dargestellte Breite für die Wahl der Datei nutzen kann. Das erste große Bild einer Seite lädt WordPress dagegen bewusst nicht verzögert, weil es meist sofort sichtbar ist.

WebP und AVIF: moderne Formate in WordPress

FunktionSeit Version
Responsive Bilder mit srcset und sizes4.4 (Dezember 2015)
Block-Editor als Standard5.0 (Dezember 2018)
Verkleinerung großer Fotos auf 2560 Pixel5.3 (November 2019)
Natives Lazy Loading5.5 (August 2020)
Upload von WebP5.8 (Juli 2021)
Upload von AVIF6.5 (April 2024)
sizes-Wert auto für verzögert geladene Bilder6.7 (November 2024)

WebP und AVIF erreichen bei gleicher Qualität deutlich kleinere Dateien als JPEG. Ob sie funktionieren, hängt allerdings nicht von WordPress ab, sondern von der Bildbibliothek des Servers, Imagick oder GD. Unterstützt sie ein Format nicht, scheitert der Upload mit einer Fehlermeldung. Nachsehen lässt sich das unter Werkzeuge > Website-Zustand > Bericht im Abschnitt zur Medienverarbeitung, der die unterstützten Dateiformate auflistet.

Mit WordPress 7.1 vom August 2026 kamen Schnittstellen hinzu, mit denen der Browser Bilder schon vor dem Hochladen verarbeiten kann. Laut dem Testaufruf des Core-Teams verkleinert und kodiert der Editor die Varianten dann lokal per WebAssembly, auch für HEIC-Fotos vom iPhone. Das funktioniert zunächst nur in Chromium-Browsern auf ausreichend starken Geräten; alle anderen nutzen weiter die Verarbeitung auf dem Server. Außerdem lädt die Mediathek seit 7.1 standardmäßig fortlaufend beim Scrollen nach, statt Seiten zu blättern.

Was sich in der Praxis bewährt

Fotos vor dem Upload auf etwa 2000 bis 2560 Pixel Breite bringen, statt WordPress 6000 Pixel große Kameradateien verarbeiten zu lassen, spart Speicherplatz und Serverlast. Jedes inhaltlich relevante Bild bekommt einen Alt-Text, dekorative werden als solche markiert. Breite und Höhe sollten auf Auto bleiben, feste Höhen verzerren auf kleinen Bildschirmen. Slider- und Galerie-Plugins sind für die meisten Blogs überflüssig geworden: Galerie-Block und Lightbox decken den Alltag ab, ohne zusätzliches JavaScript. Wer Bilder per URL von fremden Seiten einbindet, riskiert tote Bilder und Ärger mit Rechteinhabern.

Lernpfad: Block-Entwicklung und Full Site Editing

Mit WordPress 5.9 (Januar 2022) kam der Website-Editor: Block-Themes bestehen seither aus Templates, Template-Teilen und einer Datei theme.json, und Kopfbereich, Fußzeile oder Archivseiten lassen sich mit denselben Blöcken gestalten wie ein Beitrag. Wer tiefer einsteigen will, findet die verlässlichsten Materialien bei WordPress selbst.

  • Learn WordPress (learn.wordpress.org) bietet kostenlose Kurse in der Kategorie Developing with WordPress, darunter Beginner WordPress Developer, Develop Your First Low-Code Block Theme, Intermediate Theme Developer, Introduction to Block Development: Build your first custom block und Using the WordPress Data Layer.
  • Block Editor Handbook (developer.wordpress.org/block-editor): Der Getting-Started-Teil führt in dieser Reihenfolge durch Entwicklungsumgebung, Quick Start Guide, das Tutorial Build your first block und die Grundlagen der Block-Entwicklung.
  • Theme Handbook (developer.wordpress.org/themes) erklärt Block-Themes, Templates und theme.json.

Der Quick Start Guide erzeugt mit dem offiziellen Gerüst in wenigen Minuten ein Plugin mit einem lauffähigen Block. Vorausgesetzt sind Node.js und npm, für die lokale Testumgebung wp-env zusätzlich Docker:

npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
cd copyright-date-block && npm start
npm run env start   # WordPress unter http://localhost:8888, Login admin / password

Ein realistischer Weg für Einsteiger: zuerst ein Block-Theme mit dem Low-Code-Kurs anpassen, dann das Tutorial für den ersten Block durcharbeiten und erst danach React, die Data-Layer und eigene Block-Varianten angehen.

Quellen

Verwandte Beiträge