Bilder bearbeiten

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:

  • Bildgröße,
  • Dateiformat
  • Bild Kompression
  • 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 langsam machen.

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.

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

Das Wahl des Dateiformats hängt mit den im Bild enthaltenen Informationen zusammen. Strichzeichnungen und Statistiken mit großen Flächen brauchen für ein optimales Verhältnis von Qualität zu Große ein anderes Dateiformat als detailreiche Fotografien.

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 auftreten, die sich abhängig vom verwendeten Encoder / Dateityp in Form von Flächen- und Rasterbildung, Ausfransen, Farbverfälschungen und Klötzchenbildung zeigen.

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.

JPG Kompression Qualität q=95

JPG Kompression Qualität q=84

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.

Categories: