Alles rund ums Bild

Bilder gehören zu Blogbeiträgen wie die Butter zum Brot. Ein Bild bringt das Thema eines Beitrags auf den ersten Blick auf den Punkt und weckt das Interesse der Leserinnen und Leser:  Blogbeiträge mit Bildern werden häufiger gelesen, Blogbeiträge, die wir auf Twitter oder Facebook mit einem Bild bewerben, werden häufiger geklickt. Beim Bloggen sind gute Bilder daher unerlässlich. Das gilt auch fürs Wissenschaftsbloggen: Schließlich transportieren wir unsere digitalen Lesegewohnheiten auch mit in die Welt der Wissenschaftsblogs.

Dieser Artikel gibt einen Überblick über alles, was aus technischer Sicht rund um das Thema Bilder und Bildgrößen bei den WordPress-Installationen von de.hypotheses zu beachten ist. Wenn die Frage, woher das Bild kommt, beantwortet ist und Klarheit über die Möglichkeiteen zur Nachnutzung  besteht – das Bild gehört einem also selbst, ist gemeinfrei oder so lizensiert ist, dass die Nachnutzung und Nachbearbeitung erlaubt ist – kann es losgehen:

Bilder einbetten

Über „+“> „Allgemeine Blöcke“ wird ein neuer Bild-Block hinzugefügt

Ein Bild in einen Artikel oder eine Seite einzubetten, ist denkbar einfach. In der Artikelansicht wird über „+“ > „Allgemeine Blöcke“ ein neuer Bild-Block hinzugefügt. Dabei kann das Bild entweder direkt hochgeladen oder aus der Mediathek ausgewählt werden. Je nachdem, wo im Artikel das Bild erscheinen soll, kann der Block nun nach oben oder unten verschoben werden.

Im Block-Editor wird das Bild standardmäßig nicht vom Fließtext „umarmt“, so, wie es noch vor einigen Jahren im Web häufig zu sehen war. Das liegt daran, dass auf Mobiltelefonen oder Tablets ohnehin Bild und Text gestapelt, also getrennt voneinander, angezeigt werden. Wer trotzdem das Bild neben dem Text und nicht darunter oder darüber anzeigen möchte, kann entweder das Bild auf links- oder rechtsbündig setzen oder ein Spaltenlayout wählen (ebenfalls als Block über „+“ > „Layout-Elemente“ > Spalten). Hier kann auch eingestellt werden, wie groß die einzelnen Spalten sein sollen.

Tipps zur Beschriftung von Bildern 

Um bei Suchmaschinen besser gefunden zu werden, empfiehlt es sich, die Bilder zu beschriften: Das geschieht im Untertitel (Beschriftung) des Bildes, der direkt beim Hochladen oder anschließend festgelegt werden kann. Es ist gute Praxis und meistens auch rechtlich notwendig, hier zusätzlich zur Bildunterschrift auch den oder die Urheber/in des Bildes sowie die Lizenz zu nennen.

Von außen nicht sichtbar, aber dennoch wichtig ist, für das Bild einen Alternativtext (alt-text) festzulegen, der beschreibt, was das Bild zeigt (z.B.: Vietnamesische Geflüchtete im Boot 1980). Das dient einerseits der Barrierefreiheit, andererseits hilft es Suchmaschinen, den Inhalt des Bildes korrekt zu identifizieren. Der Alternativtext kann (ebenso wie auch die Beschriftung des Bildes) festgelegt werden, indem das Bild in der Mediathek (Medien > Medienübersicht) geöffnet wird und dort die Anhang-Details ausgefüllt werden.

Die Bildunterschrift kann direkt beim Hochladen oder über die Anhang-Details eingefügt werden

Und noch ein Tipp: Am besten ist es, dem Bild schon beim Abspeichern einen eindeutigen Titel zu geben (also nicht img_02345, sondern: Boat People 1980). Auch das hilft bei der Suchmaschinenoptimierung. Mehr zur Suchmaschinenoptimierung bei de.hypotheses ist übrigens hier nachzulesen.

Was ist ein Beitragsbild?

Wer zum ersten Mal ein Bild hochladen will, ist schnell verwirrt: Das Beitragsbild, das in der Artikelansicht in der rechten Seitenleiste (unter dem Reiter „Dokument“) festgelegt werden kann, ist nicht das Bild, das eingebettet im Text erscheint. Je nach genutztem Theme kann ein Beitragsbild entweder das Bild sein, das auf der Startseite in der Artikelübersicht angezeigt wird (Hueman) oder quer oberhalb des Artikels in der Artikelansicht (Twenty Twenty). Nutzt man diese Themes nicht, kann man das Beitragsbild einfach ignorieren. Es ist aber von Vorteil, ein Beitragsbild festzulegen, da es dann automatisch angezeigt wird, wenn der Beitrag bei Twitter oder Facebook gepostet wird.

Die richtige Bildgröße für eingebettete Bilder

Um das Blog nicht zu überladen und so die Ladezeit der Seite zu verlangsamen, sollte darauf geachtet werden, dass die Beitragsbilder nicht zu groß sind. Sind sie wiederum zu klein, werden sie unscharf angezeigt. Wir empfehlen eine Bildgröße von 35 KB.

Wie groß sollte mein Headerbild sein?

Dagegen darf das Header-Image, also das Bild in der Kopfzeile, wesentlich größer sein. WordPress empfiehlt für die auf Hypothèses verwendeten Themes folgende Auflösungen (die Empfehlungen sind im Customizer einzusehen):

Hueman: 1380 x 280 Pixel

Twenty Seventeen: 2000 x 1200 Pixel (unterstützt auch .mp4)

Twenty Sixteen: 1200 x 280 Pixel

Twenty Fifteen: 954 x 1300 Pixel

Twenty Fourteen: 1260 x 240 Pixel

Twenty Thirteen: 1600 x 230 Pixel

Twenty Twelve 960 x 250 Pixel

Wie kann ich ein Bild so einstellen, dass es sich beim Klicken automatisch vergrößert?

Über das Büroklammersymbol wird der Link zur Mediendatei gesetzt

Bilder können durch einen Klick vergrößert werden, indem im Backend beim Einfügen des Bildes ein Hyperlink (über Strg + K oder das Büroklammer-Symbol) auf „Medien-Datei“ gesetzt wird. So zeigt WordPress das Bild beim Klicken in seiner vollständigen Größe an. Es ist gute Praxis, diese Funktion grundsätzlich zu nutzen.

Was tun, wenn meine Bilder verpixelt angezeigt werden?

Gelegentlich kommt es vor, dass Bilder – obwohl sie in der empfohlenen Größe hochgeladen werden – verpixelt dargestellt werden. Das liegt häufig daran, dass beim Einbinden des Bildes in den Artikel eine kleinere Bildgröße gewählt wurde und dann das Bild manuell (an Hand der roten Punkte) vergrößert wurde. In diesem Fall greift WordPress nicht auf die Originaldatei in der Mediathek, sondern auf das kleine Bild zurück und vergrößert dieses – so entsteht die verpixelte Darstellung. Wer von Anfang an darauf achtet, keine zu großen Bilder hochzuladen, kann beim Einbinden einfach die vollständige Größe wählen und dann nach eigenem Ermessen und ohne Qualitätsverlust die Größe anpassen, in der das Bild angezeigt werden soll.

Warum werden WikiCommons-Bildern nicht im Vorschaumodus angezeigt?

Wird ein Bild aus WikiCommons im Bild- oder Galerie-Block verlinkt, so wird das Bild nicht im Viewer angezeigt (es wird also nicht vor schwarzem Hintergrund vergrößert, wenn man darauf klickt). Der Grund dafür ist, dass bei WikiCommons-Bildern die URL nicht direkt zum Bild führt, sondern zu einer Seite, die andere HTML-Elemente enthält. Das Problem lässt sich beheben, indem auf der Bildleiste rechts neben dem Bild auf der Seite der Datei auf „Use this file on the web“ geklickt wird und dann die „File URL“ kopiert wird. Dies ist die direkte URL des Bildes, die im Bild- oder Galerie-Block verwendet werden und (über das Büroklammerzeichen) mit der Mediendatei verknüpft werden kann, sodass das Bild auch im Viewer angezeigt werden kann.

Und nun wünschen wir viel Spaß beim Bebildern der Artikel!

Zum Weiterlesen empfehlen wir folgende Artikel:

Bilder, Videos und Dokumente finden: https://bloghaus.hypotheses.org/1260

Mit multimedialen Inhalten arbeiten: https://bloghaus.hypotheses.org/2739.

Suchmaschinenoptimierung bei Hypothèses: https://bloghaus.hypotheses.org/1919.

Rechtliche Fragen beim Bloggen: https://bloghaus.hypotheses.org/1232.

Beitragsbild: Roman Kraft, Unsplash-Lizenz


Ulrike Stockhausen

Ulrike Stockhausen arbeitet als Referentin für digitale Wissenschaftskommunikation für de.hypotheses bei der Max Weber Stiftung in Bonn. Sie ist US-Historikerin mit Schwerpunkt Religionsgeschichte und bloggt rund um die Themen Promotionsalltag und Wissenschaftsbetrieb bei www.cafecumlaude.de.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Suche in OpenEdition Search

Sie werden weitergeleitet zur OpenEdition Search