Bei der Optimierung von Bildern auf deiner Webseite geht es darum, Grafiken im richtigen Format, in der richtigen Dimension und in der richtigen Auflösung darzustellen und dabei die Dateigröße so klein wie möglich zu halten. Dieses 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 zum Laden braucht, wird die Geschichte deiner Marke nie erzählt. Schließlich bedeuten höhere Absprungraten Konversionsverluste und Konversionsverluste bedeuten verpasste Einnahmen.
Eine der größten Hürden für die Ladegeschwindigkeit einer Website sind falsch optimierte Bilder. Wenn du weißt, wie du mit den Bildern auf deiner Seite umgehst, kannst du die Ladegeschwindigkeiten verbessern, das SEO-Ranking erhöhen und insgesamt die UX deiner Seite verbessern. Wenn ein potenzieller Kunde es genießt, deine Seite zu betrachten und Zeit auf ihr zu verbringen, ist die Wahrscheinlichkeit höher, dass er konvertiert. Optimierte Bilder helfen ihnen auf ihrem Weg zur Konversion, die du anstrebst.
Wähle den richtigen Dateityp
Verschiedene Dateitypen haben unterschiedliche Funktionen, Stärken und Schwächen. Idealerweise solltest du JPEG für größere, komplexe Bilder und PNG für einfachere Bilder verwenden. PNGs haben eine höhere Qualität, aber auch eine größere Dateigröße. Das bedeutet, wenn du nur PNGs verwendest, wirst du eine schöne Seite haben, aber sie könnte nicht so schnell laden, wie du es gerne hättest. JPEG bietet dir Farbe und Klarheit bei einer geringeren Dateigröße. Es gibt noch ein paar andere Dinge zu beachten, wenn du entscheidest, welches Dateiformat du verwenden willst:
- PNG ist das einzige Dateiformat, das die Transparenz des Hintergrunds problemlos bewahrt. Wenn dies eine Priorität ist, solltest du dies bei der Wahl des Dateityps berücksichtigen.
- Wenn du Vektoren für Logos, Icons oder Strichzeichnungen verwendest, ist es eine gute Idee, SVGs zu verwenden. Sie sind automatisch skalierbar und werden von Google genauso indiziert wie PNGs und JPEGs, so dass ihre Verwendung keinen Einfluss auf dein SEO-Ranking hat. Zusätzlicher Bonus: Sie haben kleinere Dateigrößen, was die Ladezeiten verbessern kann.
- WebP ist eine exzellente Alternative zu JPEG und PNG, aber es erfordert etwas mehr Aufwand, um es zu nutzen. Entwickelt und freigegeben von Google im Jahr 2010, bietet dieses Dateiformat qualitativ hochwertige Bilder mit relativ kleinen Dateigrößen. Da Google die am weitesten verbreitete Suchmaschine ist, kann die Verwendung eines Dateiformats, das sie entwickelt haben, deinem Ranking nur helfen. Ein Nachteil ist, dass es nicht von allen Browsern unterstützt wird, was bedeutet, dass du Backups einrichten musst, um sicherzustellen, dass Leute, die nicht unterstützte Browser benutzen, deine Grafiken trotzdem sehen können. Abgesehen davon 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 ausgedrückt, ein Prozess, bei dem du die Daten eines Bildes faltest, um die Zeit zu reduzieren, die für die Speicherung oder Übertragung des Bildes benötigt wird. Langer Rede kurzer Sinn: komprimierte Bilder laden schneller, und schnellere Ladezeiten sind immer gut für B2C und B2B Webseiten. Es gibt drei verschiedene Stufen der Kompression:
- Lossy Komprimierung – Verlustbehaftet ist die beste Option für die meisten Nutzer. Bilder, die mit Lossy Algorithmen verarbeitet werden, sind die kleinsten verfügbaren optimierten Bilder. Wenn die Geschwindigkeit deiner Seite im Vordergrund steht und du die beste Balance zwischen Optimierung und Bildqualität willst, empfehlen wir dir, bei der Lossy Optimierung zu bleiben.
- Glossy-Komprimierung – Glossy ist die beste Wahl, wenn du dich immer noch um Google Insights kümmerst, aber glaubst, dass ein leichter Verlust an Seitengeschwindigkeit ein akzeptabler Kompromiss für erstklassige Bildqualität ist.
- Lossless Komprimierung – Verlustfrei optimierte Bilder sind Pixel-für-Pixel identisch mit den Originalen, aber sie bieten eine geringere Größenreduzierung im Vergleich zu entweder Lossy oder Glossy verarbeiteten Dateien. Wenn du möchtest, dass deine Bilder unangetastet bleiben, ist dies die richtige Option für dich. Übersetzt mit www.DeepL.com/Translator (kostenlose Version)
Wenn du dich für Bildkompression interessierst, gibt es ein paar wichtige Dinge, die du wissen solltest: speichere alle Bilder für das Web, 72-150 DPI oder verwende einen Bildoptimierer. Wir empfehlen die Verwendung von 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 immer noch reduzieren, indem du ihre EXIF data entfernst. Die meisten Bildoptimierungstools können dies für dich tun, auch wenn du eventuell Einstellungen vornehmen musst.
Responsive Bilder verwenden
Ein responsives Bild ist ein Bild, das sich automatisch an die Größe des Bildschirms anpasst. Diese Anpassungsfähigkeit ist entscheidend für jedes Unternehmen, das seine Website mobilgerätefreundlich gestalten möchte. Da mehr als die Hälfte des täglichen Webtraffics auf mobile Geräte entfällt, ist dies eine ziemlich essentielle Funktion, die man haben sollte.
Hier eine gute Nachricht: Wenn du WordPress verwendest, sind deine Bilder bereits responsive. Diese Funktion wurde in Version 4.4 als Standard hinzugefügt. Bilder sollten das srcset-Attribut haben, welches es möglich macht, ein anderes Bild pro Bildschirmbreite 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 richtiger Dateiname wäre wirklich-niedliche-katze.jpg, wobei das Hauptthema des Fotos (und deines Artikels) im Dateinamen enthalten sein sollte.
Einzigartige, beschreibende Dateinamen machen das Organisieren und Finden von Bildern auf deiner Seite einfacher. Während dies nicht unbedingt ein Vorteil für den Endnutzer ist, macht es dein Leben um einiges einfacher. Weniger Zeit mit der Suche nach falsch beschrifteten Bilddateien zu verschwenden, bedeutet mehr Zeit, die für produktive, umsatzorientierte Bemühungen genutzt werden kann.
Füge SEO-freundliche alt-Tags ein
Der alt tag ist eine notwendige Ergänzung zu allen HTML-Bild-Tags. Google ist schlau, aber es braucht trotzdem deine Hilfe, um den Wert deiner Website zu bestimmen. Das Taggen deiner Bilder hilft ihren Algorithmen, verbessert dein Ranking und macht es wahrscheinlicher, dass deine Bilder in der Bildersuche auftauchen.
Alt-Tags sind auch nicht nur für SEO-Zwecke wichtig. Sie liefern auch wertvolle Informationen für Screenreader, die behinderten Nutzern helfen, den Inhalt deiner Webseite vollständig zu erleben. 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 überlegene verlustfreie und verlustbehaftete Online-Kompression. Es wird nativ in Google Chrome, Firefox, Edge und Opera unterstützt. WebP-Bilder sind typischerweise 25-35% kleiner in der Dateigröße als JPEG und PNGs. Dies verringert die Seitengröße und verbessert die Leistung.
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. Dann musst du dich mit dem Support-Team deines Servers in Verbindung setzen, um sicherzustellen, dass es Regeln gibt, um WebP-Bilder mit kompatiblen Browsern zu serverseitigen. Die meisten modernen Browser unterstützen das WebP Bildformat.
Bilder über ein CDN bereitstellen
Bild-Content-Delivery-Networks (CDNs) sind hervorragend für die Optimierung von Bildern geeignet. In der Tat sind sie eine der beliebtesten Optimierungen für die Website-Geschwindigkeit. Der Wechsel zu einem Bild-CDN kann 40–80% Einsparungen einsparen. Sie helfen auch dabei, die Kosten für die Bandbreite zu reduzieren, die Sicherheit durch DDOS-Abwehr zu verbessern und können dir helfen, Trafficverluste durch Hardwareausfälle zu vermeiden. Viele Host-Provider bieten kostenlose CDNs an, also erkundige dich bei deiner Hosting-Lösung, um zu sehen, was verfügbar ist.
Die Funktionsweise von CDNs ist ziemlich einfach: Sie optimieren deine Bilder und bringen sie so schnell wie möglich zu deinem Nutzer. Das CDN erstellt neue Versionen der Bilder, wenn sie benötigt werden, und liefert deine Bilder von einer Offsite-URL mit aktiviertem Caching, die schnell lädt, normalerweise bevor die Seite gerendert werden kann. Der Einsatz eines CDN kann die Auslieferungsgeschwindigkeit von Bildern um ein Vielfaches erhöhen.
Lade deine Bilder mit Verzögerung
Wenn jemand eine Webseite öffnet, wird normalerweise der gesamte Inhalt der Seite sofort heruntergeladen und auf einen Schlag gerendert. Das macht das Zwischenspeichern von Seiten einfach, aber es kann auch zu langsameren Ladezeiten und verschwendeter Bandbreite führen. Das ist der Punkt, an dem Lazy Loading ins Spiel kommt.
Das Lazy Loading von Below-the-Fold-Bildern (vor allem von größeren) kann die Performance deutlich verbessern. Die lazy loading technique erlaubt es der Seite, den Ladevorgang zu beenden, obwohl viele Off-Screen-Bilder erst zu laden beginnen, wenn ein Besucher die Seite nach unten scrollt. Die einzigen Dinge, die geladen werden, sind die Dinge, die der Nutzer tatsächlich anschaut, was Speicherplatz 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 erscheinen, aber sobald die besten Praktiken eingeführt sind, wirst du für den erhöhten Traffic, die Konversionen und die organischen Rankings dankbar sein. Wenn du Hilfe brauchst, um ein Projekt wie die Organisation und Optimierung von Bildern auf deiner Webseite in Angriff zu nehmen, kontaktiere das Team von Windmill Strategy.
