Waldpilze Header mit Wilber

Bilder Komprimieren mit GIMP

Webseiten sollen möglichst positive Nutzererlebnisse hervorrufen. Neben der einwandfreien Funktionalität sorgen anschauliche Inhalte dafür. Anschauungsmaterialien wie Bilder und Grafiken bleiben den meisten Betrachtern besser im Gedächtnis als reiner Text. Ob es sich nun um einen privaten Blog handelt, um Social Media oder andere Anwendungen: Mit der digitalen Kamera aufgenommene Bilder sind meist zu gross, um direkt ins Netz geladen zu werden,

In unserem kleinen Tutorial möchten wir Ihnen zeigen, wie Sie Bilder komprimieren und damit für das Web aufbereiten. Viele Webseitenbetreiber denken dabei sofort an Photoshop. Allerdings lassen sich Bilder auch sehr schnell und unkompliziert mit dem kostenlosen und freien Grafikprogram GIMP (GNU Image Manipulation Program) komprimieren. Die Software steht für iOS, Windows und Linux zur Verfügung.

Die folgende Anleitung zeigt eine Bildkomprimierung unter Verwendung von GIMP und dem Plug-In «Save for Web».

Wenn Sie auf die Bilder klicken, erhalten Sie eine grössere Auflösung des Bildes, um mehr zu erkennen.

1.      Das «Save for Web»-Plug-In herunterladen und installieren

Bevor wir beginnen, wird ein Plug-In benötigt. Dieses können Windows-User auf der gimp.org-Webseite als ZIP (save_for_web_0.28.6_win32.zip) herunterladen. Das entpackte Archiv enthält eine .exe-Datei, die in das Verzeichnis C:Users«Ihr_Benutzer».gimp-2.8plug-ins kopiert werden muss. «User» kann unter Umständen «Benutzername» lauten. Ansonsten kann das richtige Verzeichnis auch einfach über das Suchfeld oben rechts gefunden werden. Dazu einfach den lokalen Datenträger (C:) anwählen und nach «.gimp-2.8plug-ins» suchen.

Linux-User öffnen einfach den Terminal und geben « sudo apt-get install gimp-plugin-registry » ein.

Nach dem Starten von GIMP ist das Plug-In «Save for Web» unter «Datei» finden.

2.      Das Originalbild

Das unkomprimierte Originalbild

Das Originalbild besitzt eine Auflösung von 5184 x 3456 Pixeln bei 300dpi und 24-bit Farbtiefe. Die Auswertung des Histogramms ergibt, dass das Farbbild hauptsächlich aus roten und grünen Farbtönen besteht und der blaue Anteil verhältnismässig gering ausfällt. Mit allen Informationen weisst das Originalbild trotzdem eine Dateigrösse von über 14 MB auf.

Damit eignet sich die Datei vielleicht für den Druck, aber nicht als Bildmaterial für eine Webseite. Als Webseitenbetreiber sollte man darauf achten, das mobile Datenvolumen der Smartphone-User zu schonen, da bereits über die Hälfte der Internet-User mobil surfen.

3.      Das «Save for Web»-Plug-In benutzen

Wir möchten das Originalbild komprimieren und öffnen es mit GIMP. Als nächstes soll das vorher installierte Plug-In zum Einsatz kommen.

Save for Web Plug-In unter Datei

 

Anders als erwartet, zeigt sich kein Dialog in dem Einstellungen vorgenommen werden können. Stattdessen erschient am unteren Rand folgende Fehlermeldung:

Save for Web Plug-In Fehler

4.      Das Bild skalieren

Offensichtlich kann das Plug-In mit der Dateigrösse von 14 MB nicht umgehen. Nun gibt es zwei Wege, an der Grösse eines Bildes zu feilen. Entweder die Auflösung wird geändert oder die Qualität herabgesenkt. Wir entscheiden uns letzten Endes für beides, beginnen aber bei der Auflösung. Unser Bild besitzt ein für Webseiten optimales Seitenverhältnis von 3:2. Das möchten wir beibehalten, skalieren das Bild nun aber. Dazu klicken wir in der Menüleiste auf «Bild» und «Bild skalieren».

Bilder skalieren mit GIMP

Folgendes Fenster sollte sich öffnen:

Bilder skalieren mit GIMP - Dialogfenster

In diesem Dialogfenster werden die von uns benötigten Werte eingetragen. Die neue Breite unseres Bildes soll nur noch 1020px betragen. Die Höhe wird automatisch angepasst, insofern die Klammer rechts neben den Feldern zusammensitzt. Damit bleibt das Verhältnis proportional. Die Auflösung sollte auf jeweils 150 Pixel/in herabgesetzt werden.

Bilder skalieren mit GIMP - Dialogfenster mit angepassten Parametern

5.      Die Bildqualität anpassen

Würden wir das komprimierte Bild so speichern, betrüge seine Dateigrösse immer noch über 500 KB – für mobiles Surfen viel zu gross.

Da wir an der Bildgrösse nichts mehr ändern wollen, wird das Hauptaugenmerk nun der Bildqualität gewidmet. Jetzt verwenden wir das „Save for Web»-Plug-In. Unter «Datei» finden wir den Eintrag, klicken darauf und es öffnet sich das folgende Dialogfenster:

Oberfläche vom Save for Web GIMP-Plug-In

An der linken Seite befinden sich verschiedene einstellbare Parameter. Fotografien/Bilder sollten generell im .jpg-Format gespeichert werden, da es ein vergleichsweise gutes Kompressionsniveau ermöglicht. Das .png-Dateiformat empfiehlt sich bei Grafiken und Logos.

Der Button für die Qualität wird so weit nach links geschoben, wie die Bildqualität noch vertretbar ist. Allerdings sollte hier differenziert werden. Webseiten von Fotografen beispielsweise definieren sich über die Bilder, weswegen die Bildqualität nicht zu sehr heruntergeschraubt werden darf.

Im unteren Bereich des Fensters kann die Dateigrösse abgelesen werden. Die beiden folgenden Bilder zeigen den Qualitätsunterschied zwischen 100 KB und 50KB.

GIMP Screenshot Save for Web 100kb Bildkomprimierung

GIMP Screenshot Save for Web 100kb Bildkomprimierung

GIMP Screenshot Save for Web 50kb Bildkomprimierung

GIMP Screenshot Save for Web 50kb Bildkomprimierung

Deutliche Qualitätsverluste sind vor allem an feinen Linien zu erkennen. Im unteren Bild sind Pilzkopf und Regentropfen deutlich verpixelt. Diese sogenannten Blockartefakte treten immer dann auf, wenn ein .jpg-Bild zu stark komprimiert wird.

6.      Das Ergebnis der Bildkomprimierung mit GIMP

Bei einer Auflösung von 1020 x 680 Pixeln haben wir uns im Endeffekt für eine Bildqualität entschieden, bei der die Dateigrösse nur noch etwa 120 KB beträgt. Diese Bildkompression ist der optimale Kompromiss zwischen Dateigrösse und Bildqualität.

GIMP Screenshot Save for Web 120kb Bildkomprimierung

Vergleichen Sie die Bildqualität mit dem 1. Bild des Artikels (Originalbild).

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.