Bilder auf Webseiten
Keine Website ohne Bilder. Sowohl auf Homepages, sonstigen Seiten als auch bei Beiträgen erfüllen Abbildungen die unterschiedlichsten Aufgaben. Vor allem auf der Startseite dienen sie meistens als „Eyecatcher“. Einerseits sollen sie die Aufmerksamkeit und das Interesse des Besuchers wecken und Vertrauen aufbauen. Andererseits können sie dem Besucher eine visuelle Vorstellung vom Inhalt der Seite / des Beitrags vermitteln. Oder sie verdeutlichen einen im Text beschriebenen Sachverhalt wie dies z. B. bei Infografiken der Fall ist. Manchmal lockern sie einen längeren Text aber auch einfach nur auf.
Quelle der Bilder
Die Wahl eines Bildes hängt maßgeblich davon ab, zu welchem Zweck es eingesetzt werden soll. Wenn es nur als Blickfang oder zur Auflockerung dienen soll, greifen viele auf Stockfotos (Bilder von Foto-Portalen) zurück. Jedoch haben diese zwar Vorteile, aber auch gravierende Nachteile.
Deshalb ist es wesentlich besser, eigene Fotos oder Grafiken zu verwenden, die Sie entweder selbst gemacht haben oder die ein Profi speziell für Sie erstellt hat. Aber vergessen Sie auch hierbei nicht, später unterhalb der Abbildung den Urheber (Inhaber der Rechte) bzw. die Bildquelle anzugeben.
Vorsicht bei Bildern aus dem Internet
Selbst erstellte bzw. für Sie angefertigte Fotos und Grafiken sind nach Möglichkeit nicht nur aus Urheberrechtsgründen Abbildungen aus dem Internet vorzuziehen.
Bildvorbereitung
Nachdem Ihnen nun die passenden Fotos oder Grafiken im .jpg oder .png-Format vorliegen, könnten Sie mit dem Einbau auf Ihrer Webseite beginnen. Wenn da nicht die Suchmaschinenoptimierung wäre. Denn Abbildungen, vor allem Fotos, bringen eine große Datenmenge mit, die die Ladezeit Ihrer Webseite in die Knie zwingt. Um das zu vermeiden, sollten Sie jede Abbildung vor dem Hochladen bearbeiten:
- Das Format (Höhe – Breite in px) an die Vorgaben Ihres Themes anpassen
- Alle Abbildungen komprimieren z. B. mit TinyPNG (auch für jp(e)g-Dateien geeignet)
EIne Alternative zu den oben genannten Formaten bildet WebP, dass inzwischen mit wenigen Ausnahmen (z. B. IE) von allen modernen Browsern unterstützt wird. Der Vorteil ist, dass die Datenmenge der Bilder um bis zu 50 % reduziert wird, weshalb für Websites trotz der „Browser-Einschränkung“ zu empfehlen ist. Bei Grafiken benötigen Sie, sofern sie „verlustfrei – kleinstes“ wählen, keine zusätzliche Komprimierung mehr. Bei .jpg-Bildern haben Sie (nur) die Wahl zwischen beste, mittlere, geringste Qualität. Dadurch wird die Datenmenge nicht ganz so stark verringert und eine zusätzliche Komprimierung kann sinnvoll sein. Leider bieten noch nicht alle Bildbearbeitungs-Programme das neue WebP-Format an. Sie müssten Ihre Bilder wie zuvor erstellen und Sie anschließend auf einer Website wie › TinyIMG umwandeln.
Anschließend könnten Sie die Bilder in zunächst die WordPress Mediathek hochladen. Oder Sie laden sie an der Stelle hoch, an der Sie sie einsetzen möchten, also als Bild-Block im Gutenberg Editor. Wobei ich im Folgenden sowohl Fotos als auch Grafiken unter dem Begriff Bilder zusammenfasse.
Möglichkeiten Bilder einzufügen
Der Gutenberg Editor bietet vier Optionen an. Zunächst erstellen Sie immer einen neuen Block. Im Auswahlmenü finden Sie in der Kategorie
- Allgemeine Blöcke: Bild, Cover und Galerie sowie unter
- Layout-Elemente: Medien und Text.
Abweichend von der Reihenfolge im Menü des Editors beginne ich mit dem Cover, da dieses meistens den Kopf einer Seite oder eines Beitrags bildet.
Bilder als Cover
Wie die Bezeichnung Cover (Titel einer Seite) bereits andeutet, handelt es sich um große Bilder mit Text. Um ein Cover zu erstellen, wählen Sie den Cover-Block aus. Anschließend haben Sie folgende Optionen:
- Hochladen (vom PC),
- Auswählen aus der WP Mediathek oder
- mittels der angezeigten Farbfelder nur einen farbigen Hintergrund festlegen.
Nachdem Sie sich für eine davon entschieden haben, erscheint das Bild bzw. die Farbfläche als neuer Block. Im Zentrum befindet sich ein Textblock – Schreibe einen Titel…. Falls Sie ein Bild gewählt haben, ist ein dunkles Overlay voreingestellt. Jedoch können Sie die einzelnen Bestandteile des Covers individuell anpassen. Zunächst zu den Einstellungen für das Hintergrundbild.
Anpassung des Cover-Bilds
Einerseits richtet sich die Höhe nach der Anzahl der Textzeilen und der Schriftgröße. Je länger der Text und je größer die Schrift ist, desto höher ist am Ende der Cover-Block. Wenn der Text z. B. aus einer Zeile in normaler Schriftgröße besteht, ist das spätere Cover nur ein recht schmaler Streifen. Um trotz wenig Text ein höheres Cover zu erhalten, könnten Sie ober- und/oder unterhalb des Textes noch einen Spacer (Abstandshalter) einfügen.
Andererseits können Sie die Höhe auch durch Bewegen des blauen Punkts am unteren Rand des Bildes verringern. Falls Sie einen fixierten Hintergrund (Parallax-Effekt) bevorzugen, bei dem sich beim Scrollen der eigentliche Beitragsbereich nach oben über das Bild schiebt, können Sie rechts in der Seitenleiste eine Mindesthöhe in Pixeln bestimmen.
Wenn Sie diese Option nicht nutzen, haben Sie zusätzlich die Möglichkeit den Fokus des Bildes zu verschieben. Abschließend stellen Sie in der Bearbeitungsleiste ein, ob das Bild links-, rechtsbündig bzw. zentriert sein soll oder Sie wählen weite Breite bzw. gesamte Breite aus. Außerdem passen Sie in der Seitenleiste die
- Deckkraft (Schieberegler 0 bis 100%) und
- Farbe des Overlays sowie
- die Hintergrundfarbe (z. B. bei png-Dateien mit transparentem Hintergrund) an.
Leider ist die Beschriftung des Farbwahlbereichs etwas irreführend. Zwar bestimmen Sie hier die Overlayfarbe, aber gleichzeitig ist dies auch die Hintergrundfarbe. Wenn Sie dort beispielsweise einen Blauton auswählen, erhält das Bild ein blaues Overlay. Nachdem Sie die Deckkraft auf 0% verringert haben, sehen Sie zwar kein Overlay mehr, aber alle zuvor transparenten Bereiche des Ausgangsbildes sind nun blau.
Danach bearbeiten Sie den Textblock (i. d. R. ein Überschriftsblock) und fügen eventuell weitere Textblöcke oder Buttons etc. hinzu.
Einzelne Bilder einfügen
Um ein einfaches Bild vor den Textblöcken oder als Illustration zwischen anderen Blöcken einzufügen, erstellen Sie wieder einen neuen Block. Diesmal klicken Sie in der Auswahl jedoch auf Bild. Auch hierbei entscheiden Sie sich zwischen
- direktem Hochladen (vom PC),
- Auswählen aus der WP Mediathek oder
- Einfügen der URL eines Bildes.
Anschließend können Sie das Bild über die Bild bearbeiten-Schaltfläche jederzeit durch ein anderes Bild ersetzen. Nachdem das gewünschte Bild angezeigt wird, nehmen Sie folgende Einstellungen vor:
- Alternativen Text eingeben: Er sollte das Schlüsselwort für Ihren Beitrag enthalten
- Eine Beschriftung hinzufügen: Hinweis auf den Rechteinhaber / die Bildquelle (und optional einen Titel) über das Icon (… in einem Rahmen) in der Bearbeitungsleiste über dem Bildblock.
- Bildgröße einstellen
Bilder anpassen
Entweder wählen Sie eine der vorgegebenen Bildgrößen Vorschaubild (Thumbnail) – mittel – groß – vollständige Größe aus oder Sie geben die gewünschten Maße in Pixeln manuell ein. Dabei sollten Sie aber das ursprüngliche Verhältnis von Breite zu Höhe beibehalten. Falls das Ausgangsbild das Format 1024 x 600 px hat, wäre z. B. eine Anpassung auf 341 x 200 px = ein Drittel denkbar. Dagegen wäre 300 x 200 px ungünstig, da das nicht nur die Gesamtgröße, sondern auch den sichtbaren Teil des Bildes verändern würde.
Außerdem haben Sie die „elegantere“ Möglichkeit, das Bild über die Schaltflächen 100% – 75% – 50% – 25% anzupassen. Damit bleibt der sichtbare Teil des Originals erhalten, nur die Höhe und Breite werden prozentual verringert.
Darüber hinaus bietet Ihnen der Gutenberg Editor neben der Standard-Maske (Rechteck) auch noch eine Kreis-Maske an. Letztere wäre z. B. für einen Biografie-Block geeignet, hat jedoch den Nachteil, dass nur der mittlere Teil des Bildes sichtbar ist. Zuletzt legen Sie über die Bearbeitungsleiste noch die Orientierung fest:
- Links- / Rechtsbündig
- Zentriert
- Weite Breite: Über die gesamte Seitenbreite; Bildhöhe bleibt unverändert
- Gesamte Breite: wie oben, aber größere Bildhöhe
Um dem Besucher zu ermöglichen, direkt durch einen Klick auf das Bild z. B. zu einem anderen Beitrag zu gelangen, verlinken Sie das gesamt Bild. Dafür klicken Sie auf das Link-Symbol in der Bearbeitungsleiste und fügen die URL der Zielseite ein (s. auch Gutenberg Tutorial Teil 4).
Mehrere Bilder – Galerie
Wenn Sie auf Ihrer Landing Page oder in Blog-Beiträgen mehrere „zusammenhängende“ Bilder anzeigen möchten, erstellen Sie einen Galerie-Block. Einerseits können Sie auch wieder mehrere Bilder direkt von Ihrem PC hochladen. Andererseits ist es in diesem Fall komfortabler, die Bilder aus Ihrer WP Mediathek auszuwählen.
- Im Block auf Mediathek klicken und
- die gewünschten Bilder markieren
Anschließend öffnet sich ein neues Fenster, in dem Sie die Reihenfolge der Bilder noch verändern können. Außerdem könnten Sie hier jedes einzelne Bild beschriften bzw. mit einem Hinweis auf den Rechteinhaber versehen.
Nachdem Sie auf Einfügen geklickt haben, passen Sie die Galerie an. Sie legen fest, ob der gesamte Galerie-Block links-, rechtsbündig oder zentriert angezeigt wird. Oder Sie entscheiden sich für Weite Breite bzw. Gesamte Breite (s. o.).
Außerdem bestimmen Sie die Anzahl der Spalten (1 – 3), d. h. der Bilder pro Zeile. Wenn Sie mehrere Bilder-Zeilen untereinander verwenden möchtest, geben Sie für jede einzelne Zeile die Anzahl der Spalten an. Des weiteren haben Sie die Möglichkeit, Vorschaubilder zu beschneiden, um sie besser auszurichten. Für eine Verlinkung der gesamten Galerie nutzen Sie die Option in der Seitenleiste.
Gleiche Größe von Bildern
Insbesondere bei Galerien sollten alle Bilder im gleichen Ausgangs-Format vorliegen, so dass sie sich gleichmäßig in die Maske einfügen und nicht verzerrt oder unvollständig dargestellt werden. Außerdem sollte die Beschriftung der einzelnen Galerie-Bilder nicht zu lang sein, da sie sonst auf kleineren Bildschirmen u. U. den unteren Teil des Bilds so weit überdeckt, dass das Bild kaum noch zu erkennen ist.
Medien und Text
Um ein Bild und den (dazu gehörigen) Text in zwei Spalten nebeneinander darzustellen, benötigen Sie den Medien und Text-Block. Diesen finden Sie im Block-Auswahlmenü unter Layout-Elemente. Nachdem Sie den Block eingefügt haben, befindet sich auf der linken Seite die Eingabemaske für das Bild und auf der rechten der Textbereich. Die Vorgehensweise zur Bearbeitung des Text-Bereichs entspricht der bei Gutenberg-Blöcken üblichen.
Auch beim Einfügen des Bildes haben Sie wieder die Optionen Hochladen oder Auswahl aus der WP Mediathek. Die weiteren Einstellungsmöglichkeiten unterscheiden sich jedoch gegenüber dem vorher für Bilder beschriebenen. Lediglich die Eingabe eines alternativen Textes ist dieselbe.
Medien-Block anpassen
In der Seitenleiste über dem Alt-Text finden Sie bei diesem Block zwei Schalter. Einerseits können Sie festlegen, ob Bild und Text auf mobilen Geräten gestapelt werden sollen. Dies ist i. d. R. sinnvoll, da nebeneinander liegende Spalten je nach Bildschirmgröße nicht optimal dargestellt werden. Andererseits können Sie das Bild auch noch zuschneiden. Wenn die Größe Ihres Ausgangsbilds an Ihr Theme angepasst ist, ist das normalerweise nicht notwendig.
Alle weiteren Anpassungen nehmen Sie über die Bearbeitungsleiste oberhalb des Blocks vor:
- Gesamter Block: Weite oder gesamte Breite sowie
- Bild links oder rechts des Text-Teils.
- Ausrichtung des Bildes: Vertikal oben, mittig oder unten.
In den meisten Fällen bietet sich vertikal mittig an. Falls der Textbereich jedoch höher als das Bild ist, käme für das Bild eventuell eher vertikal oben in Frage. Denn der Text sollte beispielsweise nicht oberhalb der oberen Bildkante beginnen, um dann mit der unteren Bildkante abzuschließen. Wenn Sie den Text nicht kürzen möchten, dann sollte er zumindest erst in Höhe der oberen Bildkante beginnen.
Falls Sie doch einen längeren Text mit einem Bild kombinieren möchten, der Text das Bild sozusagen „umfließen“ soll, bietet sich zwei andere Methoden an. Entweder Sie verwenden ein Spalten-Layout oder Sie integrieren das Bild in einen Textblock. Die Beschreibung hierzu finden Sie in meinen Gutenberg Tutorial 4 – Textblock.
Bildgröße im Medien-Text-Block
Der Medien- und Text-Block wirkt am harmonischsten, wenn sich die Höhe des Bildes und die des Textbereichs in etwa entsprechen.
Nachdem Sie Ihre Seite / Ihren Beitrag nun mit Bildern verschönert haben, erkläre ich in meinem Gutenberg Tutorial Teil 6 das Einfügen spezieller Blöcken wie Zitat, Liste etc.
WEITERE GUTENBERG-TUTORIALS
- Einführung
- Bedienfelder
- Überschrift
- Textblöcke
- Layout Elemente, Listen, Zitate
- Spezialelemente und Widgets
Abbildungen © eb, Gutenberg Team | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.
