Dieser Artikel erläutert, wie Sie Ihre Bilder bearbeiten und mit modernen Technologien ein optimales Verhältnis von Bildqualität zu Bildgröße erzielen.
Seitdem die Ladezeit einer Webseite von Google als Rankingsignal ausgewertet und in die Beurteilung mit einfließt, macht es auch im Bereich der Pagespeed Optimierung ganz klar Sinn, wirklich alle Bilder zu bearbeiten und hinsichtlich der Skalierung, des Dateiformats und der Kompression zu optimieren.
Durch immer bunter und schöner gestaltete Webseiten steigen auch die Anforderungen an die Bandbreite und die Leistung des Endgeräts, was auch mal den Geduldsfaden reißen lassen kann und zu Abbrüchen seitens des Benutzers führt.

Gründe für den Einsatz von Bildern im Webdesign

Ein mit Bildern angereicherter Text hat den Vorteil, dass er aufgelockert wird und Inhalte über die visuelle Ebene verdeutlicht.
Gemischte und gut aufbereitete Inhalte sind für den Besucher leichter zu begreifen als reine Textinhalte, was sich auch bei der Absprungrate / Bounce-Rate widerspiegelt. Durch die sich daraus wiederum ergebende Steigerung der Verweildauer verbessert sich zudem auch die Beurteilung des Contents durch Google.

Kriterien beim Bilder Bearbeiten

Die wichtigsten Kriterien beim Bearbeiten von Bildern sind:

  • die Bildgröße,
  • das Dateiformat,
  • die Bild Kompression und
  • die Farbtiefe.

Modernes Webdesign mit bildschirmfüllenden Bildern stellt andere Ansprüche an Hosting und Bandbreite.
Bilder müssen einen positiven Eindruck erwecken, dürfen die Website aber nicht zu sehr verlangsamen.

Bilder optimieren auf statischen Webseiten

Beim Vorbereiten der vorhandenen Bilder für den Einsatz auf statischen Webseiten ist zuerst einmal auf ein bestimmtes Seitenverhältnis zu achten. Gängige Seitenverhältnisse in der Fotografie sind 4:3 (Four/Thirds) oder 3:2 (APS-C).
Das fertig zugeschnittene Bild sollte in der Bildbearbeitung auf eine optimale Größe skaliert werden.
Ist das Bild größer als der zugewiesene Bereich auf der Webseite, dann wird es kleiner dargestellt, jedoch wird das große Originalbild geladen.

  • width
  • height
  • alt tag
  • title tag

Bilder optimieren bei Content Management Systemen

Content Management Systeme optimieren Bilder teilweise automatisch. So erzeugt z.B. das CMS WordPress mehrere kleinere Versionen des ursprüngliches Bildes für alle denkbaren Seituationen, in den das Bild eingesetzt werden könnte, z.B. als Beitragsbild, als Vorschaubild, für Smartphones etc.
Viele CMS Systeme komprimieren die Bilder allerdings neu, und das nicht immer optimal.

Das richtige Dateiformat für Bilder

Die richtige Kompression

Je detailreicher das Motiv auf einem Bild, umso schwieriger wird die Reduzierung der Dateigröße. Bei zu geringen Kompressionsraten können schnell Kompressionsartefakte entstehen, die abhängig vom verwendeten Encoder / Dateityp zu Flächen- und Rasterbildung, Farbverfälschung und Klötzchenbildung in Randbereichen führen kann.

Testbedingungen

Das Ausgangs Bild hat eine Auflösung von 1000x1000 px. Es wird in zwei verschiedenen Kompressionsgraden q=95, q=84 und q=50 im verlustbehafteten .jpg Kompressionsverfahren abgespeichert.
Anschließend wird ein festgelegter Ausschnitt mit den Maßen 200x200 px wieder auf 1000x1000 px hochskaliert und anschließend in dem verlustfreien Dateiformat .png komprimiert. Das verhindert eine Verfälschung des Resultats durch eine doppelte Kompression.
Die Qualitätsstufen 50 und 95 sind sehr weit auseinander, verdeutlichen dadurch aber umso deutlicher, wie sich der Kompressionsgrad bei sonst identischen Bedingungen konkret auf die Bildqualität auswirkt.

verlustfrei komprimiertes Bild in voller Qualität
Bilder bearbeiten und verkleinern mit -q 95 jpg Kompression

JPG Kompression Qualität q=95

Bilder bearbeiten und verkleinern mit -q 84 jpg Kompression

JPG Kompression Qualität q=84

Bilder bearbeiten und verkleinern mit -q 65 jpg Kompression

JPG Kompression Qualität q=65

In dem gezeigten Beispiel ist sehr gut erkennbar, dass trotz des einfachen zweifarbigen Motivs besonders an den Kanten sehr starke Kompressionsartekfakte entstehen.
Während eine Kompression mit „95“ vernachlässigbare Artefakte erzeugt, so sind die Kompressionartefakte bei „65“ Kompression schon beträchtlich.
Die Artefakte werden besonders auffällig, sobald der Benutzer das Bild im Browser vergrößert.

Beim Bilder komprimieren ist das Verhältnis von benötigter Auflösung und Kompressionsgrad für eine optimale Dateigröße entscheidend.
Eine hohe Auflösung erhöht gleichzeitig auch immer die Dateigröße. Falls der Qualitätswert „q“ für die Bildkompression zu niedrig gewählt ist, dann fallen die Kompressionsartefakte bei der JPG Kompression sehr viel stärker ins Auge.
In so einem Fall gilt es das Bild so zu bearbeiten, dass die Wahrnehmung der Kompressionsartefakte in etwa einhergeht mit den erkennbaren Pixeln, die durch die bei Rasterbildern immer eingeschränkte Auflösung an besonders kontrastreichen Schrägen hervorgerufen werden.

Die optimale Einstellung der Kompression ist dabei stark abhängig vom Motiv.

Bilder Optimieren