Bilder in WordPress optimal präsentieren

Sie sind Designerin, Hochzeitsfotograf oder arbeitest ganz traditionell mit Pinsel und Farbe? Oder Sie betreuen eine Website für ein Unternehmen oder einen Verein? Dann wollen Sie natürlich auch die passenden Bilder optimal präsentieren. Eine WordPress-Website bietet ihnen dafür die besten Möglichkeiten. Sie können entweder einzelne Bilder oder Bilderserien zeigen. Letztere werden in WordPress als Galerien bezeichnet.

In diesem Beitrag erfahren Sie, wie Sie Ihre Bilder mit Lightboxen (also mit ablenkungsfreien Hintergründen) und Galerien ganz einfach in Szene setzen.

Bilder auf einer Webseite präsentieren – die Basics

Zunächst zu den Grundlagen. Wenn Sie die Bilder aus einer Kamera oder einem Handy in WordPress importieren, sind sie auf zweierlei Art zu groß:

Die Abmessungen: Für den Einsatz auf einer Website genügt eine maximale Breite und Höhe von etwa 1000 bis 1200 Pixel.
Die Bilddateien: Wenn Sie Ihre Besucherinnen und Besucher nicht mit langen Ladezeiten quälen möchten, müssen Sie die Bilddateien komprimieren. Faustregel: Die Grenze von 100 KB (0,1 MB) sollte nach der Komprimierung nicht überschritten werden.

WordPress ist kein Bildbearbeitungsprogramm. Am besten ist es, die Bildoptimierung schon vor dem Upload in WordPress zu erledigen. Dafür gibt es spezialisierte Programme wie Photoshop (kostenpflichtig) oder GIMP (kostenlos).

Die Blöcke in WordPress

Sie haben Ihre Bilder fürs Internet optimiert? Prima, dann geht es jetzt in WordPress weiter.

Zunächst wechseln Sie in den Bearbeitungsmodus für einen Beitrag oder eine Seite. Dann wählen Sie die Stelle aus, an der das Bild eingefügt werden soll, zum Beispiel nach einem Text oder einer Überschrift.

WordPress hat für alles einen Block, und für Bilder gleich mehrere. Einsortiert sind sie in der Rubrik Medien.

Einen Bildblock anlegen

Nachdem Sie links oben auf das Pluszeichen geklickt haben, öffnet sich der Block-Inserter, das Einfügewerkzeug für Blöcke aller Art. Alles, was mit Bildern zu tun hat, sortiert WordPress in der Abteilung Medien ein. So erhalten Sie eine Übersicht aller Medien-Blöcke:

Klicken Sie auf das Register Blöcke.
Scrollen Sie nach unten bis zur Rubrik Medien.

In dieser Rubrik finden Sie die folgenden Blöcke zum Einfügen von Bildern:

Bild: Präsentation eines einzelnen Bildes
Galerie: Präsentation mehrerer Bilder
Cover: Kombination aus Bild und überlagerndem Text
Medien und Text: Kombination aus Bild (oder Video) und daneben stehendem Text

Mit der ersten Option, dem Bildblock, setzen Sie ein einzelnes Bild in Szene.

Ein Bild mit einer Lightbox in Szene setzen

Nach dem Anlegen eines Bildblocks fügen Sie das gewünschte Bild ein, entweder per direktem Upload oder über die WordPress-Mediathek. Oberhalb des Bilds erscheint dann eine schwebende Palette mit verschiedenen Schaltflächen.

Für die Aktivierung der Lightbox klicken Sie zunächst auf das Symbol mit der Kette. Aus dem Menü wählen Sie dann folgende Option aus: Vergrößern bei Klick. Das Bild mit einem Lightbox-Effekt skalieren.

Sobald Ihre Besucher das Bild anklicken, präsentiert es WordPress vergrößert und ohne Ablenkung. Die Einstellungen für Ihr Feintuning finden Sie in der rechten Seitenleiste.

Wenn Sie in der Hauptspalte das Bild anklicken, stellt Ihnen WordPress in der rechten Seitenleiste eine Reihe von Werkzeugen zur Verfügung. Diese beiden sind besonders effektvoll:

Ränder: Hier können Sie einen Rand anlegen und dabei die Farbe und Dicke auswählen.
Radius: Hier können Sie die Ecken des Bilds nach deinen Vorstellungen abrunden.

Eine Bildergalerie anlegen

Sie möchten mehrere Bilder so einfügen, dass sich Ihre Besucher von Bild zu Bild durchklicken können? Diese Funktion wird „Galerie“ genannt. WordPress hat zwar schon einen Galerieblock an Bord, allerdings ist die integrierte Lösung nicht besonders attraktiv.

Für Designerinnen und Fotografen empfiehlt sich der Einsatz eines Galerie-Plugins. Die Auswahl ist bei WordPress nicht ganz einfach, denn für diesen Zweck stehen dir mehr als zwei Dutzend Optionen zur Verfügung. Besonders einsteigerfreundlich ist das Plugin SimpLy Gallery Blocks.

Erhältlich ist es kostenlos und als Premium-Plugin, wobei Sie mit der kostenlosen Version schon sehr schöne Effekte erzielen können. Die Installation funktioniert ganz einfach über das Backend von WordPress.

Einen Galerieblock auswählen

Nach der Installation und Aktivierung finden Sie über den Block-Inserter, also das Pluszeichen, die von SimpLy Gallery Blocks mitgebrachten Galerieblöcke. Diese stehen Ihnen nun zur freien Verfügung.

Im Beispiel unten wurde der Block SimpLy Grid ausgewählt, ein einfaches Gitter. Bestückt wurde es mit vier Meisterwerken von Leonardo da Vinci. Das sind die besonderen Effekte von SimpLy Gallery Blocks:

In der Galerie können sich Ihre Besucher von Bild zu Bild durchklicken.
Beim Überfahren mit der Maus verändert sich die Helligkeit eines Bilds. Damit können Ihre Besucher zunächst entspannt über alle Bilder der Galerie navigieren und dann ihr bevorzugtes Motiv anklicken.
Mit einem zweiten Klick auf ein Bild wird es ablenkungsfrei im Vollbildmodus präsentiert.
Alle Bilder der Galerie können in einer automatisch ablaufenden Diashow betrachtet werden.
Die Galerien sind responsiv, sie passen sich also problemlos an Handys, Tablets, Laptops und Desktop-Computer an. Wenn wenig Platz auf dem Display ist, werden die Bilder einfach gestapelt und natürlich bleiben die Seitenverhältnisse erhalten.
Beim Überfahren mit der Maus und im Einzelbild-Modus blendet das Plugin zwei Icons ein: Download und Sharing.

Galeriebilder zum Download und Sharing anbieten

Im Beispiel sehen Sie rechts unten beim Lächeln der Mona Lisa die folgenden zwei Icons:

Das Download-Icon: Mit einem Klick auf dieses Icon können Ihre Besucher das entsprechende Bild herunterladen und speichern.
Das Sharing-Icon: Dieses Icon kommt Besuchern entgegen, die ein Bild auf einem Social-Media-Netzwerk wie beispielsweise Facebook, Instagram oder Bluesky posten möchten.

Download und Sharing aktivieren oder deaktivieren

Sie möchten Ihre Bilder nicht als „Allgemeingut“ auf alle Plattformen gestreut haben? Kein Problem, denn Sie entscheiden, ob Ihre Besuchern die speziellen Funktionen nutzen dürfen. Wenn Sie in der Hauptspalte auf den Galerieblock klickst, blendet WordPress in der rechten Seitenleiste folgende Optionen ein:

Teilen-Button: anzeigen oder verbergen
Download-Button: anzeigen oder verbergen

Noch ein Praxistipp zu SimpLy Gallery Blocks: Sie können das Plugin jederzeit deaktivieren und wieder aktivieren, alle Einstellungen bleiben dabei vollständig erhalten. Dieses Vorgehen kann manchmal Probleme lösen, wenn sich bestimmte Funktionen von WordPress in die Quere kommen.

Bilder in WordPress präsentierten: Zusammenfassung

WordPress ist sehr gut dafür geeignet, Bilder attraktiv und benutzerfreundlich im Internet zu präsentieren. Um lange Ladezeiten zu vermeiden, sollten die Bilder vor dem Upload allerdings auf eine Größe von 100 KB oder weniger komprimiert werden.

Für einzelne Bilder stellt WordPress bereits gut konfigurierbare Blöcke zur Verfügung, für die Präsentation einer Bilderserie empfiehlt sich der Einsatz eines Galerie-Plugins. Dank einer kurzen Lernzeit und der nahtlosen Integration in das Blocksystem von WordPress ist SimpLy Gallery Blocks für Einsteiger sehr gut geeignet.

Titelmotiv: Photo by Abhishek Kumar on Unsplash