Dateiformate und Dateigrößen: Was Autoren künftig stärker berücksichtigen sollten.

Einstieg in die digitale Bildbearbeitung mit Gimp 2.8 – Als Taschenbuch oder eBook

Content Management Systeme bieten auch dem Laien eine komfortable Möglichkeit, Inhalte im WWW zu gestalten und veröffentlichen. Fotos, Grafiken, selbst Videos zu erstellen und einem (hoffentlich) breiten Publikum zugänglich zu machen.

Die Anbindung heimischer Netzwerke mit großen Bandbreiten ins Internet ist für weite Regionen selbstverständlich. Webdesigner und Programmierer mussten in der Folge immer weniger Rücksicht auf knappe Bandbreitenressourcen nehmen. Die zunehmende Verbreitung mobiler Nutzung unterwegs stellt diesen nachlässigen Umgang mit Ressourcen in Frage. Je nachdem, wo sich der Nutzer gerade befindet, sind die tatsächlich verfügbaren mobilen Bandbreiten doch sehr limitiert. Der folgende Artikel gibt einen Überblick über die im Netz verwendeten Bildformate und Tipps zu deren Optimierung.

Mein Programm der Wahl ist dabei Gimp, das Flagschiff unter den Open Source Programmen zur digitalen Foto und Grafikbearbeitung. Gimp ist Open Source und steht sowohl für Linux, als auch für Windows und Mac-Rechner kostenfrei zur Verfügung. (Download Gimp here)

Dateiformate im WWW

Für Fotos und Grafiken sind im Web die Dateiformate JPG, GIF und PNG von Bedeutung. Die folgenden beiden Übungen sollen einen kleinen Einstieg in die Welt der Optimierung von Fotos und Grafiken bieten und Ihnen bei einer ersten Orientierung in diesem wunderbaren Programm helfen.

Übung 1: Optimiertes Hintergrundbild für unterschiedliche Bildschirmauflösungen

Sie haben Gimp erfolgreich auf Ihrem Rechner installiert? Prima, dann laden Sie zunächst das Übungsbild für die erste Übung auf Ihren Rechner und entpacken das ZIP-file. (zum Download) Die folgenden beiden Übungen sind für Anfänger mit Gimp gedacht, sollten Sie bereits mit Ebenen, Werkzeugen, Transparenzen umgehen können, müssen Sie nicht zwingend weiterlesen.

Sinn und Zweck der ersten Übung ist, verschiedene Bildformate für eine Nutzung als Hintergrundbild einer Website zu erzeugen und diese zu optimieren. Gut zu wissen: Hintergrundbilder einer Website können über Mediaqueries für unterschiedliche Bildschirmgrößen optimiert werden. Dazu an anderer Stelle mehr.

Starten Sie nun Gimp und laden mit dem Befehl ->Datei->Öffnen die Datei in Gimp. Links oben sehen Sie, dass das Foto eine Auflösung von 5184 * 3465 Pixel hat. Ziel der Übung ist, vier verschiedene, optimierte Bildgrößen für unterschiedliche Bildschirmauflösungen herzustellen und dabei die Dateigrößen für die jeweilige Bildschirmklasse möglichst gering zu halten. Die benötigten Bildgrößen sind: 945 * 630, 1800 * 1200 und 3000 * 2000 Pixel. Beginnen wir nun mit dem ersten Hintergrundbild der Größe 3000 * 2000 Pixel. Doch zunächst speichern wir unsere Datei mit ->Datei->Speichern unter im Gimp-eigenen XCF Format ab.

Unter ->Bild->Bild skalieren finden sich die folgenden Möglichkeiten

Screenshot 1: Bild skalieren

Bild skalieren

Trage nun im oberen Feld den Wert 3000 für 3000 Pixel ein (1), sollte die Einstellung daneben nicht auf px stehen, ändere dies bitte zuvor. Drücke anschließend die Entertaste, automatisch wird der untere Wert der Auflösung auf 2000 Pixel eingestellt, sofern Du nicht versehentlich auf das Verkettungssymbol rechts neben den Feldern geklickt hast. Die Auflösung des Bildes (2) kannst Du problemfrei bei 72 Pixel/in (Pixel per Inch) belassen, auch wenn viele Monitore und Displays heute höher auflösen. Ein wichtiger Punkt ist die Interpolation (3). Sie steht standardmäßig auf Kubisch. Gimp bietet vier Interpolationsmöglichkeiten bei der Reduzierung der Auflösung an: Keine, Linear, Kubisch und Sinc (Lanczos3). Die schlechteste Bildqualität liefert logischerweise „Keine“, die beste, aber rechenintesivste „Sinc (Lanczos3)“. „Kubisch“ ist in den allermeisten Fällen ein sinnvoller Kompromiss.

Die Reduktion der Bildauflösung ist jedoch nur der erste Schritt. Mit ->Datei->Exportieren als öffnet sich der nächste Befehlsdialog. Hier kannst Du das passende Verzeichnist wählen und dem geänderten Bild einen Namen mit der Endung _c90.jpg geben. Im darauffolgenden Dialog stellst Du die Kompressionsrate für die Datei ein.

Screenshot 2: Kompressionsrate bei JPG Dateien einstellen

Stelle hier zunächst die Kompressionsrate auf den Wert 90 (deshalb die Dateiendung _c90.jpg), so kannst Du später am fertig exportierten Bild weitere Vergleiche ziehen. Exportiere nun das gleiche Bild, diesmal aber mit der Kompressionsrate 50 und benenne die Datei entsprechend. Das gleiche Procedere, diesmal aber mit der Kompressionsrate 30.

Wenn Du nun die erhaltenen Dateigrößen betrachtest, siehst Du gravierende Unterschiede. Das kleinste Bild hat mit gerade einmal 221 kb weniger als ein Drittel des Volumens des größten Bildes mit 825 kb.  Und das bei gleicher Auflösung, lediglich die Kompressionsrate wurde geändert. Betrachte nun die drei Bilder im Browser, natürlich ist die Qualität des am stärksten komprimierten Bildes etwas schlechter, als die des am wenigsten komprimierten.

Deshalb mein erster Tipp: Es lohnt mitunter, mit mehreren Kompressionsraten zu experimentieren, um den bestmöglichen Kompromiss zwischen Qualität und Datenmenge zu finden.

Fotos werden grundsätzlich im JPG-Format gespeichert und im Web veröffentlicht, bei Grafiken, wie beispielsweise einem Unternehmenslogo, ist das nicht so selbstverständlich. (Natürlich könnte man ein Foto als im PNG Format speichern, aber das wäre hinsichtlich der enthaltenen Datenmenge ausgesprochen kontraproduktiv.)

Übung 2: Ein einfaches Logo gestalten

In der zweiten Übung gestalten wir ein sehr einfach gehaltenes Logo wie das obige Schriftlogo. Dabei werden wir einen ersten Einblick erhalten, welche Möglichkeiten Gimp bei der Arbeit mit Ebenen bietet.

Mit dem Befehl ->Datei->Neu erstellen wir zunächst eine neue Datei im Format 400*150 Pixel. Der Hintergrund ist, sofern nicht zuvor geändert, weiß gehalten, was uns momentan noch nicht stört. Die Schrift soll einheitlich in zwei unterschiedlichen Größen und Farben gehalten werden, die Schriftart bleibt gleich. Über die Auflösung brauchen wir uns bei Webgrafiken keine Gedanken zu machen, diese belassen wir auf dem Standardwert von 72 Pixeln.

Screenshot 3: Neue Datei erstellen und bearbeiten

Screenshot 3: Neue Datei erstellen

Auf der linken Seite findet sich die Werkzeugpalette und die Funktion zum Einstellen und Ändern von Vordergrund- und Hintergrundfarbe (1). Oberhalb, in der Werkzeugpalette, befindet sich das Textwerkzeug (2). Beim Überfahren der einzelnen Symbole mit der Maus werden die Bedeutungen der einzelnen Werkzeuge eingeblendet.

Rechts, neben der Arbeitsfläche mit der Datei befindet sich das Ebenendock (3) und darunter die derzeit existierenden Ebenen (4). Wähle zunächst unter (1) die präferierte Farbei für den Text und klicke anschließend auf das Werkzeug zur Texterstellung (2). Unter dem Werkzeugfenster öffnet sich nun der Dialog mit den möglichen Einstellungen für den ersten Text.

Sreenshot 4: Einen ersten Text einstellen

Nun kann unter (5) die Schriftart, die Schriftgröße, die Ausrichtung des Textes gewählt werden, die Einstellung für Hinting und Kanten glätten bitte auf dem Standard belassen. Klicke nun in der Arbeitsfläche mit dem Textwerkzeug auf die weiße Fläche und gib den Buchstaben P ein. Rechts oben im Ebenendock wird die neue Ebene mit dem Textsymbol sichtbar. Gimp legt die neue Ebene automatisch an, solange die Textebene nicht gerendert, also beispielsweise gedreht oder verzerrt wird, verbleibt der Text als SVG Grafik und kann problemfrei verändert oder weiter mit dem Textwerkzeug bearbeitet werden. Im Beispiel habe ich nur den Buchstaben P in 50 Pixeln und der Schriftart Sans Bold angelegt.

Screenshot 5: Eine Ebene auf der Arbeitsfläche bewegen

Auf der linken Seite im Werkzeugkasten befindet sich das Bewegen-Werkzeug (7). Mit Klick auf das Werkzeug zur Aktivierung öffnen sich darunter die Werkzeugeinstellungen. Hier sollte „Aktive Ebene verschieben“ (8) angeklickt werden. Vergewissern Sie sich vor dem Verschieben, ob tatsächlich die Textebene und nicht die Hintergrundebene aktiv ist, das sehen Sie im Ebenendock (9). Die jeweils aktive Ebene ist farblich von den anderen Ebenen unterschieden. Fahren Sie nun mit dem „Bewegen-Werkzeug“ auf das große P in der Arbeitsfläche und verschieben dieses nach links oben.

Der nächste Schritt ist nun eine weitere Textebene zu erstellen. Gehen Sie hierzu wieder auf das Textwerkzeug und klicken an beliebiger Stelle auf die Arbeitsfläche, jedoch nicht auf das zuvor erstellte P. Bei den Einstellungen für das Textwerkzeugen halbieren Sie die Größe, in meinem Beispiel von 50 auf 25 Pixel. Alle anderen Einstellmöglichkeiten bleiben unverändert. Geben Sie nun den Text „rogrammierung und“ ein. Noch sieht unsere Konstruktion leicht wüst aus, das ändern wir im folgenden Schritt. Keine Sorge, selbst wenn ein Teil des Textes noch ausserhalb der Arbeitsfläche verschwunden scheint, er ist vollständig erhalten.

Screenshot 6: Verschiedene Ebenen aneinander ausrichten

Sicher haben Sie es schon gesehen, im Werkzeugkasten befindet sich eine Lupe um auf einen speziellen Teilausschnitt innerhalb der Arbeitsfläche zu vergrößern, am unteren Rand kann die Ansicht ebenfalls prozentual vergrößert oder verkleinert werden. In unserem Beispiel habe ich unten eine Vergrößerung auf 400% der aktuellen Ansicht gewählt und den Ausschnitt auf das P gerichtet. Eine ausgesprochen praktische Erfindung sind die magnetischen Hilfslinien in Gimp, die Sie über die Lineale oben und links (11) einfach auf die Arbeitsfläche ziehen können. Im Beispiel hier wurde eine Hilfslinie aus dem oberen Lineal auf die Arbeitsfläche gezogen und direkt genau unter das P plaziert (12). Das sollte in etwas so aussehen, wie im Screenshot.

Nun klicken Sie, wenn nicht ohnehin schon aktiv, wieder auf das „Bewegen-Werkzeug“, vergewissern sich, dass die Ebene mit dem zuletzt hinzugefügten Text aktiv ist, und verschieben den Text auf die Höhe des P. Die magnetische Hilfslinie erleichtert die Ausrichtung ungemein.

Nachdem Sie diesen Schritt realisiert haben, produzieren Sie in gleicher Weise ein großes D und ein kleineres „esign“ und richten diesen Textbestandteil ebenfalls aneinander aus.

Tipp: Ebenen lassen sich mit Klick auf das Symbol neben den Augen miteinander verketten. So können Sie zwei und mehr Ebenen zusammen verschieben, obwohl diese nach wie vor getrennte Einheiten sind und jederzeit mit Klick auf Verkettensymbol im Ebenendock wieder getrennt werden können.

Nun haben Sie die Schriftelemente auf einem weißen Hintergrund auf insgesamt 4 Schriftebenen, die zueinander ausgerichtet sind. Klicken Sie nun auf das Augensymbol der Hintergrundebene. Statt eines weißen Hintergrunds erhalten Sie nun ein schachbrettartiges Muster. Sieht Ihre Seite wie beschrieben aus? Prima, dann gehen wir jetzt einen Schritt weiter.

Screenshot 7: Sichtbare Ebenen zu einer neuen Ebene vereinen

Klicken Sie nun, nachdem der weiße Hintergrund ausgeblendet wurde, mit der rechten Maustaste auf eine der aktiven, sichtbaren Schriftebenen im Ebenendock und wählen Sie „Neu aus Sichtbarem“. Dies klicken Sie an. Gimp hat nun alle sichtbaren, mit Augensymbol versehenen Ebenen, zu einer neuen Ebene mit der Ebenenbezeichnung „Sichtbar“ zusammengefügt. Dabei wurden die Textebenen gerendert. Klicken Sie nun die oberste Ebene mit dem Titel „Sichtbar“ an, auf diese können wir nun einen weiteren Arbeitsschritt anwenden.

HInweis: Sie hätten sich diesen Schritt eventuell ersparen können, indem Sie die oberen mit der jeweils unteren Ebene vereinen. Das hier vorgeschlage Verfahren hat den Vorteil, dass die ursprünglich erstellten Ebenen erhalten bleiben und somit, sollte ein Änderungswunsch entstehen, die sichtbare Gesamtebene einfach gelöscht und die Subebenen weiter bearbeitet werden können. Andernfalls müssten alle Schritte neu wiederholt werden.

Wählen Sie nun im Menü unter ->Filter->Licht und Schatten->Schlagschatten aus und Sie sollten folgendes Fenster erhalten:

Screenshot 8: Einen Schlagschatten hinzufügen

Im Beispiel habe ich den Schlagschatten in X- und Y-Richtung um jeweils 8 Pixel, den Weichzeichenradius auf 15 Pixel und die Deckkraft auf 60% eingestellt. Mit Klick auf OK erzeugen Sie nun eine neue Ebene mit dem Schlagschatten – et voilá.

Wir haben also nun eine einfache Grafik mit Text und Schatten für einen dreidimensionalen Effekt erstellt. Nun muss die Grafik nur ins richtige Format exportiert werden, dann können wir die Schrift über einem Hintergrund auf der Website schweben lassen.

Das .JPG Format eignet sich hier definitiv nicht, da das Format sich nicht auf Transparenzen versteht. Wir brauchen also ein anderes Format. Zur Verfügung stehen hier entweder das GIF oder das PNG Format. Beide haben ihre Vor- und Nachteile. Das GIF Format versteht sich nur auf 256 Farben, dafür ist aber die Dateigröße etwas kleiner als bei einem PNG-Format. Letzteres ist weitaus feiner und in meinem Fall die Wahl, auch wenn einige Bytes mehr zu Buche schlagen. Exportieren Sie nun die erstellte Grafik mit der Endung .png in Ihr Arbeitsverzeichnis. Nun können Sie das Logo, obwohl einfach erstellt, über Ihren Hintergrund auf der Website schweben lassen.

Natürlich ist es im Rahmen eines solch kleinen Artikels nicht möglich, einen vollständigen Überblick über Gimp zu geben. Aber wenn Sie sich einarbeiten wollen, dann empfehle ich doch an dieser Stelle mein Übungsbuch über Gimp, das auch Einsteigern eine Hilfe sein kann und, wie ich mittlerweile erfahren habe, sogar an Schulen als Lehrmaterial verwendet wird.

Zum nächsten Artikel


Ich hoffe, Sie haben auf meiner Seite wertvolle Anregungen und Informationen erhalten.

Wenn Sie über Änderungen und neue Inhalte informiert werden möchten, abonnieren Sie doch einfach meinen Newsletter.