08.12.2014 von Kommentare: 6

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

Hat dir der Beitrag gefallen? Bewerte Ihn!
4,4/5 Sterne
Möchtest du mich unterstützen? via PayPal spenden
So geht’s: Bilder komprimieren um die Ladezeit deines Blogs zu optimieren 4.4 5 5

Gefällt dir was du liest?

Melde dich für meinen Newsletter an und erhalte alle neuen Beiträge per Mail. Dazu schenke ich dir mein E-Book zu Content Design plus ein ganzes Kapitel aus meinem Buch Blog Boosting mit knapp 100 Seiten!

Kommentare

Kommentator

Kommentar von Christopher

Hey Robert,
sehr nützlicehr Artikel. Besonders deine kurze Aufstellung der Faustregel, wofür welches Format sinnvoll ist, ist optimal auf den Punkt gebracht.

Das Facebook-Problem habe ich bei mir auch festgestellt und eine weitere Lösung festgestellt. Ich habe zuerst ein sehr hochauflösendes Bild als Profilbild für eine Facebook-Seite hochgeladen. Dieses wurde dann von Facebook heruntergerechnet. Das Resultat war, dass es zwischen dem Original und dem Profilbild große Unterschiede in der Farbgebung gab - und eben, dass die Grafiken selbst sehr an Qualität einbußen mussten.
Ich habe daraufhin eine Grafik erstellt, die genau die Größe des Profilbildes in maximaler Skalierung hatte (nämlich 500 x 500 Pixel) und es hat funktioniert! Etwas herunterskaliert wurde es sicher trotzdem, aber zumindest erkennt man den Unterschied zwischen dieser Version und der originalen mit bloßem Auge nicht.

Gruß
Chris

Robert Weller

Antwort von Robert Weller

Hi Christopher,
ich danke dir fürs Feedback!

Der Tipp mit Facebook ist gut und da wir Coverphotos ohnehin am besten an die jeweilige Plattform anpassen macht es keinen großen Unterschied die Auflösung entsprechend zu wählen. Toller Hinweis, merci! :-)

Kommentator

Kommentar von Roby

Hallo Robert,
die online Tools zur Komprimierung von Fotos sind wirklich spitze.
Ich würde noch das Plugin smush.it mit aufnehmen. Gerade wenn man mit vielen Grafiken arbeitet, hat man nicht immer sofort Zeit jede einzelne Grafik zu komprimieren. Mit dem Plugin wird bei jedem upload in die Mediathek von Wordpress die Grafik automatisch komprimiert. Später - wenn man Zeit hat - kann man immer noch mit den zwei online Tools nacharbeiten, wenn es notwendig ist.
Grüße
Roby

Robert Weller

Antwort von Robert Weller

Hi Roby,
danke für deinen Wordpress-Tool Tipp. Da ich selbst nicht mit Wordpress arbeite kenne ich mich nicht so richtig aus, aber wie geschrieben bin ich sicher (und ich hab natürlich auch wenig Recherche betrieben), dass es noch weitere Plugins gibt. Ist smush.it deiner Ansicht nach das beste?

Viele Grüße,
Robert

Kommentator

Kommentar von Christos Papadopoulos

Schöner Beitrag!

Ich komprimiere Bilder seit ich ein Macbook habe immer mit den Werkzeugen in der Vorschau App. Massenbearbeitung, Proportionale Auflösungen - alles bereits drin, ohne ein Zusatzprogramm installieren zu müssen! :)

Ich freue mich jedes mal über diese in Windows langvermisste Funktion! :)

Robert Weller

Antwort von Robert Weller

Danke! Hast du mal getestet, ob deine am Mac komprimierten Bilder über die Tiny-Tools noch weiter komprimiert werden können? Denn ich kann z.B. mit Photoshop auch schon "von Haus" Bilder verkleinern, aber es geht ja hier ums Maximum ;-)

Ich wär gespannt auf dein Testergebnis!

Kommentator

Kommentar von Dominik

Bilder komprimieren hat bei meinem Blog mit wenigen Stunden Arbeit die Absprungrate um fast 9% gesenkt! Nehme zum Komprimieren Gimp her, da ich manche Bilder auch noch etwas aufhübsche :)

LG

Robert Weller

Antwort von Robert Weller

Hi Dominik, 9% klingt wirklich gut!

Gimp würd ich persönlich nicht wählen, aber zugegeben als "Photoshop-Fan" hab ich andere Möglichkeiten. Wie gut ist denn die Komprimierung im Vergleich zu diesen Online-Tools?

VG

Kommentator

Kommentar von Yvonne

Hallo Robert,

hast du eine Alternative zu TINYpng wenn Bilder größer als 5MB sind?

Grüße,
Yvonne

Robert Weller

Antwort von Robert Weller

Hallo Yvonne,
5MB große Bilder sind schon sehr groß! Komprimieren brauchst du Bilder eigentlich nur, wenn du sie im Web einsetzen willst. Und dafür sind 5MB definitiv zu viel. Was du vielleicht vorher brauchst ist ein "Image Resizer" (z.B. http://www.picresize.com/), wodurch du erstmal die Bildgröße - also Breite und Höhe - anpassen kannst. Hilft dir das?

Grüße,
Robert

Kommentator

Kommentar von Yvonne

Hallo Robert,
danke für deine Rückmeldung.
Hab einige Bilder von einer Fotografenplattform, welche dementsprechend groß sind. Danke für deinen Hinweis auf Image Resizer. Tolles Tool! Kannte ich bisher nicht.
Vielen Dank!

Robert Weller

Antwort von Robert Weller

Hallo Yvonne,
sehr gern geschehen. Freut mich, dass ich helfen konnte!

Schreibe deinen Kommentar

Du willst deinen Text formatieren oder einen Link platzieren? Kein Problem, du findest eine Anleitung hierzu in den Kommentarrichtlinien.