Thumbnail

3 Tipps für Bilder mit WordPress

14. Juli 2020
Andreas Geyer

Bilder in WordPress und auf jeder anderen Website gehören seit langem zum Standard. Auf was du achten solltest wenn du Bilder mit WordPress hochlädst, erkläre ich dir hier mit 3 einfachen Tipps.

Dateigröße deiner Bilder

Ein wichtiges Thema jeder Website ist die Ladegeschwindigkeit bzw. die benötigte Zeit, bis eine Webseite im Browser geladen ist. Man spricht hierbei oftmals von der „Performance“ einer Webseite. Eine schnell ladende Webseite freut nicht nur Besucher, sondern auch Suchmaschinen.

In erster Linie ist die Dateigröße stark abhängig von der Pixelauflösung des Bildes. Für die meisten Bilder im Internet reichen Auflösungen von 1920×1080 Pixel – also Full HD – vollkommen aus. Wenn du im voraus schon weißt, dass du ein Bild nur als Thumbnail benötigst, so kannst du es natürlich direkt auf zum Beispiel 300×300 Pixel skalieren.

Ein Bild zu skalieren ist in der Regel schon mit einfachen Bordmitteln möglich. Zum Beispiel kannst du die Vorschau App unter macOS nutzen. Unter „Werkzeuge“ und dann „Größenkorrektur“ kannst du einfach und schnell deine Bilder skalieren. Unter Windows 10 mit Paint ist das auch ohne weiteres möglich.

Als grobe Richtlinie solltest du nur Bilder verwenden die kleiner als 1 MB sind. Umso kleiner desto besser für die Performance deiner Webseite. Oftmals ist in WordPress zusätzlich noch ein Plugin installiert, welches hochgeladene Bilder anschließend noch weiter komprimiert, um somit die Dateigröße noch weiter zu reduzieren. Bilder vor dem Upload schon zu komprimieren ist zum Beispiel mit der Website TinyPNG möglich. Eine Dateigröße unter 500 kB ist optimal und in den meisten Fällen kein Problem zu bewerkstelligen.

Einrichten eines Alt-tag für Bilder mit WordPress

Ein Alt-tag für (fast) jedes deiner Bilder einzurichten hat mehrere Gründe. Mit einem „alternative tag“ oder einfach Alt-tag kannst du jedem deiner Bilder einen Text, eine Art Überschrift beziehungsweise Inhaltsbeschreibung hinzufügen. Suchmaschinen verwenden diesen Alt-tag, um zu verstehen, was auf dem Bild zu sehen ist (so intelligent sind sie leider noch nicht, das selber zu erkennen). Somit erhält ein Bild einfach gesagt mehr Information und kann dadurch auch in Suchergebnissen besser gefunden werden.

Ein weiterer Grund für einen Alt-tag ist die „Accessibility“ deiner Webseite, das heißt der Qualität deiner Website von möglichst vielen Besucher genutzt werden zu können. Der Alt-tag wird zum Beispiel angezeigt, sollte ein Problem beim Laden des Bildes auftreten. Ein weiterer sehr wichtiger Punkt hierfür, ist die Möglichkeit, dass ein Screenreader den Alt-tag nutzt beziehungsweise vorlesen kann um somit Menschen, die auf einen Screenreader angewiesen sind, darüber zu informieren was auf einem Bild zu sehen ist.

Ein Alt-tag in WordPress festzulegen ist ganz einfach. Sobald du ein Bild hochgeladen hast, findest du in den Einstellungen des Bildes ein Eingabefeld für deinen Alt-tag. Hier kannst du in einem kurzen Satz den Inhalt deines Bildes beschreiben. Je nach Bild beziehungsweise Inhalt kann das manchmal nicht ganz einfach sein.

Ein Alt-tag für jedes Bild zu setzen muss nicht zwangsläufig der Fall sein. Manchmal sind hochgeladene Bilder ausschließlich für das Design gedacht, zum Beispiel ein Hintergrund mit einem Muster. Hier ist es nicht notwendig einen Alt-tag zu setzen. Hierbei sollte man sich aber überlegen, ob der Einsatz eines CSS-Images sinnvoller wäre.

Dateiformat und Dateityp

Im letzten Tipp geht es um das Dateiformat und den Dateityp. Dieses lässt sich recht schnell zusammenfassen. Zum einen solltest du dir bevor du ein Bild hochlädst Gedanken machen, wo beziehungsweise wie du dein Bild auf der Webseite einbinden möchtest. Was das Dateiformat angeht, solltest du dir überlegen, ob du dein Bild zum Beispiel als Banner über die gesamte Bildschirmbreite haben möchtest, so solltest du vielleicht zu einem 16:9 oder sogar 21:9 Verhältnis greifen. Möchtest du innerhalb eines Abschnittes ein Bild zu einem Text einfügen, macht eventuell ein 1:1, 3:2 oder 4:3 Verhältnis mehr Sinn. Hier gibt es also keine allgemeingültige Antwort und kommt auf den konkreten Fall an.

Die Dateigröße eines Bildes ist auch abhängig vom Dateityp wie PNG oder JPG. In einem Blogbeitrag „PNG vs. JPG“ erkläre ich dir die Unterschiede der beiden Dateiformate und welche man wann nutzen sollte.

Noch ein kleiner Tipp am Rande. Für Bildergalerien und mehrere angeordnete Blogbeiträge mit Beitragsbildern macht es oft Sinn alle in im gleichen Format vorliegen zu haben.

Zusammenfassung

  • Dateigrößen von Bildern sind ein wichtiger Faktor für die Performance von Webseiten und daher auch für Suchmaschinen
  • Skaliere deine Bilder, wenn möglich im voraus, entsprechend ihrer Anwendungen auf der Webseite
  • Nutze nur Bilder mit einer Dateigröße unter einem 1 MB, optimal unter 500 kB. Am besten immer kombinieren mit einem Kompressions-Tool
  • Füge bei (fast) allen Bilder ein Alt-tag hinzu, der kurz und knapp den Inhalt des Bildes beschreibt
  • Je nach Anwendung deiner Bilder auf der Webseite solltest du sie passend zuschneiden.
  • Nutze die richtigen Dateitypen (PNG oder JPG) für deine Bilder

Hier noch etwas interessantes für Dich dabei?

Thumbnail zu Behind the scenes - unsere Website

Behind the scenes – unsere Website

In diesem Artikel wollen wir Dir zeigen, wie unsere Website eigentlich entstanden ist. Vom Konzept über die Entwicklung bis hin zum Hosting. Wir nehmen Dich mal „Behind the scenes“ und zeigen Dir, was dabei alles so passiert.

Thumbnail zu Hilfe innerhalb von Bash

Wie du Hilfe innerhalb von Bash bekommst

Öfters stößt man auf Skripte, in denen Linux-Befehle beschrieben werden, welche für den Leser noch nicht vertraut sind. Die Befehlszeile selbst bietet alle möglichen hilfreichen Informationen darüber, was Befehle tun und wie man sie effektiv einsetzt.

💡 Mehr erfahren!

Du möchtest auf dem Laufenden bleiben und regelmäßig Tipps von uns erhalten, die Dir weiterhelfen? Dann abonniere unser #QbitOneMagazin und verpasse nichts mehr!

Deine Anmeldung konnte nicht gespeichert werden. Bitte versuche es erneut.
Deine Anmeldung war erfolgreich.
Inhalt