Aktualisiert am 08.12.2014 von

So geht’s: Bilder komprimieren um die Ladezeit deines Blogs zu optimieren

Bilder komprimieren zur Optimierung der Blog-Ladezeit

Wer im Online-Marketing auf visuellen Content vertraut, der kennt das Problem, dass hochwertige Fotos oft sehr lange Ladezeiten verursachen.

Bilder zu komprimieren ist daher extrem sinnvoll, denn je kleiner die Bilddateien sind, desto schneller lädt deine Webseite. Und je schneller deine Webseite lädt, desto eher finden deine Besucher (hoffentlich) das, was sie suchen. Zudem gilt die Ladezeit als Rankingfaktor für Suchmaschinen.

Doch Qualität und Geschwindigkeit schließen sich nicht aus.

Wer auf das passende Dateiformat achtet und sich stets Gedanken über die Kompression macht, der kann beides genießen.

Lies weiter und erfahre, wie du deine Bilder am besten formatierst und komprimierst, um die Ladezeit deiner Webseite zu verbessern.

 

Die gängigsten Dateiformate für Bilder im Blog

Die Erfahrung lehrt uns (oder zumindest mich…), dass es kein perfektes Dateiformat für Web-Grafiken gibt, sondern immer abhängig vom Motiv ist. Folgende drei Formate haben sich mittlerweile durchgesetzt, werden jedoch noch nicht von jedem Webseitenbetreiber ihren Stärken entsprechend eingesetzt.

Bildformate im Vergleich: GIF, PNG, JPG
(© Gefunden auf techranger.org)

 

  • JP(E)G: Für Fotos mit vielen Details und vielen Farben

    Das Format der Joint Photographic Experts Group stellt 16,8 Million Farben dar und ist das meistverbreitete im Netz. Doch die Dateigrößen sind teilweise enorm (zumindest bei maximaler Bildqualität) und die Komprimierung verlustbehaftet. Für uns Blogger ist es nicht immer die beste Wahl, schon gar nicht für Bilder mit harten Kanten oder enthaltenem Text, sondern eignet sich eher für Fotografien.

 

  • PNG: Für Grafiken mit großen Farbflächen und Transparenz

    Portable Network Graphics komprimieren sehr gut (es sind 24 Bit als auch 8 Bit möglich) und können sogar Transparenz darstellen. PNG ist das ideale Format für Grafiken mit wenigen Farben, zum Beispiel Logos, Illustrationen oder Diagrammen.

 

  • GIF: Für Bewegtbild und Animationen

    Das Graphics Interchange Format kann zwar nur 256 Farben darstellen, ist jedoch gleichzeitige das einzige, das Animationen abspielen kann. Mit dem neuen Trend der „Cinemagraphs“ erlebt das bisher aufgrund der geringen Qualität so verschriene GIF nun quasi eine Wiedergeburt. Einen schönen Beitrag dazu hat Tobias Kerstin verfasst.

 

Meine Empfehlung: JPG für Fotos, PNG für Grafiken und GIF für Bewegtbild.

 

Übrigens: nicht selten sehe ich verpixelte Profilbilder bei Facebook oder Twitter. Auch das hängt oft mit dem Dateiformat zusammen. Wenn du dasselbe Problem hast, dann probiere es mal mit einer Alternative. PNG funktioniert meiner Ansicht nach am besten, sowohl für Profil- als auch Coverphotos.

 

Hast du deine Dateiformate nun „richtig“ organisiert, geht es an die Optimierung. Denn selbst aus den Resultaten professioneller Grafiksoftware können wir noch mehr rausholen!

 

Meine Lieblings-Tools um Bilddateien zu verkleinern

Neben einer erweiterten Exportfunktion von Photoshop nutze ich vor allem zwei Online-Tools (eigentlich ist es ein Tool für zwei verschiedene Bildformate), um Bilder für die Nutzung in meinem Blog zu komprimieren: TinyPNG und TinyJPG.

TinyPNG


Wie die Namen schon vermuten lassen, kannst du damit sowohl deine PNG-Dateien als auch JPG-Dateien ohne Qualitätsverlust komprimieren.

Hervorragend arbeitet das Tool auch mit Transparenz, die Photoshop zum Beispiel nur in einem 24Bit-PNG sauber abspeichern kann. TinyPNG’s Algorithmen reduzieren den Umfang allerdings auf 8Bit – ohne merklichen Qualitätsunterschied – und verkleinern die Bilddatei dadurch um bis zu 70% (wer wissen will, wie genau das funktioniert, kann sich gerne melden, ich will an dieser Stelle jedoch nicht zu sehr ins technische Detail gehen).

TinyJPG


Auch schön: Das Tool funktioniert ohne Anmeldung und ohne die Notwendigkeit, es erklären zu müssen.

Einfach uploaden und downloaden.

 

So ein Tool hätte ich gerne für die Suchmaschinenoptimierung! ;-)

 

Apropos SEO: Im nächsten Beitrag erkläre ich dir, wie du die gesamte Ladezeit deiner Webseite verbessern kannst und warum du das in Hinblick auf dein Ranking in Suchmaschinen tun solltest. Abgesehen davon, dass Matt Cutts auch dazu rät... ;-)

Beschleunigung der Webseiten ist extrem wichtig. Schnellere Websites sorgen für zufriedene Nutzer. PageSpeed wird zum Ranking-Signal.

 

Bis dahin freu ich mich auf dein Feedback zu diesem Artikel und bin dir sehr dankbar, wenn du den Beitrag bewerten und teilen würdest!

 

 

Auch interessant:

 

PS: Es gibt natürlich noch weitere Bildkompressionstools im Netz, etwa Compressor.io, JPEGmini oder PunyPNG, jedoch habe ich mit den oben beschriebenen Tools bisher die beste Erfahrung gemacht – sowohl hinsichtlich der Bedienung als auch der Ergebnisse.

Zu guter Letzt noch der Hinweis, dass auch der Farbmodus eine wichtige Rolle bei der Dateigröße spielt: Im Web nutzen wir ausschließlich den RGB-Farbraum, im Vergleich zu CYMK in der Printproduktion (lies auch: Unterschied zwischen RGB und CYMK). Denn pro Farbe – beim einen drei, beim anderen vier – sind im CMYK-Farbraum 8 Bit möglich, insgesamt also 32 Bit, wodurch die Dateigröße teilweise um ein Drittel größer ist.

Infografik: Bildformate JPG. GIF, PNG

Werbung

Newsletter abonnieren