WordPress Tipps und Tricks: Der richtige Umgang mit Bildern

Bei ihrer Arbeit erlebt es Annette Schwindt immer wieder, dass Nutzer nicht wissen, wie sie mit Bildern in WordPress richtig umgehen. Sie berücksichtigen nicht die Zusammenhänge von Bildmaßen und Ladezeiten, von Dateinamen, Bildtiteln, -beschreibungen und der Funktionsweise von Mediathek und Suchmaschinen. Sie ignorieren, dass Websites sich auf verschiedenen Geräten unterschiedlich verhalten und erzielen so unerwünschte Ergebnisse im Frontend. Wie man all das richtig macht und noch einiges mehr erfahren Sie in diesem Beitrag.

(Foto: Redpixel.pl, Shutterstock)

Was Sie vor dem Hochladen erledigen sollten

Gerade Anfänger laden gern Originaldateien in die Mediathek hoch – samt automatisch vergebenem Namen und auch sonst unbearbeitet. Das kostet unnötig Speicherplatz und verlangsamt die Webseite, auf der das Bild nachher benutzt wird. Außerdem verstehen Suchmaschinen nicht, worum es auf dem Bild geht, können es also nicht passend indizieren, sehbehinderte Nutzer werden ausgeschlossen und auch in der WordPress-Mediathek selbst ist es über die Suche nicht mehr auffindbar, wenn man nicht den exakten Dateinamen wie z.B. IMG12345.jpg  kennt. Deshalb sollte ein Bild immer wie folgt bearbeitet werden, bevor es hochgeladen und benutzt wird:

1. Welche Bildgrößen verwendet das Theme?

Jedes WordPress-Theme hat bestimmte eigene Bildgrößen für die Standardversionen Vorschaubild, Mittel und Groß, die Sie unter Einstellungen > Medien nachschauen und anpassen können. Etwaige Header- oder Hintergrundbilder sind aber oft größer als die dortige Version Groß. Außerdem ändern sich diese Standardbildgrößen meist, wenn Sie das Theme wechseln. Mehr als 2000 Pixel Breite werden Sie aber nach derzeitigem Stand in keinem Fall benötigen.

download-iconDiesen und andere Artikel aus UPLOAD Magazin 44 herunterladen: Jetzt die E-Book-Version der Ausgabe kaufen (4,99 Euro, kostenlos für Abonnenten)

2. Original sichern

Bevor Sie das Bild nun bearbeiten, sollten Sie zuerst die Originaldatei kopieren und das Original sicher verwahren. Bearbeitet wird nur die Kopie. Falls dabei etwas schief geht, können Sie so immer wieder auf das Original zurückgreifen und eine neue Kopie zum Bearbeiten erstellen.

3. Dateinamen anpassen

Behalten Sie dabei nicht den automatischen Namen wie z.B. IMG12345.jpg bei. Ändern Sie ihn in etwas Sprechendes wie z.B. sanfrancisco2012.jpg. Wenn Sie zum selben Thema mehrere Bilder haben, dann werden Sie noch präziser wie z.B. strand_sanfrancisco2012.jpg oder sanfrancisco2012_hotel.jpg. Wichtig: Verwenden Sie in Dateinamen keine Umlaute, Sonder- oder Leerzeichen! Statt Leerzeichen können Sie sich des Unterstrichs „_“ bedienen. Ich versuche außerdem, meine Dateinamen konsequent klein zu schreiben, einfach der Übersichtlichkeit wegen.

Den angepassten sprechenden Dateinamen finden Sie nachher in der Mediathek viel leichter wieder und auch die Suchmaschinen achten darauf.

4. Bildmaße anpassen

Sobald die Kopie des Orginalbildes sprechend benannt wurde, können Sie sie in einem Bildbearbeitungsprogramm öffnen und die Maße anpassen. Dieses Program muss nicht gleich Photoshop sein. Kostenlose Varianten wie Gimp oder Irfan View tun es auch. Ein kostengünstiger Vielkönner ist z.B. Photoshop Elements. Auf dem Mac kann das auch das mitgelieferte Tool Vorschau oder die preisgünstige App Pixelmator.

Wie oben bereits erwähnt, sollten beim Reduzieren der Maße 2000 Pixel für die längere Seite genügen. Je nach dem, welche Bildgröße Sie nachher in WordPress auswählen (Vorschau, Mittel, Groß, Individuell), wird das Bild dort automatisch entsprechend neu berechnet.

5. Komprimieren nicht vergessen

Wenn Ihr Bildbearbeitungsprogramm das Komprimieren des Bildes fürs Web bereits zur Verfügung stellt, können Sie das noch vor dem ersten Speichern miterledigen. Wenn nicht, können Sie auf externe Dienste wie tinypng.com oder  jpegmini.com zurückgreifen. Durch das Komprimieren werden Speicherbedarf und Ladzeit des Bildes deutlich verringert, was wiederum die Benutzerfreundlichkeit Ihrer Website, vor allem mobil, steigert. Google berücksichtigt diese Faktoren inzwischen auch beim Ranking von Websites.

Lesetipp: Frank Bueltge gibt in seinem UPLOAD-Artikel weitere Tipps, wie Sie die Performance Ihrer WordPress-Website verbessern können. Und bei Vladimir Simovic bekommen Sie wichtige Tipps und Hinweise zum Thema SEO.

6. Bild hochladen

Erst wenn all diese Schritte erledigt sind, sollten Sie ein Bild in Ihre WordPress-Mediathek hochladen. Dazu haben Sie zwei Möglichkeiten:

  • Direkt von der Seite, oder dem Beitrag aus, in dem Sie das Bild verwenden wollen: Dateien hinzufügen > (Medien hinzufügen) Dateien hochladen > Per Drag&Drop oder via Dateien auswählen.
  • Von der Mediathek aus (Medien > Medienübersicht): Datei hinzufügen > usw.

7. Was Sie beim Hochladen nicht vergessen sollten

Allein mit dem Hochladen ist es aber nicht getan, auch wenn das Bild bis hierher optimal vorbereitet wurde. Vor der Nutzung im Frontend gilt es noch einige Meta-Daten (oder wie WordPress das nennt: Anhang-Details) auszufüllen. Das können Sie entweder direkt nach dem Hochladen tun, oder durch Anklicken des bereits hochgeladenen Bildes in der Medienübersicht. Der folgende Screenshot zeigt letztere Variante:

Screenshot der Bildverwaltung in WordPress mit Anhang-Details

Dort wird nach folgenden Details gefragt:

  • Titel: Hier wird zunächst der Dateiname übernommen und sollte, wenn nicht schon vor dem Hochladen geschehen, spätestens jetzt sprechend gemacht werden. Diese Angabe wird für die Ordnung in der Mediathek verwendet.
  • Alternativtext: Hier sollten Sie das Bild näher beschreiben. Der Alternativtext wird angezeigt, wenn ein Bild nicht oder noch nicht geladen wird, oder er wird von Screenreadern für Menschen mit Sehbehinderungen vorgelesen. Außerdem wird er von Suchmaschinen indexiert.
  • Beschriftung: Wird nur benötigt, wenn Sie möchten, dass im Frontend unter dem Bild ein Bildtext zu sehen sein soll. Wenn nicht, lassen Sie diesen Bereich frei.
  • Beschreibung: Ausführliche Beschreibung des Bildes. Wird auf Anhangseiten angezeigt und ist für Suchmaschinen relevant.

Wenn Sie all diese Schritte vollzogen haben, ist Ihr Bild für die eigentliche Verwendung in WordPress perfekt gerüstet! Hier nochmal alles in der Übersicht:

Checkliste für das Bearbeiten von Bildern

  • Bildgrößen des Themes nachschauen
  • Kopie vom Original speichern
  • Dateiname sprechend machen
  • Bildmaße anpassen
  • Komprimieren
  • Hochladen
  • Anhang-Details ausfüllen

Wie Sie Bilder in WordPress einbinden

1. Im Inhaltsbereich

Die meisten Bilder verwendet man für gewöhnlich im Inhaltsbereich zur Illustration von Texten mit einzelnen Bildern oder in Form von Bildergalerien. Dabei gibt es verschiedene Möglichkeiten, die Bilder am Text auszurichten, und außerdem können Sie verschiedene Bildgrößen auswählen. Jedes Bild können Sie darüber hinaus auf ein spezifisches Ziel verlinken.

a) Ausrichtung

Bilder, die schmaler als der Inhaltsbereich sind, können von Text umflossen werden. Dafür sind die Varianten Links und Rechts in den Anhangdetails unter Ausrichtung da. Das folgende Beispiel zeigt die Variante Links:

Screenshot eines links gefloateten Bildes in WordPress

Wenn Sie ein Bild neben Text stellen, dann bedenken Sie, dass Ihr Inhalt auf verschiedenen Geräten, also mit verschiedenen Bildschirmgrößen und –auflösungen angeschaut wird. Das kann gerade bei mobilen Geräten zu Verzerrungen des Textbereichs führen. Testen Sie also besser, ab welcher Größe ein Bild auf einem kleinen Ausgabegerät auf der kompletten Breite dargestellt wird, und wenden Sie diese dann als Mindestgröße an. Oder unterlassen Sie das Umfließen komplett und stellen Bilder immer in eine eigene Zeile. Dies erreichen Sie am besten mit der Ausrichtung Zentriert (ordnet das Bild mittig an) oder mit Keine (stellt das Bild an den Zeilenanfang).

b) Größe

Bilder im Inhaltsbereich können wie schon erwähnt in den themespezifischen Standardvarianten Vorschau, Mittel und Groß verwendet werden. Außerdem bietet WordPress noch die Optionen Vollständige Größe und Individuelle Größe an. Selbst wenn Sie jedoch die vollständige Größe auswählen, kann das Bild im Inhalt nicht breiter als der Inhaltsbereich dargestellt werden. Das geht nur , wenn Sie es im Frontend nochmal anklicken, um es in der Einzelansicht oder einer Lightbox (mehr dazu gleich) anzuschauen. Und natürlich nur sofern es entsprechend verlinkt und in entsprechender Größe hochgeladen wurde. Bei der individuellen Größe können Sie beliebige kleinere Maße wählen. Vergrößern geht nicht, das würde zum Verpixeln führen und sieht unschön aus.

c) Verlinkung

Ein weiteres Bild-Detail, nämlich Link zu, entscheidet darüber, was passiert, wenn jemand das Bild nachher im Frontend anklickt. Die verfügbaren Optionen hier lauten:

  • Medien-Datei: Führt beim Klick auf das Bild dazu, dass sich nur das Bild im Browser öffnet. Dabei wird es zunächst maximal so groß wie der Bildschirm angezeigt. Ist das eigentliche Bild noch größer, erscheint eine Lupe mit einem Pluszeichen anstelle des Cursors, über die das Bild in seine vollständige Größe und wieder zurück geklickt werden kann.
  • Anhang-Seite: Öffnet beim Anklicken des Bildes eine automatisch generierte WordPress-Seite, die das Bild und die Anhang-Details zeigt.
  • Individuelle URL: Ist dazu gedacht, das Bild mit einer speziellen Webseite zu verlinken.
  • Keine: Falls man gar keine Verlinkung haben möchte.

Mit diesen Optionen a) bis c) steuern Sie das Einfügen einzelner Bilder in den WordPress-Inhaltsbereich. Sie können aber auch mehrere Bilder zu einer Galerie zusammenstellen:

d) Galerie

WordPress verfügt standardmäßig über eine einfache Galeriefunktion, die Sie vom Editor eines Beitrags oder einer Seite aus über Dateien hinzufügen > Galerie erstellen nutzen können: Einfach die gewünschten Bilder auswählen und rechts unten Galerie einfügen anklicken:

Screenshot vom Erstellen einer Bildergalerie in WordPress

Vor dem Einfügen können Sie die Reihenfolge der Bilder noch per Drag&Drop verändern. Zusätzliche Bilder können Sie über Galerie bearbeiten hinzufügen. Weitere Details für das Verhalten beim Anschauen, Anklicken und bezüglich der Größe der einzelnen Bilder werden ebenfalls hier definiert. Das gilt auch für die Anzahl der Spalten, in denen die Galerie angeordnet sein soll.

So eine Standardgalerie sieht dann schon ganz nett aus, aber mit den passenden Plugins geht es auch noch schöner. Ich möchte hier zwei aus der vielfältigen Auswahl von Plugins vorstellen, die mir bisher gute Dienste geleistet haben:

Jetpack: Das WordPress-eigene Multitalent unter den Plugins bietet neben zahlreichen anderen Funktionen folgende Optionen für das Erweitern der Standardgalerie an:

  • Vorschaubild-Grid: Entspricht der o.g. Standardgalerie in der Größe Vorschaubild.
  • Gekacheltes Mosaik: Ordnet die Bilder gemäß ihrer Maße – also nach Hoch- oder Querformat – zueinander in einem Mosaik an, wobei die Bildgrößen entsprechend angepasst werden.
  • Quadratische Kacheln: Baut ein Mosaik aus den quadratischen Vorschau-Ausschnitten in der maximalen Größe, die sich aus der gewählten Spaltenanzahl ergibt.
  • Kreise: Tut dasselbe nur eben in kreisförmigen statt in quadratischen Ausschnitten.
  • Gekachelte Spalten: Kachelt die Bilder nach ihren Maßen in durchgehenden Spalten.
  • Diashow: Baut eine automatisch ablaufende Diashow mit dunklem Hintergrund ein, die sich auch manuell bedienen lässt.

Featherlight: Ist ein supereinfach verwendbares Plugin, das einzelne Bilder oder solche aus Galerien beim Anklicken in einer Lightbox darstellt und (bei Galerien) blätterbar macht. Einzige Voraussetzung: Die Bilder müssen unter Link zu auf Medien-Datei eingestellt sein. Wo das Plugin nicht benötigt wird, kann es beitrags- oder seitenweise im Editor abgeschaltet werden.

Bleiben Sie auf dem Laufenden

Bleiben Sie auf dem Laufenden

Wenn Ihnen dieser Artikel gefällt, bestellen Sie doch unseren Newsletter. Wir haben jede Woche einen neuen, ausführlichen und nützlichen Beitrag für Sie, geschrieben von Fachjournalisten und Experten. Themen: E-Business, Online-Marketing, Social Media und mehr. Mit uns bleiben Sie auf dem Laufenden und lernen jedes Mal etwas Neues hinzu. Aktueller Themenschwerpunkt: „Social Media Boost“.

Jetzt E-Mail eintragen...

3. Beitragsbilder

Außer im Inhaltsbereich, nutzen die meisten WordPress-Themes inzwischen Beitragsbilder, also Titelbilder zu den einzelnen Blogartikeln. Diese illustrieren die Beiträge sowohl in der Gesamtliste der Blogartikel (Beitragsübersicht oder Blog-Main), als auch in der Einzelansicht pro Beitrag. Je nach Sortierung (Beitragsübersicht, Kategorieseiten etc.) können sie verschieden dargestellt werden. Deshalb sollte man darauf achten, dass nicht nur das Bild selbst, sondern auch die automatisch dazu generierten Ausschnitte passend gewählt werden. Wie, das ist von Theme zu Theme unterschiedlich. Hochgeladen werden Beitragsbilder im Editor über das gleichnamige Widget rechts unten.

4. Header/Hintergrundbilder

Manche Themes bieten außerdem das Hochladen von Header-Bildern (also von Bildern für den Kopf der Website) sowie von Hintergrund-Bildern an. Das läuft in der Regel über den Customizer, wo dann auch die optimalen Bildmaße in Pixeln angegeben werden. Auch hier gilt: Komprimieren nicht vergessen und Nachsehen, wie sich die Bilder auf den verschiedenen Ausgabegeräten verhalten. So können Hintegrundbilder mobil auch schon mal komplett entfallen.

Keine Probleme mehr mit Bildern in WordPress?

Wenn Sie all diese Tipps berücksichtigen, sollte das Verwenden von Bildern in WordPress kein Problem mehr sein. Was aber, wenn man seine WordPress-Website schon eine Weile genutzt hat, bevor man diese Tipps bekam, oder wenn man trotz allem vor dem Hochladen noch etwas vergessen hat? Mit folgenden Helfern können Sie nachbessern:

Nachbearbeiten in WordPress

Auf einer Seite ist ein Rand noch nicht richtig abgeschnitten, oder der Ausschnitt, den WordPress automatisch für Ihr Bild zieht, ist nicht der Gewünschte? Dann rufen Sie das Bild in der Medienübersicht auf und wählen Sie dort Bild bearbeiten.

Nützliche Plugins

Für komplexere Probleme gibt es jede Menge Plugins. Drei davon sind:

Tipps zum Weiterlesen

Diese Artikel sind ebenfalls interessante für Sie:

Weitere Artikel zu:

Artikel vom 07. März 2017