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
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.
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?
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
OpenEdition schlägt Ihnen vor, diesen Beitrag wie folgt zu zitieren:
Ulrike Stockhausen (7. August 2020). Alles rund ums Bild. Bloghaus. Abgerufen am 12. Oktober 2024 von https://doi.org/10.58079/m28u
Eine Antwort
[…] Für Bilder sind hier einige einfache Bearbeitungen wie Drehen, Beschneiden oder Änderungen der Größe möglich. Allerdings empfehlen wir, Bilder bereits in der gewünschten Größe bzw. den gewünschten Dimensionen hochzuladen. Welche das sind, wird davon abhängen, wie das Bild verwendet werden soll – ob es etwa als Bild in der Kopfzeile gedacht ist oder als Beitragsbild. Informationen hierzu sind in den Beiträgen zu den einzelnen Themes im Bloghaus verfügbar sowie im Beitrag Alles rund ums Bild. […]