Was wäre eine Website ohne Bilder? Mit hochwertigen Bildern kannst du überzeugen, Emotionen wecken und Informationen schnell vermitteln. Sie dienen der Ergänzung deiner Texte und lockern dein Design auf. Wenn du deine Bilder auch noch richtig optimierst, kannst du deine Website nutzerfreundlicher gestalten und wertvolle Punkte für die Suchmaschinenoptimierung sammeln.
Warum solltest du deine Bilder optimieren?
1. Für die Google-Suche
Neben der Textsuche wird in Google auch gerne die Bilder-Suche genutzt. Google erkennt mit seinen Filtern mittlerweile schon sehr gut Bildmotive. Sobald es aber um Details geht, braucht auch die Suchmaschine Unterstützung.
Damit Google weiß, um was es auf dem Bild genau geht, sollten die Informationen dazu sauber gepflegt werden.
Denn mit der richtigen Bild-Pflege lieferst du mehr indexierbare Inhalte und kannst dich suchmaschinentechnisch besser platzieren.
2. Für die Nutzerfreundlichkeit
Kann ein Bild deiner Website aus irgendeinem Grund nicht richtig dargestellt werden, wird der Alternativ-Text statt des Bildes geladen. Vorausgesetzt, das dieser zuvor eingepflegt wurde.
Dies dient der Nutzerfreundlichkeit. Der Besucher erhält also auch ohne Bild eine Information und wird nicht allein gelassen.
3. Für die Barrierefreiheit
Für blinde oder sehgeschädigte Webseiten-Besucher ist es enorm wichtig, dass Bilder ausreichende und detaillierte Informationen liefern. Diese Besucher lassen sich den Website-Inhalt von sogenannten Screen-Readern vorlesen.
Bei Bildern liest der Screen-Reader den eingepflegten Alternativ-Text vor. Wenn du dies berücksichtigst, beachtest du einen wichtigen Punkt der Barrierefreiheit.
4. Für die Einzigartigkeit
„Duplicate Content“ (doppelter Inhalt) wird von Suchmaschinen nicht gerne gesehen und sollte vermieden werden. Damit du keinen Duplicate Content im Bildbereich produzierst, solltest du besser eigene Bilder verwenden. Oft hat man die aber nicht zur Verfügung und muss daher auf kostenlose oder gekaufte Bilder von diversen Plattformen zurückgreifen.
Diese Bilder werden aber leider auch von vielen anderen verwendet. Und das erkennt auch Google. Es macht also Sinn, diese Bilder graphisch zu verändern (sofern erlaubt) und sie somit einzigartig zu machen.
5. Für die Performance
Viele Bilder in großen Dateigrößen können eine Website überladen und verlangsamen. Daher macht es Sinn, auf die Dateigröße und das richtige Format zu achten.
Was kannst du tun, um deine Bilder zu optimieren?
1. Verwende das richtige Dateiformat
Deine Bilder lädst du am besten im jpg-Format hoch.
Neue Bildformate wie WebP oder AVIF sind eine tolle Alternative zu jpg, weil sie im Vergleich sehr klein sind. Leider haben manche Browser wie Safari noch Darstellungsprobleme. Helfen kannst du dir hier mit speziellen Plugins wie Konverter für Medien, die das entsprechende Format ausliefern.
Für Grafiken, Logos, Illustrationen und Bildern mit Transparenzen kannst du das png-Format verwenden.
2. Lade das Bild in der richtigen Dateigröße hoch
Neben dem Dateiformat spielt auch die Dateigröße eine sehr wichtige Rolle. Deine Bilder sollten nicht zu groß sein, um die Ladezeit deiner Website nicht unnötig zu verlangsamen. Eine Größe von max. 200KB wäre ideal.
Am besten, du bringst deine Bilder vor dem Hochladen mit einem Bildbearbeitungsprogramm schon auf die richtige Größe. Viele Themes geben auch schon vor, welches Format Bilder für bestimmte Bereiche, wie zum Beispiel Blogbeiträge, haben sollten.
Solltest du kein Bildbearbeitungsprogramm haben, kannst du Online-Tools wie picresize oder TinyPNG verwenden. Dort lädst du dein Bild hoch, schneidest es auf die gewünschten Maße zu und speicherst es anschließend in der richtigen Größe ab.
Du kannst auch ein WordPress-Plugin verwenden, dass die Bilder automatisch beim Upload auf deine Website komprimiert:
Hier einige Beispiele:
– Smush
– Imsanity
– EWWW Image Optimizer
– ShortPixel Image Optimizer
– Compress JPEG & PNG images
3. Pflege die Bild-Meta-Angaben
Sobald du ein Bild hochgeladen hast, kannst du es über die Listen- oder Galerieansicht der WordPress-Mediathek bearbeiten.
Wenn du mit dem Gutenberg-Editor arbeitest, kannst du beim Einfügen eines Bildblocks alle diese Metadaten auch rechts im Blockbereich bearbeiten.
Hier siehst du das Fenster Anhang-Details beim Klick auf ein Bild in der Galerieansicht.
Beispiel: „Photo by Jordan Cormack on Unsplash„
Punkt 1: URL
Beim Hochladen eines Bildes wird in WordPress automatisch eine Anhangseite für das Bild erstellt und somit eine eigene URL für das Bild vergeben.
Diese URL basiert auf dem Dateinamen und kann nachträglich nicht mehr geändert werden. Umso wichtiger ist es, dass die Bilddatei schon vor dem Upload einen sinnvollen und aussagekräftigen Namen bekommt.
Der Dateiname sollte den Inhalt des Bildes so gut wie möglich beschreiben und am besten schon ein relevantes Keyword enthalten.
Mehrere Wörter solltest du mit Bindestrichen verbinden. Umlaute und Sonderzeichen solltest du ganz vermeiden.
Beispiel hier: Sonnenblumenfeld.jpg
Punkt 2: Alternativer Text
Der Alternativ-Text (auch Alt-Text oder Alt-Attribut genannt) ist das wichtigste Feld in der Bildoptimierung. Wie schon erwähnt, steht hier der Text, den Suchmaschinen zur Indexierung auslesen.
Kann ein Bild nicht richtig dargestellt werden, wird an dessen Stelle dieser Text geladen. Blinden und sehgeschädigten Menschen wird dieser Text per Screen-Reader vorgelesen.
Umso wichtiger ist es, dass du hier den Inhalt des Bildes und seine Aussage in wenigen Worten und so gut wie möglich beschreibst. Der Alt-Text sollte auch wieder, wenn möglich, dein Keyword enthalten.
Bei Hintergrundbildern oder Bildern, die nur dem Design dienen, solltest du den Alt-Text weglassen. Dieser wird dann von Screen-Readern ignoriert und verwirrt nicht unnötig.
Beispiel: „Dieses Foto zeigt ein Sonnenblumenfeld.“
Punkt 3: Titel (Title-Tag)
Der Titel basiert auf dem Namen der hochgeladenen Bilddatei und wird automatisch erzeugt. Er kann aber neu vergeben werden und sollte kurz und bündig beschreiben, um was es auf dem Bild geht.
Er wird, je nach Browser, als tooltip (kleines Infofenster) angezeigt, wenn man mit der Maus über das Bild fährt. Da vermehrt über Tablet und Handy gesurft wird, wo dieses tooltip nicht angezeigt wird, sollte man sich nicht allein auf die Pflege dieses Feldes verlassen.
Für die Suchmaschinenoptimierung hat der Titel keine große Bedeutung. Du kannst ihn aber nutzen, um dein Keyword nochmal zu platzieren.
Beispiel: „Feld voller Sonnenblumen“
Punkt 4: Beschriftung
Der Text im Feld Beschriftung erscheint direkt unter dem Bild als Bildunterschrift.
Du kannst ihn beispielsweise für Copyright-Hinweise nutzen oder deinen Website-Besuchern auf diese Weise schnell und einfach Informationen zum Bild liefern. Denn gerade diese Bildunterschriften fallen beim Scannen der Seite schnell ins Auge.
Möchtest du keine Bildunterschrift, lässt du dieses Feld einfach frei.
Beispiel: „Feld mit gelben Sonnenblumen“
Punkt 5: Beschreibung
Im Feld Beschreibung kannst du das Bild mit zusätzlichem Text und auch HTML-Befehlen ergänzen. Du kannst hier eine ausführliche Beschreibung deines Bildes angeben oder auch Adressen und Links einpflegen. Dieser Text wird dann auf der Bildanhangseite und im Quellcode ausgegeben.
Damit du die HTML-Befehle siehst, musst du in den Anhang-Details unten auf „Weitere Details bearbeiten“ klicken.
Anschauen kannst du dir die Anhangseite über den Link „Anhang-Seite anschauen“.
Fazit:
Wenn du diese Punkte beim Hochladen deiner Bilder gleich berücksichtigst, hast du schon viel für die Suchmaschinenoptimierung deiner Website getan.
Liebe Regina, vielen Dank für die wirklich sehr guten und hilfreichen Tipps!