Es ist euch sicher schon aufgefallen, dass die Ladezeiten von Internetseiten sehr von der Anzahl und Größe der verwendeten Bilder und Grafiken abhängt. Dabei sind diese am einfachsten zu optimieren.
NOF bietet zwar die Möglichkeit unter den Bildeigenschaften die Optimierung von Bildern an, liefert aber dabei nur befriedigende Ergebnisse. Auch das Skalieren (Geometrie in den NOF-Bildeigenschaften) sollte man besser lassen. Diesen Hinweis habt ihr aber sicher schon öfter gelesen.
Wie ihr diese mit GIMP optimiert und auf die Endgröße skaliert, möchte ich euch nun zeigen. Außerdem behandeln wir in diesem Kapitel das Öffnen/Speichern von Bildern mit GIMP und schauen uns die Vor- und Nachteile einiger Dateiformate an.
Wie bekomme ich mein Bild in GIMP – Dateien öffnenViele Wege führen nach Rom.
Ich möchte mich hier aber auf den Weg in GIMP beschränken.
Den <Öffnen>-Dialog findet ihr in der Menüleiste oder wie schon erwähnt im Kontextmenü des Arbeitsfensters. Oder ihr benutzt den Shortcut
STRG+O.
Es öffnet sich das <Bild öffnen>-Fenster.
In diesem Fenster könnt ihr ähnlich, wie im Windows Explorer navigieren. Es gibt dort aber noch zusätzliche Elemente, die wichtig sind. Zuerst einmal bekommt ihr rechts eine Vorschau des Bildes angezeigt, je nach Größe des Bildes kann die Erstellung der Vorschau ein wenig dauern.
Oben bekommt ihr den kompletten Pfad des geöffneten Ordners als Buttons angezeigt, damit kommt ihr wieder zurück in die übergeordneten Ordner. Links davon ist ein Button mit einem Blatt Papier und einem Stift. Klickt ihr auf diesen Button, wird eine Adresszeile eingeblendet, dort könnt ihr auch den Pfad direkt eingeben, wenn ihr wollt.
Es gibt zwei Elemente, die man verwechseln kann.
Ein ein Dropdown-Menü rechts unten und eine minimierte Listbox.
Mit dem Dropdown-Menü könnt ihr innerhalb des <Bild öffnen>- Fensters nur .png-Dateien anzeigen lassen oder nur .jpg-Dateien usw.
Die Listbox unten links ist normalerweise ausgeblendet. Es ist nur ein Pluszeichen und der aktuell gewählten Einstellung zu sehen. Normalerweise sollte dort „Dateityp automatisch bestimmen“ stehen.
Wenn ihr auf das Pluszeichen klickt, wird die Listbox eingeblendet. Dort kann man einstellen, wie die Datei geöffnet werden soll. Dazu muss ich ein kleines bisschen die Architektur von GIMP erklären. GIMP öffnet nur seine eigenen xfc-Dateien selber, alle anderen Formate werden über Plugins geöffnet. Die hat den Vorteil das GIMP immer wieder neue Formate „lernen“ kann ohne das das Hauptprogramm umgeschrieben werden muss. Ich weiß es ist ein bisschen verwirrend, da die Plugins schon mit GIMP ausgeliefert werden und man es normalerweise nicht bemerkt. Normalerweise solltet ihr diese Einstellung auf automatisch bestimmen stehn lassen. Ihr braucht das wirklich nur bei ganz exotischen Formaten und Dateiendungen.
Aber machen wir weiter, wählt euer Bild aus und klickt auf Öffnen.
Das Bild für das Web optimierenWir ihr ein Bild grundlegend bearbeitet und optimiert zeige ich euch an einem Beispiel.
Aktuell habe ich in meinen Arbeitsfenster, das ihr im Screenshot seht, ein Bild von einer Skulptur geöffnet. Falls ihr Informationen über ein Bild anzeigen wollt. Klickt im Menü/Kontextmenü auf Bild>Bildeigenschaften.
www.daniel-klas.de/Oeffentlich/rumgenoft/GIMP_Tut/pre_Bild_opti1.JPG" vspace="0" hspace="0" align="top" border="0" alt="" title="">
Wenn ihr ein Bild geöffnet habt, verändert sich der Titel des Arbeitsfensters und der Statusleiste.
Im Titel steht der Bildname und bei mir jetzt importiert, weil ich eine jpg-Datei geöffnet habe.
In der Statusleiste habt ihr jetzt einen Button zum Einstellen der verwendeten Maßeinheit und ein Dropdownfeld zum Anpassen der Vergrößerung. Die Einstellung der Vergrößerung und ein paar andere Funktionen findet ihr im Menü/Kontextmenü unter Ansicht>Vergrösserung.
Wenn ihr euch das Bild betrachtet, seht ihr gleich das Es um 90 Grad nach links gedreht werden muss.
Hierzu klickt im Menü/Kontextmenü auf Bild>Transformation>Um 90° gegen den Uhrzeigersinn drehen.
Hier stehen euch auch noch einige ander Optionen zur Verfügung wie z.B. spiegeln.
Wenn ihr den Befehl angeklickt habt, seht ihr einen Fortschrittsbalken in der Statusleiste.
Das Ergebnis sieht nun so aus:
Gewöhnt euch bitte an zwischendurch abzuspeichern, GIMP ist zwar ein robustes Stück Software aber es kann auch mal zum Absturz kommen. Klickt hierzu im Menü/Kontextmenü auf Datei>Speichern. Jetzt muss ich wieder eine kurze Info dazwischen schieben: Seit GIMP 2.8.0 kann man nur noch im GIMP-eigenen xfc-Format speichern. In den xfc-Dateien sind alle Arbeitsdaten wie Ebenen, Kanäle, Pfade usw. gespeichert also fast alles außer dem Journal. Früher konnte man auch in andere Formate speichern allerdings gehen dabei die meisten eben genannten Informationen verloren. xfc taugt für das Web nichts, dafür benutzt man andere Formate aber dazu gleich mehr.
Das <Speichern>-Fenster ist ähnlich dem <Bild öffnen>-Fenster ihr habt aber zusätzlich in der rechten oberen Ecke einen Button zum Anlegen von Ordnern.
Gebt eurer Datei einen aussagekräftigen Namen, also nicht Bild1, sonder z.b. diehuelle.
Damit ihr sie später wiederfindet. Das xfc wird von GIMP automatisch angefügt.
Versucht ihr eine andere Endung wie z.B. jpg anzugeben, bekommt ihr eine Fehlermeldung.
Und weiter mit dem skalieren des Bildes.
Mein Bild ist mit 2976 × 3968 Pixel ein „wenig“ zu groß. Das Bild soll ja in mein Layout passen.
Also bei mir soll dieses Bild jetzt mal 400px breit werden.
Um ein Bild zu skalieren, klickt im Menü/Kontextmenü auf Bild>Bild skalieren.
Es öffnet sich das Fenster <Bild skalieren>
Hier gibt es wieder einiges das erklärt werden sollte.
Zunächst haben wir erst einmal die Bildgröße, in den Eingabefeldern steht zurzeit die aktuelle Bildgröße. Breite und Höhe sowie X- und Y-Auflösung als Paare übereinander. Neben den Eingabefeldern seht ihr ein Kettensymbol, wenn man darauf klickt, wird die Kette geschlossen oder getrennt. Die geschlossene Kette bedeutet das die beiden Eingabefelder proportional zueinanderstehen. Das heißt, das Bild wird gleichmäßig skaliert, GIMP rechnet euch dann auch das andere Eingabefeld gleich mit aus. Wenn ihr nicht proportional skaliert zieht das Bild gedehnt oder gedrückt aus.
Dan gibt es in diesem Fenster noch den Punkt Qualität.
Hier findet ihr ein Dropdownmenü mit dem klingenden Namen „Interpolation“.
Interpolation ist ein mathematisches Verfahren. Es dient dazu eine lückenhafte Folge von Werten mit neu errechneten Werten in den Lücken zufüllen. Auf die einzelnen mathematichen Grundlagen der verschieden Verfahren möchte ich nicht genauer eingehen, da dies eine Wissenschaft für sich ist.
Die beste Kantenschärfe bringt die lineare Interpolation, hier entstehen aber schnell sichtbare Treppen bzw. Blockansätze. Das kubische Verfahren kann man verwenden, um die Schärfe von Grafiken beim Skalieren zu verbessern, allerdings wird die Kantenschärfe nie besser werden als die des Originals. Sinc stellt eine Mischung aus linear und kubisch da.
Begnügen wir uns mit der Aussage, dass kubisch für Fotos meistens die beste Wahl ist.
Wie schon erwähnt will ich eine Breite von 400px, diese gebe ich in das Eingabefeld ein und die Kette ist geschlossen, GIMP errechnet mir nun automatisch die Höhe von 533px.
An der Auflösung stellen wir auch noch ein wenig, um das Bild weiter zu verkleinern.
Für das Web reicht meistens eine Auflösung von 72ppi (pixel per inch) eine größere Auflösung macht nur bei Produktfotos, die auch gedruckt werden, sollen wirklich sinn.
Hier nochmal meine Einstellungen zum Skalieren des Bildes.
Nach dem Klick auf <Skalieren> erscheint wie beim drehen in der Statusleiste der Fortschrittsbalken.
Danach seht ihr wieder das Bild im Arbeitsfenster allerdings kleiner wie zuvor da GIMP die Vergrößerung des Arbeitsfensters nicht angepasst hat. Wenn ihr das Bild in im Endformat sehen wollt, müsst ihr die Vergrößerung auf 100% stellen.
Exportieren des Bildes in einem webtauglichen FormatBevor wir uns mit dem Export befassen, müssen wir uns noch die grundlegenden Eigenschaften der verschiedenen webtauglichen Formate betrachten.
Fangen wir mit dem wohl bekanntesten an, dem
JPG-Format.
Bei JPG werden Bilder in RGB-Farben gespeichert und sie können Komprimiert werden, je stärker die Komprimierung desto schlechter die Bildqualität. JPG kennt keine Transparenz.
GIFBeim GIF-Format können nur 256 Farben von einer indexierten Farbpalette genutzt werden,
mit diesem Format können aber transparente Bilder und Animationen gespeichert werden.
PNGMit PNG können Bilder in RGB-Farben gespeichert werden und ebenso Transparenz genutzt werden. PNG setzt ein verlustfreies Kompremierungsverfahren ein das sich nicht auf die Bildqualität auswirkt. Allerdings werden die Dateien meistens nicht so klein wie bei JPG.
Außerdem hatte der InternetExplorer 6 Probleme bei der Darstellung von PNG.
Exportiren wir nun unser Bild .
Dazu klicken wir auf Datei>Exportieren, es öffnet sich nun ein Fenster mit dem Titel <Bild exportieren> , dieses unterscheidet sich bis auf den Unterschied der freien Formatwahl nicht vom <Speichern>-Fenster.
Unten links in der Ecke finden wir wieder ein Pluszeichen. Dahinter sollte „nach Endung“ stehen.
Die führt dazu das wenn wir als Dateiname "Bildname.jpg" als JPG exportiert bei und bei "Bildname.gif" in das GIF-Format exportiert wird usw.
Wenn ihr dies so nicht nutzen wollt, könnt ihr mit einem Klick auf + auch das Auswahlfeld für die verschiedenen Formate einblenden und euch das passende Format auswählen.
Ich nehme jetzt mal in meinem Beispiel das JPG-Format .
Nach einem Klick auf exportieren wird das entsprechende Plugin aktiv, den GIMP exportiert in andere Formate auch nur über Plugins.
Export im JPG-FormatEs erscheint nun folgendes Fenster.
Hier könnt ihr mit dem Schieberegler die Qualität des erzeugten Bildes einstellen.
100 wäre hierbei die beste Qualität und 0 die Schlechteste.
Die Qualität wirkt sich auf die Dateigröße aus.
Wenn ihr ein Häkchen bei "Vorschau im Bildfenster" setzt, bekommt ihr eine Vorschau und die wahrscheinliche Dateigröße angezeigt.
Mt dem Klick auf <Export> wird nun die Datei gespeichert.
Export im PNG-FormatEs öffnet sich ein neues Fenster.
Hier gibt’s wieder einige Optionen.
Interlacing (Adam 7) Ist hier ein Häkchen gesetzt, wird das Bild progressiv aufgebaut, das heißt dass heißt, dass das Bild erst unscharf und grob und je nachdem wie viel geladen ist, Bild erst unscharf und grob und je nachdem wie viel geladen ist als feiner dargestellt wird.
Hintergrundfarbe speichern Ein Häkchen hier bewirkt das die Hintergrundfarbe das die aktive Hintergrundfarbe von GIMP mitgespeichert wird. Ansonsten wird grau verwendet. Diese Einstellung wird für schlechte Webbrowser die nur mit zwei Transparenzwerten klar kommen gebraucht (ich sage nur IE6).
Grau würde in den meisten fällen bescheiden aussehen.
Gamma-Faktor speichernHier wird die Helligskeitseinstellung von eurem Bildschirm mitgespeichert.
Anhand des Wertes wird Darstellung auf anderen Geräten angepasst.
Layerversatz speichernBitte aktiviert dies Option nicht, sondern lasst GIMP die verschieden Ebenen zusammenfügen.
Auflösung speichernHier wird noch die Auflösung gespeichert, ist aber nur für den Druck wichtig.
Erstellungszeit speichernIst eigentlich selbsterklärend, meint man. Es ist aber der Wert gemeint, an dem das Bild das letze mal gespeichert wurde.
Kommentar speichernDas Kommentar das ihr in den Bildeigenschaften angeben könnt, Standard bei GIMP ist „Created with GIMP “. Wenn kein Kommentar hinterlegt ist diese Checkbox ausgegraut.
Und dann gibt es noch den Schieberegler für den Kompressionsgrad.
Mit diesem wird die Kompression von 0-9 geregelt. 0 ist hierbei keine Kompression und 9 ist die maximale Kompression. Hier könnt ihr ruhig die maximale Kompression auswählen da dies sich nicht auf die Bildqualität auswirkt. Lediglich das Erstellen der Datei dauert länger.
Die Standarteinstellungen von GIMP können so wie sind genutzt werden.
Export im GIF-FormatDas lass ich mal komplett aus, weil es selbsterklärend ist.
Das sollte jetzt eigentlich das Grundlegende dazu gewesen sein, das optimale Dateiformat, Größe, Kompression müsst ihr je nach Verwendungszweck selbst wählen.
Und wie schon geschrieben habe, speichert zwischendurch ab. Und überschreibt bitte niemals beim Export euer original.