Bildoptimierung für die bestmögliche Web Performance – so geht’s!

Sie haben sicherlich schon einmal eine Website besucht, bei der Sie das Gefühl hatten, dass irgendetwas mit den angezeigten Bildern nicht stimmt. Oder Sie haben die Seite sofort wieder verlassen, weil sie zu lange zum Laden gebraucht hat.

Nichts schreckt Besucher mehr ab als falsch dimensionierte Bilder, schlechte Qualität oder lange Ladezeiten.

Wie wichtig die Optimierung von Bildern und Grafiken in Hinsicht auf eine flüssig fließende Website ist, werden wir in diesem Artikel erläutern.

Unterschiedliche Dateiformate

Um Darstellungen fehlerfrei sowie schnellladend in die Webgestaltung einzubinden, bedarf es des richtigen Formats. In der Netzwelt sind die gängigsten Endungen für Bilder und Grafiken: JPG, PNG und GIF.

Bildformat: JPG

Das meistgenutzte Format ist wohl das JPG (Joint Photographic Experts Group), auch JPEG abgekürzt. Auf unserem Smartphone und in Digitalkameras werden Fotos – sofern man die Einstellung nicht ändert – automatisch in JPG gespeichert. Warum? Weil dieses Format eine nur sehr geringe Größe hat, was für das Laden des Bildes ein großer Vorteil ist und damit die User Experience (Nutzungserlebnis) verbessert. Bei einem Bild von beispielsweise 20 Megabytes Ausgangsgröße kann man nach dem Komprimieren in JPG nur noch eine Dateigröße von etwa 2 Megabyte erwarten. Allerdings bringt jede Komprimierung auch Qualitätsverluste mit sich. Der Grund dafür ist, dass Pixel der gleichen Farbe und Größe erkannt und dann zu einzelnen Tiles/ Kacheln verwandelt werden. Ungeachtet dessen, werden über 16,7 Millionen Farben bereitstellt, was wiederum ein Vorteil gegenüber anderen Dateiformaten ist.

Verwenden Sie insbesondere Fotografien in JPG, wenn Sie Wert auf schnellladende Seiten und gute Farbpräsenz legen.

Bildformat: PNG

Beim PNG (Portable Network Graphics) handelt es sich um ein Format, welches meist für Grafiken oder Logos verwendet wird. Durch die verwendbare Transparenz mit 256 Stufen der Opazität (Maß für die Lichtundurchlässigkeit), können Bilder von ganz undurchsichtig bis ganz durchsichtig gestaltet werden. Dieser Umstand ist ein enormer Vorteil bei der Hintergrundgestaltung.

Beim Komprimieren und mehrmaligem Abspeichern geht hier keine Qualität verloren. Dafür ist die Dateigröße viel höher und verlangsamt das Laden eines größeren Bildes auf Ihrer Website.

Nutzen Sie das Format PNG eher für Ihr Logo, Grafiken und Navigationselemente mit scharfen Kanten.

Bildformat: GIF

GIFs (Graphics Interchange Format) erlauben ebenfalls eine verlustfreie Kompression und speichert Bilder in geringeren Größen ab. Wir verbinden GIFs mit kurzen Animationen, die im Grunde genommen wie ein klassisches Daumenkino funktionieren. Mehrere Bilder werden übereinandergelegt – dies erweckt den Eindruck als wäre es ein kleiner Film mit Endlosschleife.

Bilder oder Animationen in GIF können Sie ganz einfach durch Onlinetools selbst erstellen.

Die animierten Sequenzen sind allerdings nicht jedermanns Sache. Zudem können sie zu epileptischen Anfällen führen.

Ein großer Nachteil von Animationen in GIF ist das kleine Farbspektrum von lediglich 256 Farben, was wiederum den Vorteil der geringen Dateigröße nach sich zieht. Die Einbuße der wenigen Farben lässt Bilder und Animationen unnatürlich und qualitativ eher minderwertig aussehen.

Binden Sie GIFs ein, wenn Sie einfache, wenig farbreiche Bilder animieren möchten, zum Beispiel für simple Grafiken und weniger für Fotografien.

Das wohl wichtigste Kriterium bei einem Website-Besuch ist die Performance (Leistungsfähigkeit). Nur wenn Ihre Website schnell genug lädt und Sie ihm dadurch die Usability bieten, bleiben Besucher und kommen wieder.

Um die Ladegeschwindigkeit (Page Speed) zu optimieren bedarf es einiger Faktoren. Ein zentraler Indikator für die Überprüfung der Performance sind Ihre Bilder, Grafiken und Animationen.

Wie im ersten Teil dieses Artikels geschrieben, geht es hauptsächlich um Dateigrößen und die damit verbundenen Ladezeiten – abgesehen vom benötigten Speicherplatz.

Das Google Ranking kann sich durch den Pagerank verschlechtern, wenn Ihre Website zu lange Ladezeiten hat.

[the_ad id=“10868″]

Zusätzliche Komprimierung

Wenn Sie sich nun für das Format Ihrer Bilder und Grafiken entschieden haben, können Sie zusätzliche Ladezeiten einsparen. Wie? Indem Sie ein Bild, das bereits in JPG abgespeichert ist komprimieren und so seine Dateigröße verändern. Es geht also nicht um das bloße Abspeichern in ein bestimmtes Format oder Umwandeln in ein anderes, sondern darum, bestehende Bilder zu komprimieren und die Endung beizubehalten.
Hier sollten Sie die goldene Mitte finden zwischen Größenminimierung und dennoch guter Qualität. Experimentieren Sie, schauen Sie sich Ihre Ergebnisse an und entscheiden, welches optimierte Bild immer noch eine gute Darstellung bietet.
In einem Bildbearbeitungsprogramm wie zum Beispiel Adobe Photoshop haben Sie die Möglichkeit, Ihre Bilder nicht nur zu verändern, sondern direkt zu komprimieren.
Es steht Ihnen noch eine dritte Möglichkeit für die Optimierung/ Reduzierung der Grafiken und Bilder zur Verfügung. Laden Sie Ihren bildlichen Content im vorangegangenen gewählten Format und anschließender Optimierung auf Ihre WordPress Seite hoch. Im Anschluss haben Sie die Möglichkeit, diese noch einmal zu komprimieren. Dazu bietet WordPress eine Vielzahl von Plug-Ins, wie den Imagify Image Optimizer, mit dem Sie schnelle Ladezeiten und wenig Speicherplatz auf den Webhoster erzielen können.

Das in diesem Beitrag verwendete Beitragsbild ist der Fotodatenbank von Pexels.com entnommen. Damit fällt das genutzte Bild unter die Creative Commons Zero (CC0) Lizenz und kann somit frei genutzt werden. Die Quellen der anderen in diesem Beitrag verwendeten Bilder sind entsprechend als Bildunterschift am jeweiligen Bild aufgeführt oder sind eigens von mir erstellte Screenshots.