Bei der Optimierung von Bildern auf deiner Webseite geht es darum, Grafiken im passenden Format, in der richtigen Größe und mit einer geeigneten Auflösung einzubinden und dabei die Dateigröße so gering wie möglich zu halten. Das sind wichtige Voraussetzungen für eine erfolgreiche Suchmaschinenoptimierung (SEO).
Warum ist Bildoptimierung wichtig für SEO?
Es gibt einen Grund, warum man sagt, dass ein Bild mehr als tausend Worte sagt. Wenn deine Website zu lange lädt, wird die Geschichte deiner Marke nie richtig erzählt. Höhere Absprungraten führen zu Konversionsverlusten, und weniger Konversionen bedeuten entgangene Umsätze.
Eine der größten Hürden für die Ladegeschwindigkeit einer Website sind nicht optimal vorbereitete Bilder. Wenn du weißt, wie du mit den Bildern auf deiner Seite umgehst, kannst du die Ladezeiten verkürzen, dein SEO-Ranking verbessern und insgesamt die UX deiner Seite optimieren. Wenn ein potenzieller Kunde deine Seite gern anschaut und Zeit darauf verbringt, ist die Chance deutlich höher, dass er konvertiert. Optimierte Bilder unterstützen ihn auf dem Weg zu der Konversion, die du dir wünschst.
Wähle den richtigen Dateityp
Verschiedene Dateitypen haben unterschiedliche Einsatzzwecke, Stärken und Schwächen. Idealerweise solltest du JPEG für größere, komplexere Bilder und PNG für einfachere Grafiken verwenden. PNGs haben eine höhere Qualität, aber auch eine größere Dateigröße. Das bedeutet, wenn du ausschließlich PNGs nutzt, wirst du zwar eine optisch sehr ansprechende Seite haben, aber sie könnte langsamer laden, als du es dir vorstellst. JPEG bietet dir viele Farben und eine gute Schärfe bei geringerer Dateigröße. Es gibt noch ein paar weitere Punkte zu beachten, wenn du entscheidest, welches Dateiformat du verwenden willst:
- PNG ist das einzige Dateiformat, das die Transparenz des Hintergrunds zuverlässig erhält. Wenn das für dich wichtig ist, solltest du dies bei der Wahl des Dateityps berücksichtigen.
- Wenn du Vektoren für Logos, Icons oder Strichzeichnungen verwendest, ist es sinnvoll, SVGs zu nutzen. Sie sind automatisch skalierbar und werden von Google genauso indiziert wie PNGs und JPEGs, sodass ihre Verwendung keinen Einfluss auf dein SEO-Ranking hat. Zusätzlicher Vorteil: Sie haben kleinere Dateigrößen, was die Ladezeiten verkürzen kann.
- WebP ist eine sehr gute Alternative zu JPEG und PNG, erfordert aber etwas mehr Aufwand in der Umsetzung. Entwickelt und veröffentlicht von Google im Jahr 2010, bietet dieses Dateiformat hochwertige Bilder bei relativ kleinen Dateigrößen. Da Google die am weitesten verbreitete Suchmaschine ist, kann die Nutzung eines Dateiformats, das dort entwickelt wurde, deinem Ranking nur zugutekommen. Ein Nachteil ist, dass es nicht von allen Browsern unterstützt wird, was bedeutet, dass du Fallbacks einrichten musst, damit Nutzer mit nicht unterstützten Browsern deine Grafiken trotzdem sehen können. Zusätzlich kannst du WordPress-Plugins wie Webp Express oder ShortPixel verwenden, um Bilder in WebP zu konvertieren. Siehe unten für Serverkonfigurationen.
Komprimiere deine Bilder
Bildkomprimierung ist, einfach gesagt, ein Verfahren, bei dem du die Daten eines Bildes reduzierst, um die Zeit zu verringern, die für Speicherung oder Übertragung des Bildes benötigt wird. Kurz gesagt: komprimierte Bilder laden schneller, und kürzere Ladezeiten sind immer ein Pluspunkt für B2C- und B2B-Webseiten. Es gibt drei verschiedene Stufen der Kompression:
- Lossy Komprimierung – Verlustbehaftet ist für die meisten Nutzer die beste Option. Bilder, die mit Lossy-Algorithmen verarbeitet werden, sind die kleinsten verfügbaren optimierten Dateien. Wenn die Geschwindigkeit deiner Seite im Vordergrund steht und du die beste Balance zwischen Optimierung und Bildqualität suchst, empfehlen wir dir, bei der Lossy-Optimierung zu bleiben.
- Glossy-Komprimierung – Glossy ist die beste Wahl, wenn du weiterhin auf gute Werte bei Google Insights achtest, aber einen leichten Verlust an Seitengeschwindigkeit als akzeptablen Kompromiss für eine sehr hohe Bildqualität siehst.
- Lossless Komprimierung – Verlustfrei optimierte Bilder sind Pixel für Pixel identisch mit den Originalen, bieten aber eine geringere Größenreduzierung im Vergleich zu Lossy- oder Glossy-verarbeiteten Dateien. Wenn du möchtest, dass deine Bilder unverändert bleiben, ist dies die passende Option für dich. Übersetzt mit www.DeepL.com/Translator (kostenlose Version)
Wenn du dich mit Bildkompression beschäftigst, gibt es ein paar grundlegende Dinge, die du beachten solltest: speichere alle Bilder fürs Web, 72-150 DPI, oder verwende einen Bildoptimierer. Wir empfehlen Tools wie ImageOptim oder Webseiten wie ShortPixel, TinyPNG und JPEGmini, bevor du deine Bilder auf deine Webseite hochlädst.
Für WordPress-Seiten empfehlen wir ShortPixel oder Smush zu verwenden. Noch ein wichtiger Hinweis: Du kannst die Dateigröße dieser Bilder zusätzlich reduzieren, indem du ihre EXIF data entfernst. Die meisten Bildoptimierungstools können das für dich übernehmen, auch wenn du eventuell entsprechende Einstellungen vornehmen musst.
Responsive Bilder verwenden
Ein responsives Bild ist eine Grafik, die sich automatisch an die Größe des Bildschirms anpasst. Diese Flexibilität ist entscheidend für jedes Unternehmen, das seine Website mobilgerätefreundlich gestalten will. Da mehr als die Hälfte des täglichen Webtraffics von mobilen Geräten stammt, ist dies eine ziemlich grundlegende Funktion, die du einplanen solltest.
Hier eine gute Nachricht: Wenn du WordPress verwendest, sind deine Bilder in der Regel bereits responsive. Diese Funktion wurde in Version 4.4 standardmäßig integriert. Bilder sollten das srcset-Attribut haben, das es ermöglicht, je nach Bildschirmbreite unterschiedliche Bildversionen auszuliefern. Hier ist ein Beispiel für ein responsives Bild-Tag:
<img src="really-cute-cat-200.jpg" sizes="50vw"
srcset="really-cute-cat-100.jpg 100w, really-cute-cat-200.jpg 200w,
really-cute-cat-400.jpg 400w, really-cute-cat-800.jpg 800w,
really-cute-cat-1000.jpg 1000w, really-cute-cat-1400.jpg 1400w,
really-cute-cat-1800.jpg 1800w" alt="really-cute-cat">
Erstelle eindeutige Dateinamen für jedes Bild
Wenn du einen Artikel über wirklich süße Katzen schreibst und ein Bild verwendest, das eine wirklich süße Katze zeigt, sollte der Dateiname nicht DSC2544.jpg lauten. Ein sinnvoller Dateiname wäre wirklich-niedliche-katze.jpg, wobei das Hauptmotiv des Fotos (und deines Artikels) im Dateinamen vorkommen sollte.
Einzigartige, beschreibende Dateinamen machen das Organisieren und Wiederfinden von Bildern auf deiner Seite leichter. Das ist zwar nicht unbedingt ein direkter Vorteil für den Endnutzer, aber es vereinfacht deine eigene Arbeit deutlich. Weniger Zeit, die du mit der Suche nach falsch benannten Bilddateien verbringst, bedeutet mehr Zeit für produktive, umsatzorientierte Aufgaben.
Füge SEO-freundliche alt-Tags ein
Der alt tag ist eine notwendige Ergänzung zu allen HTML-Bild-Tags. Google ist zwar sehr leistungsfähig, braucht aber trotzdem deine Unterstützung, um den Wert deiner Website korrekt einzuschätzen. Das Taggen deiner Bilder hilft den Algorithmen, verbessert dein Ranking und erhöht die Wahrscheinlichkeit, dass deine Bilder in der Bildersuche erscheinen.
Alt-Tags sind außerdem nicht nur für SEO relevant. Sie liefern auch wichtige Informationen für Screenreader, die behinderten Nutzern helfen, den Inhalt deiner Webseite vollständig zu erfassen. Hier ist ein Beispiel:
<img src="really-cute-cat.jpg" alt="side-view-of-really-cute-cat">
Lerne über Bilder der nächsten Generation und stelle sie bereit, wenn möglich.
Das empfohlene Bildformat der nächsten Generation ist WebP. WebP wurde von Google entwickelt und nutzt Predictive Coding für eine besonders effiziente verlustfreie und verlustbehaftete Online-Kompression. Es wird nativ in Google Chrome, Firefox, Edge und Opera unterstützt. WebP-Bilder sind in der Regel 25-35% kleiner in der Dateigröße als JPEG und PNGs. Das reduziert die Seitengröße und verbessert die Performance.
Andere Bildformate der nächsten Generation sind JPEG 200 und JPEG XR, obwohl beide keine weit verbreitete Browserunterstützung haben.
Wie bereits erwähnt, kannst du WordPress-Plugins wie Webp Express oder ShortPixel verwenden, um dein bestehendes Bild in WebP zu konvertieren. Danach solltest du dich mit dem Support-Team deines Servers in Verbindung setzen, um sicherzustellen, dass Regeln eingerichtet sind, um WebP-Bilder mit kompatiblen Browsern auszuliefern. Die meisten modernen Browser unterstützen das WebP-Bildformat.
Bilder über ein CDN bereitstellen
Bild-Content-Delivery-Networks (CDNs) eignen sich hervorragend zur Optimierung von Bildern. Sie gehören zu den beliebtesten Maßnahmen zur Verbesserung der Website-Geschwindigkeit. Der Wechsel zu einem Bild-CDN kann 40-80% Einsparungen bringen. Sie helfen außerdem dabei, Bandbreitenkosten zu senken, die Sicherheit durch DDOS-Abwehr zu erhöhen und können dir helfen, Trafficverluste durch Hardwareausfälle zu vermeiden. Viele Hosting-Provider bieten kostenlose CDNs an, also erkundige dich bei deiner Hosting-Lösung, welche Optionen es gibt.
Die Funktionsweise von CDNs ist recht einfach: Sie optimieren deine Bilder und bringen sie so schnell wie möglich zu deinen Nutzern. Das CDN erzeugt neue Versionen der Bilder, wenn sie benötigt werden, und liefert deine Bilder von einer externen URL mit aktiviertem Caching, die sehr schnell lädt, oft noch bevor die Seite vollständig gerendert ist. Der Einsatz eines CDN kann die Auslieferungsgeschwindigkeit von Bildern deutlich erhöhen.
Lade deine Bilder mit Verzögerung
Wenn jemand eine Webseite öffnet, wird normalerweise der gesamte Inhalt der Seite sofort heruntergeladen und auf einmal gerendert. Das macht das Zwischenspeichern von Seiten einfach, kann aber auch zu längeren Ladezeiten und verschwendeter Bandbreite führen. Genau hier setzt Lazy Loading an.
Das verzögerte Laden von Below-the-Fold-Bildern (vor allem von größeren) kann die Performance deutlich verbessern. Die lazy loading technique ermöglicht es der Seite, den Ladevorgang abzuschließen, obwohl viele Off-Screen-Bilder erst dann geladen werden, wenn ein Besucher nach unten scrollt. Es werden nur die Inhalte geladen, die der Nutzer tatsächlich sieht, was Ressourcen spart und die UX deiner Seite verbessert.
Beliebte Tools zur Bildoptimierung
- Imageoptim (mac only app)
- ShortPixel (website)
- TinyPNG (website)
- JPEGmini (website)
- ShortPixel (WordPress plugin)
- WebP Express (WordPress plugin)
- Smush (WordPress plugin)
Zusammenfassung und Checkliste für eine schnellere Website
Richte deine Website/Server für den Erfolg ein
- Füge CDN zu deiner Website hinzu
- Serve Bilder der nächsten Generation
- Lazy Load deiner Bilder
- Richte deine Website/Bilder für den Erfolg ein
Wähle den richtigen Dateityp
- Komprimiere Bilder
- Verwende responsive Bilder
- Benutzerdefinierter Dateiname
- SEO-freundliche Alt-Tags einfügen
Die Optimierung der Bilder auf deiner Webseite mag anfangs wie eine große Aufgabe wirken, aber sobald du die wichtigsten Best Practices etabliert hast, wirst du den zusätzlichen Traffic, die Konversionen und die besseren organischen Rankings zu schätzen wissen. Wenn du Unterstützung brauchst, um ein Projekt wie die Strukturierung und Optimierung von Bildern auf deiner Webseite anzugehen, kontaktiere das Team von Windmill Strategy.
