Was ist Bilder-SEO? 8 Tipps für deine Webseite (2024)

Mit den richtigen Stellschrauben kann auch über Bilder Traffic generiert werden. In diesem Beitrag zeigen wir dir, wie Bildoptimierung funktioniert und was dabei zu beachten ist.

 

In einer Welt, in der Kund:innen eine sofortige Zufriedenstellung erwarten, ist eine E-Commerce-Website, die schnell lädt, von größter Bedeutung. Ansprechende Bilder können dabei die Ladezeiten und die Konversionsraten verbessern.

Während die Bildqualität wichtig ist, um hohe Konversionsraten zu gewährleisten, ist Bilder-SEO der Schlüssel für die Benutzerfreundlichkeit und die Suchmaschinenoptimierung deines Onlineshops. Wenn du lernst, wie man Bilder optimiert, kann das große Vorteile bringen – von der Aufwertung deiner Marke bis hin zur Anziehung von Kundschaft, die Google-Bilder durchsuchen.

Welches Ziel verfolgt man mit Bilder-SEO?

Das Hauptziel von Bilder-SEO ist es, sicherzustellen, dass Bilder auf einer Website in den Suchergebnissen angezeigt werden, wenn Benutzer:innen nach relevanten Begriffen suchen.

Was ist Bilder-SEO?

Bilder-SEO, auch als Bildoptimierung für Suchmaschinen oder Image SEO (Search Engine Optimization) bezeichnet, bezieht sich auf die Optimierung von Bildern auf einer Website, um deren Sichtbarkeit in den Suchmaschinenergebnissen zu verbessern.

Bei Bilder-SEO, was auch als Bildoptimierung für Suchmaschinen oder Image SEO (Search Engine Optimization) bezeichnet werden kann, geht es darum, dass deine Bilder auf dem Desktop und auf dem Handy einwandfrei aussehen und die Webleistung nicht beeinträchtigen. Dazu gehört die Anpassung des Bildformats, der -dimensionen und der -auflösung auf einem bestimmten Gerät, während die Qualität erhalten bleibt.

Dabei spielen drei Hauptelemente eine Rolle:

• Format der Bilddatei
• Bildabmessungen (Höhe und Breite)
• Bildschirmauflösung

Warum sollte man Bilder optimieren?

Bilder sind wichtig für ein gutes Online-Einkaufserlebnis. Kund:innen werden deine Produkte nicht kaufen, wenn sie sie nicht sehen können. Daten aus dem HTTP-Archiv zeigen, dass nicht optimierte Bilder im Durchschnitt etwas weniger als 38 % des Gesamtgewichts einer Webseite auf mobilen Geräten ausmachen.

Bilder-SEO trägt dazu bei, das Gewicht deiner Website zu verringern, und ist ein zentraler Grundsatz guten Webdesigns für den elektronischen Handel, was zu folgenden Vorteilen führt:

Lesetipp: Sorge mit unserer ultimativen SEO-Checkliste für eine bessere SEO-Optimierung.

Ausgewogene Geschwindigkeit und Qualität

Bei der Bildoptimierung für Web- und Mobilgeräte geht es um ein Gleichgewicht zwischen Geschwindigkeit und Qualität. Gut aussehende Bilder sind für den E-Commerce wichtig. Sie bieten den Käufer:innen ein besseres Surferlebnis.

Google hat angedeutet, dass die Geschwindigkeit einer Website eines der Signale ist, die sein Algorithmus zur Bewertung von Seiten verwendet. Eine langsame Seite bedeutet, dass die Suchmaschinen mit ihrem Crawl-Budget weniger Seiten crawlen, was sich negativ auf deine Indexierung auswirken kann.

Verbesserte Suchleistung

Optimierte Bilder helfen sowohl Lesenden als auch Suchmaschinen, deine Website besser zu verstehen und deine Inhalte online sichtbar zu machen. Jüngste Daten zeigen, dass Bilder bei 18 % der Suchanfragen bei Google angezeigt werden. Die Bildoptimierung kann dazu beitragen, dass deine Bilder in der Google-Bildersuche besser platziert werden, was mehr Besucher:innen auf deine Website bringt und deine Marke stärkt.

Lesetipp : Finde hier kostenlose Apps, Webseiten und Photoshop-Anleitungen zur Bildbearbeitung.

Wie man Bilder für das Web optimiert

1. Verwende prägnante und direkte Bildnamen

Es ist wirklich einfach, Bilder auf deine Website hochzuladen und die Standard-Dateinamen zu verwenden, die deine Kamera vergibt. Aber wenn es um die Suchmaschinenoptimierung von Bildern geht, ist es wichtig, relevante Schlüsselwörter zu verwenden, damit deine Webseite in den Suchmaschinen besser gefunden wird.

Die Erstellung von beschreibenden, schlüsselwortreichen Dateinamen ist für Bilder-SEO entscheidend. Suchmaschinen durchsuchen nicht nur den Text auf deiner Webseite, sondern auch die Dateinamen der Bilder.

Nimm zum Beispiel dieses Bild:

Du kannst den generischen Namen verwenden, den deine Kamera dem Bild zugewiesen hat (z. B. DCMIMAGE10.jpg). Es wäre jedoch viel besser, die Datei 2012-Ford-Mustang-LX-Rot.jpg zu nennen.

Überlege, wie deine Kund:innen auf deiner Website nach Produkten suchen. Welche Benennungsmuster verwenden sie bei ihrer Suche? Im obigen Beispiel suchen Autokäufer:innen vielleicht nach Begriffen wie:

• 2012 Roter Ford Mustang LX
• Ford Mustang LX Rot 2012
• Roter Ford Mustang LX 2012

Schaue die Website-Analysen an, um zu sehen, welche Schlüsselwörter deine Kund:innen verwenden, um dich zu finden. Ermittle die häufigsten Benennungsmuster, die sie verwenden, und wende diese Formel auf deinen Prozess zur Benennung von Bilddateien an.

Wenn du dich nicht an den Daten orientieren willst, solltest du bei der Benennung deiner Bilder relevante, hilfreiche Schlüsselwörter verwenden (d. h. versuchen, beschreibend zu sein).

2. Optimiere die Alt-Attribute sorgfältig

Alt-Attribute sind die Textalternative zu Bildern, wenn ein Browser sie nicht richtig darstellen kann. Sie werden auch für die Barrierefreiheit im Web verwendet. Selbst wenn das Bild gerendert wird, siehst du den Text des Alt-Attributs, wenn du mit dem Mauszeiger darüber fährst (je nach den Einstellungen Ihres Browsers).

Das Alt-Attribut ist auch für die Suchmaschinenoptimierung deiner Website von Bedeutung. Das Hinzufügen geeigneter Alt-Attribute, die relevante Schlüsselwörter zu den Bildern auf deiner Website enthalten, kann dir helfen, in Suchmaschinen besser zu ranken. Möglicherweise sind Alt-Attribute der beste Weg für deine E-Commerce-Produkte, um in der Google-Bilder- und Websuche aufzutauchen.

Werfen wir einen Blick auf den Quellcode eines Alt-Attributs: 

<img src="2012-Ford-Mustang-LX-Rot.jpg" alt="2012 Ford Mustang LX Rot">

Die oberste Priorität bei der Bildoptimierung besteht darin, das Alt-Attribut für jedes Produktbild auf deiner Website auszufüllen.

Hier sind einige einfache Regeln für Alt-Attribute:

• Beschreibe Bilder in einfacher Sprache, genau wie bei den Dateinamen deiner Bilder
• Wenn du Produkte verkaufst, die Modell- oder Seriennummern haben, verwende diese in deinen Alt-Attributen
• Stopfe Alt-Attribute nicht mit Schlüsselwörtern voll
• Verwende keine Alt-Attribute für dekorative Bilder. Suchmaschinen können dich für übermäßige Optimierung bestrafen.

Und schließlich solltest du von Zeit zu Zeit deine Website auf ihre Richtigkeit überprüfen. Sieh dir den Quellcode deiner Webseiten an und prüfe, ob Alt-Attribute vorhanden und noch relevant sind. Du wirst überrascht sein, was alles übersehen wird, wenn du mit der Geschwindigkeit des Unternehmertums unterwegs sein möchtest.

3. Wähle deine Bildabmessungen und Produktwinkel mit Bedacht

Es ist gängige Praxis, mehrere Blickwinkel auf Produkte zu zeigen. Um auf das Beispiel des Ford Mustang zurückzukommen: Du würdest nicht nur eine Aufnahme des Autos zeigen wollen, vor allem, wenn du versuchst, es zu verkaufen. Es wäre in deinem besten Interesse, Aufnahmen von folgenden Punkten zu zeigen:

• Dem Innenraum
• Das Heck (insbesondere der Luftspoiler)
• Die Felgen
• Der Motor (es ist ja schließlich ein Mustang)

Der beste Weg, aus diesen zusätzlichen Fotos Kapital zu schlagen, besteht darin, die Alt-Attribute auszufüllen. Das geht am besten, indem du für jedes Produktfoto ein eigenes Alt-Attribut erstellst:

• 2012-Ford-Mustang-LX-Rote-Leder-Innenausstattung.jpg -> mit dem Alt-Attribut von: alt="2012 Ford Mustang LX Rote Leder-Innenausstattung"
• 2012-Ford-Mustang-LX-Roter-Rückansicht-Luftspoiler.jpg -> unter Verwendung des Alt-Attributs von: alt="2012 Ford Mustang LX Roter Rückansicht-Luftspoiler "

Das Wichtigste dabei ist, dass du deinen Alt-Attributen Beschreibungen hinzufügst,  damit potenzielle Suchende auf deiner Website landen. Wenn du dir die zusätzliche Arbeit machst, wird Google dich mit Suchenden belohnen.

Lesetipp: Erfahre hier, was eine Meta-Description ist und wie du Meta-Beschreibungen verfasst.

4. Ändere die Größe deiner Bilder

Du solltest die Bilder auf deiner Website so bearbeiten, dass sie auf allen Geräten gut aussehen, insbesondere auf mobilen und hochauflösenden Bildschirmen.

Für Displays mit höherer Pixeldichte, die mehr Pixel auf demselben Platz unterbringen wie herkömmliche Bildschirme, benötigst du mindestens ein 2-faches Bild, damit die Bilder gestochen scharf und nicht körnig aussehen. Zum Vergleich: Wenn deine Website einen Bildplatz mit einer Größe von 200 x 200 Pixeln hat, benötigst du ein Bild mit einer Größe von 400 x 400 Pixeln, um die Schärfe auf einem hochauflösenden Display zu erhalten. Fast alle Mobiltelefone haben heute eine Bildschirmauflösung von 2x oder höher.

Der einfachste Weg, dies zu erreichen, ist die Verwendung eines Content Delivery Network (CDN). Ein CDN nimmt den Nutzer:innen die Arbeit ab, die Größe der Bilder zu ändern und das beste Bildformat für ihr Gerät zu wählen. Es verbessert auch die Ladegeschwindigkeit der Bilddatei selbst, da die Server näher an den Endnutzer:innen stehen.

Hinweis: Wenn du ein Shopify-Händler oder -Händlerin bist, verwendet dein Shopify-Theme unser Bild-CDN. Neugierig, wie es funktioniert? Lade dein eigenes Bild hoch und teste das CDN von Shopify. Wenn du ein Theme-Entwickler oder eine Entwicklerin bist, lerne, wie man responsiven Bildcode in Liquid schreibt.

Lesetipp: Erfahre hier alles über die Verwendung von Rich-Image- und Textdaten zur Produktkategorisierung.

5. Wählen Sie das richtige Bildformat

Das Bildformat ist eines der wichtigsten Dinge, die du auf deiner Website richtig machen musst. Einige Dateiformate sind von höherer Qualität als andere. Einige nehmen mehr Platz ein als andere, was sich auf die Ladezeit deiner Website auswirkt.

Zunächst einmal gibt es zwei Haupttypen von Bildformaten: Raster- und Vektorbilder.

Vektorbilder beruhen auf mathematischen Formeln. Wenn du Grafiken benötigst, die sich ohne Qualitätseinbußen auf verschiedene Größen skalieren lassen, solltest du Vektorgrafiken verwenden. Das gebräuchlichste Vektorbild ist die SVG-Datei (Scalable Vector Graphics). Sie ist die ideale Wahl für Logos, Symbole und andere einfache Grafiken, bei denen du unabhängig von der Skalierung Klarheit und Schärfe benötigst.

Rasterbilder bestehen aus Pixeln, die sehr detaillierte Bilder, wie z. B. Fotos, bilden können. Je mehr Pixel ein Bild enthält, desto größer und höher ist die Auflösung.

Im Laufe der Zeit wurden neuere und bessere Codecs für Rasterbilder entwickelt. GIF war zum Beispiel eine frühe Version eines Bildcodecs für das Internet, aber die Qualität war schlecht, weil die Komprimierungstechnik einen Mittelwert über nahe gelegene Pixel bildete. Neuere Techniken versuchen, Bilder so zu kodieren und zu komprimieren, dass sie für das menschliche Auge schwerer zu erkennen sind. Das bedeutet, dass wir bei Verwendung neuerer Bildformate Bilder mit höherer Qualität und geringerer Dateigröße bereitstellen können. Die folgenden Formate werden heute im Internet am häufigsten verwendet:

• JPG: Ein weit verbreitetes Bildformat für Fotos. Es verwendet eine verlustbehaftete Komprimierung, um die Dateigröße zu verringern, büßt dabei aber etwas an Qualität ein.
• PNG: Ein beliebtes Format für Web-Designer:innen, da es Grafiken mit transparentem Hintergrund verarbeiten kann. Der Dateityp behält alle Originaldaten bei, wenn er komprimiert wird, was ihn für Grafiken und Diagramme auf einer Website geeignet macht.
• WEBP: Ein modernes Format, das für das Web entwickelt wurde. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung und bietet kleinere Dateigrößen als JPG und PNG, während es eine ähnliche oder bessere Qualität beibehält.
• AVIF: Das neueste Bildformat, AVIF, komprimiert Bilder gut und mit weniger Qualitätseinbußen.

Nicht alle Browser unterstützen alle Versionen. Auch hier kann ein Bild-CDN nützlich sein, denn es kann automatisch das beste Format für einen bestimmten Browser auswählen und Ihr Originalbild konvertieren. Wenn Sie kein CDN mit dieser Fähigkeit verwenden, müssen Sie den <picture>-Tag in Ihrem HTML verwenden.

Hinweis: Das CDN von Shopify erkennt automatisch, welche Dateiformate von einem Browser unterstützt werden, und sendet die beste Option. Zum Beispiel kann es Bilder in WebP oder AVIF konvertieren, wenn diese unterstützt werden, und PNG- oder JPEG-Bilder als Fallback für ältere Browser senden.

Lesetipp: Erhalte hilfreiche Informationen zu SEO im E-commerce.

6. Verwende Bild-Sitemaps

Wenn deine Website Javascript-Galerien, Bild-Pop-ups oder andere „auffällige" Methoden verwendet, um das allgemeine Einkaufserlebnis zu verbessern, helfen Bild-Sitemaps dabei, dass deine Bilder von Google wahrgenommen werden.

Web-Crawler können keine Bilder crawlen, die nicht ausdrücklich im Quellcode der Website aufgeführt sind. Um die Crawler also über nicht identifizierte Bilder zu informieren, musst du deren Position in einer Bild-Sitemap auflisten.

Du kannst die folgende Zeile, die den Pfad zu deiner Sitemap enthält, in deine robots.txt-Datei einfügen:

Sitemap: http://example.com/sitemap_location.xml

Oder du übermittelst die Sitemap über die Suchkonsole an Google. Google hat viele Richtlinien für die Veröffentlichung von Bildern, die deiner Website zu einer besseren Platzierung in den SERPs verhelfen können. Außerdem kannst du die Google-Sitemaps verwenden, um Google mehr Informationen über die Bilder auf deiner Website zu geben, was Google helfen kann, mehr deiner Bilder zu finden.

Als Shopify-Händler:in erhältst du eine automatisch generierte Sitemap, die deine Produktbilder enthält. Das bedeutet, dass die Bilder auf deinen Produktseiten und alle anderen wichtigen Bilder, die du in deinem Blog oder deinen Kollektionen verwendest, für Suchmaschinen über deine Sitemap auffindbar sind. Dadurch steigen die Chancen, dass deine Bilder in den Suchergebnissen erscheinen und mehr Besucher auf deine Website gelangen.

Shopify aktualisiert die Sitemap automatisch, wenn neue Seiten oder Produkte hinzugefügt oder bestehende entfernt werden. Du musst deine Sitemap also nie manuell erstellen oder aktualisieren.

7. Verwende ein gutes Bild-Content-Delivery-Network (CDN)

Spezialisierte Bild-CDNs bieten Funktionen zur Bildumwandlung, so dass du nur ein einziges hochwertiges Bild hochladen musst, das bei jeder Anfrage in der Größe angepasst, neu formatiert und zwischengespeichert wird.

Mit dem Bild-CDN von Shopify wird die Dateigröße automatisch optimiert, wenn du dein Bild hochlädst. Die Änderung der Dateiqualität ist für das menschliche Auge nicht wahrnehmbar, verbessert aber die Ladezeit der Seite. Das CDN erkennt außerdem automatisch, welche Dateiformate auf der Client-Seite unterstützt werden, und bietet eine dynamische Bearbeitung, mit der du dein Bild zuschneiden und umwandeln kannst, ohne die Originaldatei zu verlieren.

Shopify-Händler:innen erhalten Zugang zu einem professionellen Serviceteam, das hilft, die Geschwindigkeit der Website sowie die Konversionsrate und die Suchmaschinenoptimierung zu verbessern.

Lesetipp: Diese SEO-Fehler kosten Onlinehändler viel Geld und bringen kaum Erträge

8. Teste deine Bilder

Bei der Optimierung von Bildern geht es vor allem darum, dein Endergebnis zu verbessern. Wir haben über die Verringerung der Dateigrößen und die Indizierung deiner Bilder durch die Suchmaschinen gesprochen, aber wie wäre es, Bilder zu testen, um zu sehen, welche Bilder mehr Kund:innen anziehen?

Teste die Anzahl der Produktbilder pro Seite. Da die Ladezeiten bei einigen nicht gehosteten E-Commerce-Websites ein Problem darstellen, kannst du feststellen, dass eine Verringerung der Anzahl der Bilder auf einer Seite die Klickraten und den Umsatz erhöht. Es ist auch möglich, dass eine große Anzahl von Bildern pro Seite das Benutzererlebnis verbessert und zu mehr Verkäufen führt. Die einzige Möglichkeit, dies herauszufinden, ist, es zu testen.

Teste, welche Blickwinkel deine Kund:innen bevorzugen. Wenn du die Ansichten anbietest, die deine Kund:innen sehen wollen, kannst du die Kundenloyalität erhöhen. Eine gute Möglichkeit, dies herauszufinden, besteht darin, die Kund:innen zu befragen, was ihnen beim Betrachten der Produktaufnahmen am besten gefallen hat. Umfragen und Gespräche mit deinen Kund:innen sind eine gute Möglichkeit, sich das anzugewöhnen. Überprüfe dennoch durch Tests.

Teste, wie viele Produkte du auf Kategorieseiten auflisten solltest. Sind es 10, 20 oder 100 Produkte? Teste die Anzahl der Produkte, die du auf Kategorieseiten auflistest, um herauszufinden, was für deine Kund:innen am besten funktioniert.

Tools zur Bildoptimierung

Da du nun einige bewährte Verfahren zur Bildoptimierung kennst, wollen wir uns nun einige Tools und Plug-ins zur Bildoptimierung ansehen, die du für deine Website verwenden kannst.

Beachte, dass du diese Tools nicht verwenden musst, wenn du Shopify nutzt oder ein spezielles Bild-CDN verwendest. Die einzige Ausnahme ist SVGOMG – die meisten Bild-CDNs bieten keine Optimierungen für SVGs.

Sqooosh

Squoosh ist eine benutzerfreundliche webbasierte Anwendung zur Bildkomprimierung. Ziehe dein Bild einfach per Drag & Drop in das Tool und wähle aus optimierten Bildformaten wie JPEG XL, WEBP, PNG und mehr.

TinyPNG

TinyPNG ist ein weiteres beliebtes Bildoptimierungstool im Internet. Es verwendet intelligente verlustbehaftete Komprimierungstechniken, um die Dateigröße von Webseiten (WEBP), JPEG- und PNG-Dateien zu reduzieren.

Du kannst Bilder für deine Anwendungen oder deinen Shop verkleinern und animierte Bilder verkleinern. TinyPNG konzentriert sich nicht nur auf die Bildkomprimierung, sondern bietet auch API-Integration und Entwickler-Tools zur Integration von TinyPNG in kundenspezifische Softwarelösungen.

Die API von TinyPNG passt die Größe von Bildern für Miniaturansichten automatisch an, entfernt alle unnötigen Teile und fügt mehr Hintergrund hinzu. Wenn du deine Website mit WordPress betreibst, ist es als Plug-in verfügbar.

SVGOMG

SVGOMG ist ein weiteres einfaches Werkzeug zur Bildoptimierung. Es bietet mehrere Optionen zum Bereinigen und Verkleinern deiner SVG-Dateien. Lade einfach die Quelle deiner SVG hoch oder kopiere sie, um zu beginnen. Du kannst mit den verschiedenen Steuerelementen spielen und ein identisches Bild erstellen, das jedoch weniger Gewicht hat als das Original.

Funktionale Fotos mit Bildoptimierung

Die Optimierung deiner Bilder ist für ein erfolgreiches Onlinegeschäft unerlässlich. Sie wertet nicht nur das Aussehen deiner Produkte auf, sondern trägt auch zu einem reibungslosen Einkaufserlebnis bei und sorgt dafür, dass du online gefunden wirst.

Eine E-Commerce-Plattform wie Shopify stellt deine Bilder automatisch im bestmöglichen Format für die Betrachter:innen bereit, damit du deinen Umsatz steigern und Online-Geschäft ausbauen kannst.

Dieser Beitrag erschien ursprünglich im Shopify.com-Blog und wurde übersetzt.

Häufig gestellte Fragen zum Thema Bilder-SEO

Wie kann ich ein Bild ohne Qualitätsverlust optimieren?

Der beste Weg, ein Bild ohne Qualitätsverlust zu optimieren, besteht darin, die richtige Bildgröße und das richtige Bildformat für eine bestimmte Situation zu verwenden. Du kannst manuelle Tools wie die in diesem Artikel aufgeführten verwenden oder ein spezialisiertes Bild-CDN wie bei Shopify verwenden, um Bilder automatisch zu konvertieren.

Welches ist der beste Bildoptimierer?

Squoosh und TinyPNG sind einige der besten verfügbaren Bildoptimierungs-Tools. Beide sind webbasierte Tools, die eine Reihe von Formatoptionen wie JPG- und PNG-Bilder anbieten. Wenn du ein komplexeres SVG haben, kannst du es mit SVGOMG verkleinern.

Muss ich meine Bilder auf Shopify optimieren?

Du musst Bilder nicht optimieren, bevor du sie hochlädst. Das CDN von Shopify komprimiert Bilder automatisch mit einer Qualitätseinstellung, die für den E-Commerce besser geeignet ist. Der Code deines Themes sollte mit Liquid image_url und image_tag geschrieben werden, um automatisch die Vorteile vieler responsiver Bildfunktionen zu nutzen.