Wenn man Bilder im Internet bereitstellen möchte, ist es von Vorteil, wenn die Bilder so klein als möglich sind. Gerade in Hinsicht auf mobile Geräte und Google Page Speed sollte man dieses Thema nicht unterschätzen (siehe auch CSS-Sprites). Wie man Bild unter der freien Grafiksoftware optimal für das Web speichert, beschreibe ich in diesem Artikel.
Ich setze voraus dass dem Leser klar ist, dass man Bilder auf einer Webseite nur so groß einbindet, wie die Größe auch wirklich gebraucht wird. Ein 200 Pixel breites Bild auf 100 Pixel in HTML zu verkleinern ist eine Ressourcenverschwendung, da viel zu unnötige Daten an den Webserver übertragen werden. Auch Google Page Speed moniert dieses Verhalten.
Es sollte auch klar sein, dass ein Bild bei einer Monitoransicht lediglich 72 dpi (dots per inch) benötigt. Wer Rücksicht auf Retina-Displays nehmen will oder muss, sollte sich hierzu weitere Gedanken machen, aber normale Leser nicht mit übergroßen Bildern „belästigen“.
Dann sollte klar sein, dass Bilder für das Web entweder im jpg oder png-Format gespeichert werden sollen. Auf die Unterschiede möchte ich hier nicht weiter eingehen. Lediglich den Hinweis, dass es kein Patentrezept gibt, welches Format „immer besser“ ist. Als Faustregel kann gelten, dass Fotos besser im JPG-, Grafiken im PNG-Format gespeichert werden sollen. Entscheidung: Beides ausprobieren und Ergebnis mit der Dateigröße abwägen.
Bilder mit Gimp verkleinern und schärfen
Im ersten Schritt sollen die Bilder auf die richtige Zielgröße „zurechtgeschrumpft“ werden. Schon hier gilt es einiges zu beachten. In GIMP wird unter BILD -> BILD SKALIEREN ein Dialog angezeigt, der die Verkleinerung des Bildes zulässt. Auch wenn man meinen könnte, dass die Bilder in der Qualität steigern, wenn man sie verkleinern, ist dies leider ein Trugschluss. Bilder leiden in der Qualität beim Vergrößern (was logisch ist), wie auch beim verkleinern, da hier zum Teil Details wegfallen. Gimp bietet hier die Auswahl „Qualität“ -> „Interpolation“ an. Zwei Filter („Kubisch“ und „Sinc (Lanczos3)“) sollten beim Verkleinern ausprobiert werden. Das beste Ergebnis entscheidet die Filterauswahl.
Nach dem Verkleinern sollte das Bild nachgeschärft werden. Unter FILTER -> VERBESSERN -> SCHÄRFEN kann man den Gimp-Standard-Filter nutzen. Leider ist die Qualität oft nicht ausreichend.
Tipp: Probiert „FILTER -> VERBESSERN -> UNSCHARF MASKIEREN“ aus. Klingt nicht nach schärfen, bringt aber deutlich bessere Ergebnisse. Meist genügen Radius-Werte von 0,9 und Menge 0,20. Einfach einmal ausprobieren.
Tipp „Refocus Plugin“: Ein nachladbares Gimp-Plugin ist „Refocus“. Folgt dem Link für eine weitere Beschreibung. Wer den Plugin-Ordner in GIMP sucht – am Ende des Artikels folgt auch hierzu ein Tipp.
Bild Dateigröße mit GIMP verkleinern
Wenn wir das Bild in der richtigen Größe haben, kann man das Bild einfach als JPG oder PNG speichern und gut – wenn es nur so einfach wäre. Wenn wir nicht das letzte Bit herausquetschen müssen, können wir JPG-Bilder mit einer Rate von 90%, PNG-Bilder mit einer Kompressionsrate von 7 speichern. Kleiner werden JPG-Dateien bei einer kleineren, PNG mit einer höheren Rate. In jedem Fall leidet aber die Qualität.
Deutlich keiner werden die Bilder, wenn man die Farben reduziert. Unter BILD -> MODUS -> Indiziert kann man die Bildfarben mit der Auswahl „Optimale Palette erzeugen“ auf maximal 256 Farben reduzieren. Die Bilder werden deutlich keiner. Noch kleiner werden die Bilder mit der „Internet-optimierten Palette“. Aber Achtung: Fotos werden hiermit schnell unansehnlich. Gerade Farbverläufe leiden hier ganz extrem.
Tipp: Die Rasterung ausprobieren! Der Filter „Floyd-Steinberg (reduzierte Farbbluten)“ liefert oft ein noch an „ansehnliches“ Ergebnis.
Ausprobieren oder eine automatisierte Lösung? Das Save for Web Plugin!
Wie wir sehen, gibt es leider keine „Ich drücke eine Button“-Lösung. Es gibt Anhaltspunkte und Richtlinien, doch wer das letzte Bit bei einer Grafik einsparen möchte, muss viele Möglichkeiten testen. Um einen Eindruck von Kompressionsrate und Zielformat er erhalten, kann das Plugin „Save for Web“ installieren. Dies blendet unter DATEI den Punkt „Save for Web“ ein und lässt die Möglichkeit zu, das Ergebnis einer Kompression in einer Vorschau zu bewerten. Gleichzeitig berechnet das Plugin vor dem Speichern schon die Dateigröße. Somit kann man sich viele Speicherversuche sparen.
Plugin-Ordner einer Gimp-Installation finden
Wer ein Script oder ein Plugin in Gimp hinzufügen will, muss lediglich die Datei in das richtige Verzeichnis kopieren. Doch wo ist der richtige Ordner? Gimp liefert darüber freiwillig Auskunft: Unter BEARBEITEN -> EINSTELLUNGEN kann man in der linken Spalte den Eintrag „ORDNER“ (auch in Plus davor) sehen. Hier ist der Pfad zum Plugin- sowie Skript-Ordner ersichtlich.