4 min 
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.
-
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.
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.
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).
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:
- Content Design: Fotos online bearbeiten mit diesen (kostenlosen) Tools
- Stockarchive: Finde die passenden Bilder für deinen Blog (und Social Media)
- Checkliste: Rechtliche Risiken bei der Verwendung von Bildern in Social Media
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.
Möchtest du weiterhin investigative, inspirative und inhaltlich tiefgründige Fachartikel mit journalistischen Anspruch erhalten? Dann unterstütze mich dabei – jeder Beitrag, schon ab 1 Euro, ist eine wertvolle Hilfe, um die Zukunft von toushenne.de zu sichern.
unterstützen
Robert ist Autor des Bestsellers „Content Design“ (Hanser Verlag), unabhängiger Content-Stratege und Gründer dieses Magazins (ehem. „toushenne.de“). Daneben lehrt er Content-Marketing an der FH JOANNEUM sowie Content Design an der ZHAW. Mit über zehn Jahren Erfahrung aus dem Agenturgeschäft, E-Commerce- & SaaS-Unternehmen sowie zahlreichen Freelance-Projekten mit führenden Marken wie Adobe, Bike24 und contentbird, entwickelt er wirksame Strategien für die Optimierung des Content ROI.
