Bilder sind ein zentrales Gestaltungselement in WordPress. Sie strukturieren Inhalte, transportieren Emotionen und erleichtern das Verständnis von Texten. Damit sie ihre Wirkung entfalten, sollten sie technisch sauber eingebunden, sinnvoll platziert und für mobile Geräte optimiert sein. In diesem Beitrag erfährst du, worauf es dabei ankommt.
Das richtige Bildformat für Websites
Bevor ein Bild in WordPress eingefügt wird, sollte das Format stimmen. Für moderne Websites ist WebP die beste Wahl. Es bietet eine hohe Bildqualität bei deutlich geringerer Dateigröße und sorgt damit für schnellere Ladezeiten. Wenn deine Bilder 1920 Pixel (px) breit sind, solltest du alles damit machen können, diese Größe passt auch für ein Header-Bild. Die Ladezeit des Bildes sollte unter 400 KB liegen. Mit dem Online-Tool Photopea.com kannst du die Größe ändern, die Bilder als WebP speichern und die Ladezeit verringern.
Alternativ werden JPEG für Fotos und PNG für Grafiken mit Transparenz verwendet. Für animierte Grafiken kannst du ein GIF nehmen. Wenn möglich, sollte jedoch immer WebP eingesetzt werden, da Performance ein wichtiger Faktor für Nutzerfreundlichkeit und Suchmaschinen ist.
Bilder im Text-Editor einfügen
Im Text-Editor (auch Classic Editor oder TinyMCE) werden Bilder über „Medien hinzufügen“ eingefügt. Dabei sind zwei grundsätzliche Varianten zu unterscheiden.
- Bild mit Text daneben (Textumfluss)
Soll Text neben dem Bild stehen, muss der Cursor vor dem ersten Buchstaben des Textes platziert werden – auch dann, wenn das Bild später rechts ausgerichtet wird. Erst danach wird das Bild eingefügt und links oder rechts ausgerichtet, sodass der Text korrekt um das Bild fließen kann. - Bild ohne Text daneben
Steht ein Bild allein im Beitrag, ohne umfließenden Text, wird es als eigenständiges Element eingefügt. In diesem Fall eignet sich die Funktion „Untertitel“, um eine kurze Beschreibung oder Quellenangabe direkt unter dem Bild anzuzeigen.
Zusätzlich lässt sich festlegen, ob ein Bild gar nicht verlinkt wird, auf die Bilddatei selbst verweist oder auf ein anderes Ziel wie eine Unterseite, ein PDF oder eine externe Website.
Bilder im Pagebuilder einfügen
Pagebuilder arbeiten meist mit Layouts aus Spalten oder Boxen, nicht mit Textumfluss. Typisch ist ein Abschnitt mit zwei Boxen nebeneinander: eine Box für das Bild, eine Box für den Text. Dies ermöglicht eine klare Struktur, lässt sich flexibel gestalten und ist auch für mobile Geräte leicht anpassbar.
Vorteile der Zwei-Boxen-Struktur:
- Du kannst für Mobilgeräte festlegen, ob zuerst das Bild oder zuerst der Text angezeigt wird.
- Das Bild kann am Handy 100 Prozent der Breite einnehmen, ohne dass du zusätzliche CSS-Anpassungen brauchst.
Nachteil:
- Text kann das Bild nicht umfließen – Bild und Text stehen strikt getrennt in den jeweiligen Boxen.
Hinweis: Viele Pagebuilder bieten zusätzlich klassische Texteditoren innerhalb der Boxen. Dort können Bilder wie im Classic Editor vom Text umflossen werden.
Mobile Darstellung von Bildern
Auf Smartphones sollten Bilder in der Regel die volle Breite einnehmen. Technisch lässt sich dies über CSS mit max-width: 100% lösen, meist innerhalb einer @media-Query. Dies gilt unabhängig davon, ob Pagebuilder oder Classic Editor verwendet werden. Viele Themes, z.B. GeneratePress, übernehmen diese Skalierung automatisch.
CSS-Beispiel für responsive Bilder
In den meisten Fällen reicht eine einzige CSS-Regel, damit Bilder auf Desktop und Mobilgeräten korrekt dargestellt werden:
img { max-width: 100%; height: auto; display: block; }
Diese Regel sorgt dafür, dass Bilder niemals breiter als ihr Inhaltsbereich werden. Auf großen Bildschirmen bleiben sie in ihrer natürlichen Größe, auf Smartphones passen sie sich automatisch der schmaleren Bildschirmbreite an.
Eine zusätzliche @media-Regel ist nicht notwendig, solange Bilder auf Desktop und Mobilgeräten gleich reagieren sollen. Viele WordPress-Themes setzen dieses Verhalten bereits standardmäßig um.
Das Ergebnis: Bilder bleiben gut lesbar, verzerren nicht und ragen weder am Desktop noch am Mobiltelefon über den Content-Bereich hinaus.