In diesem Blogbeitrag geht es um ein zentrales Thema für deine Website: Bilder-SEO – Die optimale Bearbeitung von Bildern. Denn nicht nur für Suchmaschinen, sondern auch für das allgemeine Erscheinungsbild deiner Seite ist dies von großer Bedeutung. Ich werde dir in diesem Artikel Schritt für Schritt erklären, warum die richtige Bildbearbeitung so wichtig ist und wie du am besten vorgehen kannst.

3 gute Gründe, warum die Bildbearbeitung für deine Website so wichtig ist

1. Schnellere Ladezeiten: Nicht optimierte Bilder können die Ladezeit einer Website beeinträchtigen. Mit einer effektiven Bildbearbeitung kannst du die Dateigröße deiner Bilder reduzieren und dadurch die Ladezeit deiner Seite verbessern.
   Die Folge von einer zu langen Ladezeit kann sein, dass ein potenzieller Kunde wieder abspringt, weil ihr/ihm das zu lange dauert.

2. Bessere Benutzererfahrung (UX): Hochwertige und gut bearbeitete Bilder verbessern die Benutzererfahrung auf deiner Website. Besucher werden eher auf deiner Seite bleiben und mit deinen Inhalten interagieren, wenn du ihnen eine visuell ansprechende Website bietest. Dazu gehört auch, dass man keine Texte auf Bilder bastelt. Warum, erfährst du in meinem nächsten Beitrag über Hx-Strukturen.
   Die Folge von nicht oder falsch bearbeiteten Bildern kann unseriös wirken und der Website-Besucher schließt die Webseite ganz schnell wieder.

1. Verbesserte Suchmaschinenoptimierung (SEO): Suchmaschinen verwenden Bilder, um die Relevanz einer Website zu bewerten. Mit einer optimierten Bildbearbeitung kannst du sicherstellen, dass deine Bilder von Suchmaschinen erkannt werden und die Relevanz deiner Website erhöht wird.
   Die Folge von nicht beschrifteten Bildern ist, die Chance auf besseres Ranking in den Suchmaschinen zu verschenken.

Wie man mit PageSpeed Insights von Google überdimensionierte Bilder erkennt und optimiert

Wenn du deine Website analysieren lassen möchtest und herausfinden willst, ob du zu große Bilder hochgeladen hast, hilft dir PageSpeed Insights von Google weiter. Mit diesem Tool kannst du leicht erkennen, ob etwas mit deiner Website nicht stimmt.

Gib einfach deine URL in das Eingabefeld von PageSpeed Insights ein und schon kann es losgehen.

In diesem Artikel konzentrieren wir uns jedoch ausschließlich auf die Bilder. Zeigt dir die Analyse zu große Bilder an?
Dann solltest du diese bearbeiten. Wie das genau funktioniert, erfährst du jetzt!

Bilder-SEO: Vor dem Bearbeiten von Website-Bildern

Das richtige Bildbearbeitungsprogramm wählen

Bevor du mit der Bildoptimierung startest, solltest du das richtige Bildbearbeitungsprogramm auswählen. Hier sind einige kostenlose und kostenpflichtige Optionen:

• Canva*: Kein klassisches Bildbearbeitungsprogramm, aber du kannst damit Bilder bearbeiten, zuschneiden und mehr.
• GIMP: Kostenlose Software für fortgeschrittene Nutzer.
• Photopea: Kostenlose Online-Alternative zu Adobe Photoshop.
• Adobe Photoshop: Kostenpflichtig im Abonnement.
• Affinity: kostenpflichtig, aber ohne Abo.

Um herauszufinden, welches Programm für dich am besten geeignet ist, solltest du verschiedene Programme testen und mit denselben Bildern bearbeiten. So kannst du herausfinden, welches Programm dir am meisten zusagt.

Die gängigsten Bildformate für das Web

Es gibt viele Bildformate, doch die fürs Web am häufigsten genutzten, stelle ich dir nun vor:

• JPG (manchmal auch JPEG): Kann von allen gängigen Programmen konvertiert werden und hat den Vorteil einer sehr kleinen Dateigröße mit variabler Komprimierung. Eine Qualität von 60-80% reicht überwiegend aus.
• PNG: Geeignet für Bilder mit transparentem Hintergrund, wie freigestellte Bilder oder Logos. Bitte beachte, dass die Dateigrößen sehr viel größer sind als bei JPG und du den Einsatz genau überdenken solltest.
• GIF: Eignet sich für Animationen wie animierte Grafiken. Falls du CSS3 nicht beherrschst, ist das eine Alternative, um bewegte Bilder auf deiner Website zu nutzen.
• SVG: Skalierbare Vektorgrafiken haben keine feste Größe in Pixeln. WordPress blockiert dieses Format standardmäßig, aber es gibt Möglichkeiten, es trotzdem zu nutzen.
• WebP: Ein neues Bildformat von Google mit noch kleineren Dateigrößen als JPG. Nicht alle Browser können es ausgeben, aber das ist vernachlässigbar, da es sich meist um veraltete Browser handelt. Die meisten Bildbearbeitungsprogramme können WebP exportieren. Achte hierbei auch auf die Bildqualität.

Mein Tipp: Arbeite zunächst mit JPG und PNG und nutze ein Bildoptimierungsplugin wie EWWW Optimizer oder Imagify, um das Bildformat automatisch zu optimieren und WebP auszugeben. So kannst du dich auf das Wesentliche konzentrieren und deine Website-Bilder effizient optimieren.

Bildgröße und Auflösung für deine Website

Bevor du ein Bild auf deine Website hochlädst, musst du ihm eine passende Größe geben. Die Bildabmessungen werden in Pixeln angegeben, z.B. 500 Pixel Breite und 800 Pixel Höhe. Die Bildauflösung hingegen wird in dpi (Pixel pro Inch) gemessen und gibt an, wie viele Pixel auf eine Längeneinheit kommen. Es ist wichtig zu wissen, dass dies zwei verschiedene Dinge sind.

Für Bilder auf deiner Website ist die Bildauflösung irrelevant, wichtiger sind die Bildabmessungen. Die richtige Bildgröße hängt von den Monitor- oder Display-Größen ab, die die meisten Nutzer verwenden. Du kannst die am häufigsten genutzten Bildschirmgrößen über Statistikanbieter wie Statcounter herausfinden.

Die meisten Nutzer verwenden einen Bildschirm mit der Größe 1920×1080, also nehmen wir das als Grundlage für unsere Berechnungen. Um die richtige Bildgröße zu bestimmen, solltest du von der Inhaltsbreite deiner Website und dem Platz ausgehen, an dem du das Bild einsetzen möchtest. Überprüfe dazu in deinem Theme, welche Größe voreingestellt ist. Bei Divi* beträgt die Standardinhaltsbreite beispielsweise 1080 Pixel, aber du kannst auch mit 1200 Pixeln arbeiten und die Größen entsprechend anpassen.

Es ist wichtig, dass du die Bildgröße relativ zur Breite betrachtest. Wenn du beispielsweise eine breite Textspalte hast und daneben ein kleines Bild einfügen möchtest, reichen 260 Pixel Breite für das Bild völlig aus.

Wenn du die Breite deines Bildes ändern möchtest, solltest du dein Bildbearbeitungsprogramm so einstellen, dass es die Höhe automatisch anpasst. Dadurch vermeidest du Skalierungsfehler und das Bild wird nur in der Pixelgröße geändert, ohne dass es am Ausschnitt verändert wird.

Du kannst auch die Bildgrößen anderer Websites überprüfen, indem du das Entwickler-Tool deines Browsers nutzt. Klicke mit der rechten Maustaste auf die Website und wähle „Untersuchen“ aus. Es erscheinen zusätzliche Angaben und meist ganz oben links findest du ein Pfeil-Symbol zum Auswählen von Elementen. Klicke es an und schwebe dann mit der Maus über ein Bild. Es wird ein Infofeld geöffnet, in dem du die Abmessungen des Bildes sehen kannst.

Dateigröße und Komprimierung

Bilder werden in Byte gespeichert, wobei Kilobyte kleiner als Megabyte sind. Als Faustregel solltest du darauf achten, dass große Bilder nicht mehr als 200-250 Kilobyte und kleine Bilder nicht mehr als 50 Kilobyte groß sind. Bevor du die zugeschnittenen Bilder hochlädst, solltest du sie durch ein Komprimierungstool laufen lassen. Mein Favorit ist TinyPNG, aber es gibt auch andere Komprimierungstools wie CompressNow, IloveIMG oder Compress2Go.

Bilder-SEO: Wie man Bilder für Suchmaschinen optimiert

1. Richtiges Benennen des Bildes

Bevor du dein Bild hochlädst, solltest du es umbenennen. Überlege, was das Bild zeigt und ob du ein relevantes Keyword nutzen kannst. Das Bild muss für die Suchmaschinen relevant sein, also zum Thema passen und damit zum auch zum Keyword. Die Benennung sollte das Bild widerspiegeln und nicht einfach nur Keywords ohne Zusammenhang enthalten. Zum Beispiel: „Yogaposition herabschauender Hund“ statt „img12233“ oder „-Dein Name- am Laptop Blog schreiben“ statt „Bild2452“.

Weitere Punkte, die du beachten solltest:

• Dateinamen nicht zu lang
• Worte mit Bindestrich trennen – nicht mit Unterstrichen, damit kommen die Systeme besser zurecht
• Keine Sonderzeichen
• Umlaute am besten ausschreiben, auch wenn WordPress diese beim Upload automatisch ändert

2. Beschrifte dein Bild in der Mediathek

Nachdem du dein Bild umbenannt hast, kannst du es in WordPress hochladen. Du kannst entweder einzelne Bilder oder mehrere gleichzeitig hochladen, aber jedes Bild muss noch richtig beschriftet werden.

• Alternative Texte: Diese werden angezeigt, wenn ein Bild nicht geladen werden kann. Sie werden auch von Screenreadern genutzt, um blinden Menschen zu erklären, was das Bild zeigt. Beschreibe das Bild daher möglichst genau und nutze nur Bilder, die für den Inhalt der Webseite relevant sind – nicht einfach nur, um die Seite mit Keywords vollzustopfen.
  Hier eine Hilfestellung: https://www.w3.org/WAI/tutorials/images/decision-tree/
• Titel: Der Titel wird beim Hochladen automatisch mit dem Dateinamen gefüllt. Er wird auch angezeigt, wenn man mit der Maus über das Bild fährt und dient als Bilder-URL. 
• Beschriftung: Du kannst eine Beschriftung nutzen, um direkt unter dem Bild eine kurze Beschreibung zu zeigen.
• Beschreibung: Während die vorherigen Texte eher kurz gehalten werden sollten, kannst du hier eine ausführlichere Beschreibung des Bildes hinzufügen.

Schritt-für-Schritt-Anleitung zur Bildbearbeitung für suchmaschinenoptimierte WordPress-Websites

1. Schritt: Bestimme den Einsatzort des Bildes auf deiner Website.
   Bevor du mit der Bearbeitung deines Bildes beginnst, solltest du wissen, wo auf deiner Website es eingesetzt werden soll.

2. Schritt: Ändere die Bildgröße (in Pixel – Breite).
   Passe die Größe deines Bildes an die Anforderungen deiner Website an. 

3. Schritt: Wähle das richtige Bildformat (.jpg oder .png).
   Entscheide dich für das passende Format, um die bestmögliche Bildqualität bei der geringstmöglichen Dateigröße zu erreichen.

4. Schritt: Komprimiere das Bild.
   Durch Komprimierung kannst du die Dateigröße deines Bildes verringern, ohne dabei die Qualität zu beeinträchtigen.

5. Schritt: Benenne das Bild aussagekräftig um.
   Verwende einen aussagekräftigen Dateinamen, der das Bild widerspiegelt. Vermeide die Verwendung von irrelevanten Keywords.

6. Schritt: Lade das Bild in die Mediathek hoch und beschrifte es.
   Beschreibe das Bild in der Mediathek, um es suchmaschinenfreundlicher zu gestalten. Nutze dabei den Titel, alternativen Text und die Bildbeschreibung.

7. Schritt: Installiere und richte dir ein Bilder-Plugin ein! 
   Ich habe dir in diesem Beitrag zwei vorgestellt.

---

Für die Überarbeitung bereits existierender Websites gibt es einen etwas aufwendigeren Ablauf:

Schritt 1: Bevor du mit der Bearbeitung deiner Bilder beginnst, erstelle ein Backup deiner Website, um sicherzustellen, dass keine Daten verloren gehen. Ich kann dir Updraft empfehlen.

Schritt 2: Wähle ein passendes Bilder-Plugin aus und richte es ein, um deine bereits hochgeladenen Bilder zu optimieren.

Schritt 3: Überprüfe die Größe aller Bilder auf deiner Website und optimiere sie gegebenenfalls manuell, falls sie über 250 KB groß sind.

Schritt 4-6: Wiederhole die Schritte 2-4 aus der ersten Anleitung für jedes zu optimierende Bild. Passe die Größe, das Format und die Komprimierung an und benenne das Bild aussagekräftig um.

Schritt 7: Verwende das Plugin Enable Media Replace (oder ein anderes Plugin), um das alte Bild durch das neue, optimierte Bild zu ersetzen.

Ich hoffe, dieser Artikel hat dir geholfen, ein besseres Verständnis für die Suchmaschinenoptimierung von Bildern zu bekommen und wie du deine Bilder für deine WordPress-Website optimieren kannst. Wenn du Fragen hast oder Hilfe benötigst, zögere nicht, mich zu kontaktieren.