Bildoptimierung ist sowohl Kunst als auch Wissenschaft: Kunst, da es keine Standardlösung dafür gibt, wie man ein individuelles Bild am Besten komprimiert; Wissenschaft, da es zahlreiche gut entwickelte Techniken und Algorithmen zur Verringerung der Bildgröße gibt.

Google Tipps zur Bildoptimierung

Wenn eine Webseite zu hohe Ladezeiten hat, könnten die verwendeten Bilddateien daran schuld sein. Bereits durch Verkleinerung der Bildgrößen kann man Ladezeiten verringern. Im folgenden möchten wir Ihnen die Empfehlungen von Google zu 6 Tipps zur Optimierung Ihrer Bilddateien zusammenfassen.

Grundlagen

Laut Google gibt es zwei Wege zur Bildoptimierung:

  1. Optimierung der Bytes, die einen Pixel kodieren
  2. Optimierung der Pixel-Anzahl

Das bedeutet, dass Größenanpassung und Bildkompression die Mittel der Wahl zur Bildoptimierung sind, denn die jeweiligen Gesamtladezeiten von Webseiten sind stark abhängig von Bildladezeiten und iOS zum Beispiel speichert Komponenten mit einer Größe über 25 kB nicht zwischen. Zusätzlich verlangen hochauflösende Geräte bessere Bildqualitäten, daher wird Bildoptimierung ein immer wichtiger Faktor bezüglich der User Experience auf verschiedenen mobilen Geräten.

1. Wählen Sie das richtige Bildformat

Content Marketing - Bildoptimierung - Entscheidung zum Bildformat

Es gibt zwei Typen von Bildern, die Sie auf einer Webseite verwenden können:

  • Vektorgrafiken (SVG, EPS, PDF)
  • Rastergrafiken (JPEG, GIF, PNG)

Betrachten wir beide Typen genauer und wann man welchen Typus verwendet.

Vektorgrafiken

Eine Vektorgrafik ist eine Computergrafik, die aus grafischen Primitiven wie Linien, Kreisen, Polygonen oder allgemeinen Kurven (Splines) zusammengesetzt ist. Meist sind mit Vektorgrafiken Darstellungen gemeint, deren Primitiven sich zweidimensional in der Ebene beschreiben lassen. (Quelle: Wikipdia)

Ein Vorteil von Vektorgrafiken ist, dass sie sich ohne Änderung der Dateigröße und nur kleinen Unterschieden in der Auflösung frei skalieren lassen. Durch diese Eigenschaft sind auch kleine Dateien gut erkennbar, was sehr hilfreich ist, jedoch gibt es einige Einschränkungen bei der Verwendung von Vektorgrafiken:

  • WordPress unterstützt Vektorgrafiken nicht. Sie benötigen ein zusätzliches PlugIn wie Scalable Vector Graphics oder Custom Post Type, um Vektorgrafiken auf Ihre WordPress-Seite hochzuladen;
  • Übersetzungs-Tools könnten große Dateien übersetzen. Tools wie Autotracer werden Rastergrafiken (JPEG, PNG) in Vektorgrafiken übersetzen, aber man muss damit vorsichtig umgehen. Die Eingabedatei wird verkleinert, um eine kleinere Vektorgrafik zu erhalten, die größer dargestellt wird. Canva ist ein hilfreiches Tool für Blog-Bilder, da man hier eine Vektorgrafik als PDF exportieren kann. Ziel ist, mit einem verkleinertes Bild mit benutzerdefinierten Abmessungen die maximale Wirksamkeit einer Vektorgrafik zu erzielen;
  • Der Ausdruck einer Vektorgrafiken ist begrenzt. Sie können den Eindruck einer Fotografie nicht richtig wiedergeben und haben andere Mängel aufgrund ihrer Beschaffenheit.

Google empfiehlt den Gebrauch von Vektorgrafiken besonders bei Bildern, die auf geometrischen Grundformen basieren, beispielsweise Logos, Text, Icons oder ähnliche.

Rastergrafiken

Eine Rastergrafik, auch Pixelgrafik (englisch raster graphics imagedigital image,bitmap oder pixmap), ist eine Form der Beschreibung eines Bildes in Form von computerlesbaren Daten. Rastergrafiken bestehen aus einer rasterförmigen Anordnung von so genannten Pixeln (Bildpunkten), denen jeweils eine Farbe zugeordnet ist. (Quelle: Wikipedia)

Rastergrafiken sind zumeist bekannte Dateiformate: JPEG, GIF, PNG, auf die wir nun den Schwerpunkt legen möchten. Jedes von Ihnen hat seine Besonderheiten:

  • JPEG – Dieses Bildformat ist gekennzeichnet durch seine verlustbehaftete Kompression (Sie können die Auflösung eines JPEGs verringern);
  • GIF – Dieses Bildformat wird oftmals für Animationen verwendet;
  • PNG – Dieses Bildformat kann transparente Elemente enthalten.

Meistens entscheidet man sich bei einer statischen Bilddatei für JPEG (in der Regel kleinere Dateien, außer bei höherer Auflösung) oder PNG (typischerweise größere Datei).

Es gibt weitere erwähnenswerte Dateitypen:

  • JPEG XR – Eine Rasterdatei, die von Microsoft entwickelt wurde. Ihre Dateigrößen sind bei einer höheren Qualität kleiner, verglichen mit JPEG. Unterstützt wird dieses Format nur vom Internet Explorer und – voraussichtlich – von Spartan;
  • WebP – Eine von Google entwickelte Rasterdatei, deren Dateigröße vorgeblich um bis zu 34 % verringert wird. Sie wird nur von Chrome, Opera und Android-Browsern unterstützt.

Diese beiden Dateitypen verringern die Dateigröße stärker als die allbekannten Formate, ihre Verwendung setzt jedoch die Bedingungen voraus, dass der verwendete Browser erkannt wird oder ein Content Delivery Network (CDN) browserbedingtes Übersetzen unterstützt.

Diese Tabelle fasst  die Eigenschaften und Verwendungsmöglichkeiten der Rastergrafiken zusammen:
Tabelle zur Verwendung und Eigenschaften von Rastergrafiken

2. Zwei Arten der Kompression

Wie bereits erwähnt ist Kompression eine der wichtigsten Möglichkeiten zur Bildoptimierung. Es gibt dabei zwei unterschiedliche Varianten:

  • Verlustbehaftete Kompression – diese verringert die Pixeldichte. Dies kann man beispielsweise durch Änderung der prozentualen Qualität eines JPEGs in Photoshop erreichen;
  • Verlustfreie Kompression – diese komprimiert die Pixeldichte. Mit dem WordPress Plugin Smush können unnötige Informationen aus einem Bild entfernt werden, um die Größe ohne Qualitätsverlust zu reduzieren.

Durch Kompression können JPEGs kleiner sein als PNG-Dateien. Hierbei ist zu beachten, dass PNGs immer verlustfrei, JPEGs jedoch sowohl verlustfrei als auch verlustbehaftet komprimiert werden können.

Für Vektordateien empfiehlt Google eine servergesteuerte GZIP-Kompression für SVG-Dateien.

3. Entfernen von unnötigen Metadaten

Fotografien enthalten oftmals irrelevante Metadaten im EXIF-Format (Exchangeable Image File Format), die Sie zur Verringerung der Dateigröße löschen können. Dies können Sie mithilfe von Windows oder Anwendungen wie ImageOptim, VerExif oder BatchPurifier LITE tun. Ein WordPress PlugIn ist scheinbar aufgrund von Urheberrechten und Geschwindigkeit nicht verfügbar. Welchen Weg Sie auch wählen, das Entfernen von Metadaten nimmt etwas Zeit in Anspruch.

4. Bilder neu skalieren

Bei der Umsetzung von responsiven Webseiten können Bilder so konfiguriert werden, dass sich die Darstellung auf mobilen Geräten relativ zur Displaygröße automatisch anpasst. Problematisch ist jedoch die Beibehaltung der Dateigrößen, so dass mobile Seiten länger laden müssen.

In einer theoretischen Abschätzung verglich Google die überschüssigen Pixel, die durch geringe Abweichungen in Bildschirmgrößen auftreten, mit Pixelgrößen. Der Überschuss ist bemerkenswert.

Tabelle zur Verdeutlichung unnötiger Pixel in Bilddateien

Wenn es eine Möglichkeit gäbe, Bildschirmgrößen oder gerätespezifische Bedingungen zur Bestimmung der tatsächlichen – nicht angezeigten – Bildgröße zu verwenden, könnte man besonders in der mobilen Anwendung unnötige Ladezeiten sparen.

5. Automatisierung

Google empfiehlt ebenfalls, Optimierungsprozesse zu automatisieren. Es gibt für WordPress-Benutzer einige Möglichkeiten, wie die bereits erwähnten PlugIns Smush, EWWW Image Optimizer oder ShortPixel. Eine weitere Option ist die Verwendung von externen Seiten wie smush_it, auf denen man Bilder (in großen Mengen) komprimieren kann.

Einige dieser Tools könnten darum bitten, Drittanbieter-Anwendungen auf den Server laden zu dürfen, da sie unterschiedliche Werkzeuge zur Bildkompression verwenden. Hier ist eine Auflistung aus smush-Its FAQs, die den Zweck der genutzten Anwendungen beschreibt:

  • ImageMagick identifiziert den Bildtyp und konvertiert GIFs in PNGs;
  • pngcrush entfernt unnötige Bereiche aus PNGs. Ähnliche Tools zur PNG-Optimierung sind Pngout, OptiPNG und pngrewrite;
  • jpegtran entfernt unnötige Metadaten von JPEGs (momentan inaktiivert) und testet progressive JPEGs;
  • gifsicle optimiert GIF-Animationen durch Entfernen von sich wiederholenden Pixeln in unterschiedlichen Frames;

Google erwähnt weiterhin pngquant als App für Kompressionszwecke.

6. Testen

Nach Durchführung Ihre Optimierung bietet es sich an, die Effektivität zu testen. Dafür kann man die Tools von Pingdom nutzen, um Ladezeiten-Probleme zu beheben. Dieser Screenshot zeigt die Ladezeiten von fünf Bilddateien, die für einen Cision Blogpost genutzt wurden:

Ladezeiten von Bilddateien in einem Cision Blogpost

Pingdom stellt Ihnen auf diese visuelle Weise dar, wie lange es zur Bilddarstellung dauert. Sie können selbstverständlich auch andere der zahlreich vorhandenen Tools nutzen, jedoch ist es wichtig, kurze Ladezeiten und User Experience nicht als selbstverständlich anzunehmen.

Welche Möglichkeiten zur Bildoptimierung haben Sie bereits erfolgreich genutzt?

About Falk Rehkopf

Ehem. Geschäftsführer Cision Germany GmbH