xovilichter-video-61-bilder-seo-tipp-komprimierung

Tipps zum Bilder-SEO: Komprimierung

Das Blogartikel nicht nur aus seitenlangen Texten bestehen sollten, sondern ebenso attraktiv für den Leser aufbereitet werden müssen, klingt wahrscheinlich logisch. Die Rede ist davon, dass man am besten multimedial arbeitet und seine Worte zusätzlich mit einigen optischen Auflockerungen ergänzt. Seien es Grafiken, Fotos, Illustrationen oder auch Videos: es geht auch ein stückweit darum, den Leser, Nutzer oder Käufer zu unterhalten. Und wenn man es geschickt anstellt, dann werden die Bilder auch von Google ordentlichen indexiert, sodass man den Traffic auf seiner Seite dadurch erheblich steigern kann. Gerade die Bildersuche von Google wird von vielen massiv unterschätzt, obwohl gerade von Nutzern mit einer „Do“-Suchintention (oder auch „transactional search“) häufig genutzt wird. Gerade für Onlineshops ist beispielsweise eine gut optimierte Seite mit ordentlichen Bildern eine essentielle Voraussetzung für viele Leads (z.B. Verkäufe). Ich hatte in einem anderen Artikel bereits über Tipps zum Bilder-SEO geschrieben und auch erklärt, wie Google Bilder indexiert. An dieser Stelle möchte ich noch einen weiteren Punkt ergänzen, der in Bezug auf die Performance einer Website von vielen zu wenig beachtet wird: die Dateigröße und die Komprimierung. Beim Xovilichter Contest 2014 arbeiten viele SEOs auch mit Bildern, um Traffic, Verweildauer und Attraktivität ihrer Seite zu erhöhen dabei fällt mir aber immer wieder auf, dass die Grafiken und/oder Fotos oftmals deutlich zu groß sind oder in einem „falschen“ Dateiformat gespeichert werden. Daher hier einige Tipps dazu, die auch die Ladezeiten einer Website deutlich reduzieren können.

Auflösung (absolut und relativ), Dateiformat und Farbumfang

Hier ist ein wenig Fingerspitzengefühl gefragt, denn zu sehr komprimiert, entstehen hässliche Pixelfragmente und zu wenig davon und die Bilder sind zu groß und damit zu ladeintensiv. Leider kann man nie pauschal sagen, wie viel Kilobyte oder Megabyte ein Bild, Foto oder eine Grafik groß sein darf, da es stark von den abgebildeten Inhalten abhängt. Man kann aber mit Mittel sagen, dass „Standard-Bilder“ nicht unbedingt größer als 500kb sein sollten. Aber das ist nun eine ungefähre Maßgabe und kann definitiv nicht pauschal auf alles Visuelle auf der eigenen Seite angewandt werden. Für die Speichergröße eines Bildes sind vor allem 3 Faktoren zu beachten: Auflösung (absolut und relativ), Dateiformat und Farbumfang. Heute will ich mich einmal zuerst der korrekten Komprimierung eines Bildes zuwenden.

Komprimierung versus Qualität der Bilder

Um die Speichergröße von Bilder zu reduzieren, ist eine sinnvolle Komprimierung anzuwenden. Dies geht allerdings nur bei bestimmten Dateiformaten: JPEG und TIFF. Letzteres sollte im Web-Bereich eigentlich gar nicht angewendet werden, da diese Formate viel zu speicherintensiv sind und eher im Print-Bereich gebraucht werden. Ein JPEG (oder auch JPG) hingegen kann mit der richtigen Einstellung um ein Vielfaches verkleinert werden, ohne dabei optisch zu stark zu „leiden“. Da ich für meine Bildbearbeitung Adobe Photoshop benutze, sind die Screenshots natürlich auch von diesem Tool. Allerdings lassen sich ähnliche Ergebnisse auch mit dem kostenlosen Gimp erreichen. Das coole an Photoshop allerdings ist, dass er bereits vor dem Speichern eine Live-Vorschau inklusive Speichergröße anzeigt und man seine Bildeinstellung sehr fein nachjustieren kann, um das richtige Ergebnis zu erreichen. Ich empfehle daher, immer die Funktion „Für Web speichern“ anstelle der Standard „Speichern unter“ Funktion zu nutzen. Unkomprimiert wäre dieses Xovilichter Bild gute 400kb groß. Durch eine Kompressionsqualität von 45% sinkt die Größe auf nur noch circa 150kb. zwar sind jetzt einige Pixelfragmente zu sehen, allerdings werden sie nur beim sehr genauen Hinsehen dem Nutzer auffallen. Man sollte gerade bei großflächigen Grafiken und scharfen Konturen mit der Komprimierung aufpassen, denn hier fällt sie am ehesten durch unsaubere Kanten auf. Durch eine zusätzliche Weichzeichnung würde das Bild noch kleine werden. Diese kann ich aber nur in den wenigsten Fällen empfehlen, da sie schnell auffällt und das gesamte Bild (vor allem ein Foto) unscharf und damit auch unschön aussehen lässt.

Qualität versus Ladezeit

Da es bei diesem Xovilichter Wettbewerb oftmals um Feinheiten geht, komprimiere ich meine Bilder stärker als üblich, um die Performance meiner Seite zu steigern und die Ladezeit massiv zu reduzieren. Normalerweise ist eine Qualitätsstufe von 80% optisch fast verlustfrei und damit am geeignetsten für die meisten Websites. In diesem Fall allerdings reduziere ich den Wert auf 45% und erreiche dadurch noch viele kleinere Speichergrößen. Bei den vielen Artikel mit Bildern macht sich das in der Summe sehr schnell bemerkbar. Durch die Einstellung „Progressiv“ oder „Optimiert“ kann man weitere Kilobytes sparen, ohne eine sichtbare Minderung der Qualität herbeizuführen. Anbei nun einmal ein kleine Bilderserie, um die unterschiedlichen Kompressionsstufen mit Photoshop in Verbindung zur Speichergröße darzustellen.

xovilichter-bilder-seo-photoshop-qualitaet-100-prozent
Photoshop für Webspeichern 100 Prozent Qualität
xovilichter-bilder-seo-photoshop-qualitaet-80-prozent
Photoshop für Webspeichern 80 Prozent Qualität
xovilichter-bilder-seo-photoshop-qualitaet-45-prozent
Photoshop für Webspeichern 45 Prozent Qualität
xovilichter-bilder-seo-photoshop-qualitaet-45-prozent-weichzeichnen
Photoshop für Webspeichern 45 Prozent Qualität und weichzeichnen

 

Summary
Xovilichter Video Nummer 61 - Tipps zum Bilder-SEO: Komprimierung
Title
Xovilichter Video Nummer 61 - Tipps zum Bilder-SEO: Komprimierung
Description

Bilder sind eine super Sache - für Google und den User. Allerdings sollte man sehr darauf achten, dass man die Speichergröße so klein wie möglich hält, um die Performance seiner Seite nicht zu verschlechtern. Mit Adobe Photoshop lassen sich Bilder sehr gut komprimieren, damit sie schnell geladen werden können.

9 Gedanken zu „Tipps zum Bilder-SEO: Komprimierung“

  1. Sehr gut, daß sich auch mal jemand um die Bilder kümmert. 🙂

    Ich verwende als Standard meist 66%, verzichte aber in der Regel auf die Zusatzoptionen „Progressiv“ und „Optimiert“. Die bringen nicht sooo viel Einsparung, führen bisweilen aber zu Kompatibilitäts-Problemen.

    Außerdem sollte man bei Bildern fürs Web immer die Option „In sRGB konvertieren“ angehakt haben und kein Farbprofil einbetten. Sonst erlebt man möglicherweise ein paar unerwartete Überraschungen.

    Aber das hast Du, wie auf den Screen-Shots zu sehen, ja richtig eingestellt. Ich wollte es nur nochmal explizit erwähnen.

    1. Moin Ingo, Kompatibilitäts-Problemen hatte ich bis dato nur extrem selten. Wo sind die denn bei dir aufgetreten?

      Und danke auch für deine Ergänzung -d a hast du natürlich vollkommen Recht. Man kann zu dem Thema noch sehr viel mehr schreiben, aber meine Zeit ist leider immer etwas limitiert 😉

      VG, Ronny

      1. Probleme gab es bei WordPress. Je nach installierter Version der GDLib gab es Fehler beim Erstellen der Thumbnails und der Bildern in den anderen Größen. Das trat z.B. bei größeren Bildern beim 1&1 Webhosting auf.

        1. Stimmt, jetzt wo du es sagst: ich hatte tatsächlich ähnliche Probleme. Das liegt aber definitv auf diesem „tollen“ Server, auf dem diese Seite aktuell gehosted wird. Und eine Serverwechsel mit im Contest zu machen und ein paar Stunden nicht erreichbar zu sein, ist irgendwie nicht so cool! 😉

    1. Moin Leif, genau: Gimp kann das einigermaßen kompensieren. Photoshop Elements wäre auch noch eine Möglichkeit. Es gibt noch ein weiteres Plugin für Photoshop und eins, was man Freeware runterladen kann. Beide stelle ich heute in meinem Artikel kurz vor.

      VG, Ronny

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *