Xmas
2004-02-02, 02:00:23
Dieser Leitfaden soll erklären wie man Bilder im Netz veröffentlicht, welche Tools und Arbeitsschritte man dazu braucht und wie man optimale Ergebnisse mit minimalem Datenaufkommen erreicht.
Hinweise, Korrekturen und Erweiterungen sind natürlich gern gesehen und werden wenn möglich eingearbeitet.
Fangen wir erst mal beim Wesentlichen an ...
0. Grundsätzliches / Wozu dient mein Bild?
Das ist wohl immer die erste Frage, die man sich stellen sollte. Welchen Sachverhalt möchte ich damit verdeutlichen?
Ist es eine Dialogbox, in der der Text leserlich sein soll, ein Diagramm das mit Formen und Farben Dinge erklärt, oder gar ein Foto mit riesigem Farbumfang? Daran knüpfen sich alle weiteren Entscheidungen, von der Wahl der Bildgröße über das Zuschneiden der wichtigen Bereiche bis zur Auswahl des geeignetsten Dateiformats.
Auch wenn das Sprichwort "ein Bild sagt mehr als Tausend Worte" lautet, ist das doch eher eine grobe Faustregel denn ein Gesetz. Statt einen Screenshot einer Dialogbox mit ein wenig Text zu machen, kann es oft viel einfacher und praktischer sein, den Text abzutippen. Das gleiche gilt für kurze eingescannte Texte.
Bilder machen einen erheblichen Teil des Traffic im Internet aus. Deswegen muss die Devise lauten: Sparen wo es möglich ist. Eine Dialogbox sagt nicht mehr aus, wenn dahinter ein buntes Wallpaper zu sehen ist. Und die wenigsten Leute bekommen einen 1600x1200-Screenshot in einem Stück auf den Bildschirm.
1. Wie mache ich einen Screenshot?
Existiert das Bild, das man veröffentlichen will schon, kann man dieses Kapitel überspringen und mit Punkt 2 fortsetzen.
Auf dem Windows-Desktop: Möchte man ein Bild des gesamten aktuellen Desktops speichern, drückt man einmal auf die "Druck / S-Abf"-Taste, die sich auf den meisten Tastaturen neben der F12-Taste befindet. Möchte man nur ein Bild des aktiven Fensters machen, so muss man die Alt-Taste gedrückt halten, während man die Druck-Taste betätigt.
Das Bild befindet sich nun in der Zwischenablage und kann auf dem üblichen Wege (Strg-V oder "Einfügen" im Menü "Bearbeiten") in vielen Programmen eingefügt werden.
Hinweise: Der Mauszeiger wird beim Screenshot ausgeblendet, ist also nicht zu sehen. Bei Fenstern die nicht rechteckig sind, wird natürlich trotzdem ein rechteckiger Ausschnitt des Bildschirminhalts genommen. So ist ein entsprechend großer Bereich des Hintergrunds zu sehen, ebenso erscheint natürlich bei transparenten Fenstern der Hintergrund.
In Spielen: In manchen Spielen funktioniert das Benutzen der Druck-Taste wie oben beschrieben nicht. Viele Spiele haben eine eigene Screenshot-Funktion, bei der der Screenshot auch gleich verlustfrei in einer Datei gespeichert wird. Dies geschieht meist über eine der F-Tasten oder eben die Druck-Taste.
Hinweise: Es kann vorkommen dass Screenshots aus Spielen bei der Betrachtung viel zu dunkel erscheinen. Dies liegt an den Gamma-/Helligkeits-Einstellungen, welche erst bei der Ausgabe auf den Monitor zum Einsatz kommen. Die Daten im Framebuffer werden dadurch jedoch nicht beeinflusst. Manche Spiele passen die Bilddaten beim Auslesen aus dem Framebuffer entsprechend an, andere tun dies nicht. Wenn man dann beim Spielen z.B. einen Gamma-Wert von 1.8 verwendet, auf dem Desktop aber 1.0, erscheinen die Bilder zu dunkel.
Zudem kann es vorkommen, dass ein Screenshot nicht dem tatsächlich dargestellten Bild entspricht. Dies ist insbesondere bei Antialiasing möglich. Wenn also auf einem Screenshot kein Antialiasing zu sehen ist, sollte man daraus noch nicht sofort schließen, dass Antialiasing tatsächlich nicht aktiv war.
2. Bearbeitung
Nachdem man nun also ein Bild entweder in der Zwischenablage oder im Spiel-Verzeichnis gespeichert hat, startet man ein Bildbearbeitungsprogramm und fügt den Inhalt der Zwischenablage als neues Bild ein oder öffnet die entsprechende Datei.
Welches Programm soll ich nehmen?
Für die meisten Zwecke muss es kein teures Bildbearbeitungsprogramm sein, Photoshop, Paint Shop Pro und Konsorten schießen weit über das Ziel hinaus.
Wichtig sind vor allem die Möglichkeiten zum Vergrößern und Verkleinern, Zuschneiden (Crop), Farbkorrektur, Farbreduzierung und umfangreiche Speichermöglichkeiten. Einige Bildbetrachter bieten diese Funktionen (Liste von geeigneten Programmen erwünscht!), ebenso mit Einschränkungen der MS Photo Editor, der mit MS Office kommt. Nicht geeignet dagegen ist MS Paint, das mit Windows kommt, und dessen Speichermöglichkeiten absolut ungenügend sind.
Wieso eigentlich Bearbeitung?
Hier kommen die Betrachtungen aus Punkt 0 zum Zuge. Was soll das Bild aussagen?
Sind überhaupt alle Teile des Bildes relevant? Geht es nicht auch kleiner/weniger bunt? Ist Graustufendarstellung eine Option? Soll ein Detail hervorgehoben werden? Ist das Bild zu hell/dunkel? Wenn man eine dieser Fragen mit "Ja" beantworten kann, sollte man das Bild bearbeiten.
Unwichtige Bildteile entfernen: Immer auf das wesentliche Konzentrieren! Breite Rahmen braucht man genausowenig wie Fenster oder Hintergrundbilder, die nichts zur Aussage beitragen. Hierzu bieten alle vernünfigen Bildbearbeitungsprogramme die Zuschneide- oder auch Crop-Funktion an. Dabei markiert man einen Rechteckigen bereich, der erhalten bleiben soll, alles andere wird verworfen. Gibt es mehrere interessante Bereiche, so sollte man darüber nachdenken ob man nicht mehrere Bilder erstellt. Dazu dupliziert man das Bild so oft wie nötig und schneidet in jedem Duplikat jeweils einen interessanten Bereich zu.
Zeitaufwand: 10 - 20 Sekunden pro Bereich
Bildgröße anpassen: Wenn man eine hohe Auflösung fährt, sind Screenshots häufig zu groß für die Betrachtung bei niedrigerer Auflösung. Ein Bild, das man im Netz zeigen will, sollte nur in Ausnahmefällen über ca. 950 Pixel Breite hinausgehen. Sonst werden die Benutzer mit 1024er-Auflösung zum Scrollen gezwungen. Zum Posten hier im Forum sollten es gar noch weniger sein, mehr als 800 Pixel Breite sind unschön. Und das reicht in 95% der Fälle auch locker aus! Nur wenn man ein Bild Pixel für Pixel erhalten will, ist eine Bildgrößenanpassung nicht brauchbar.
Welche Größe noch reicht, kann man durch Trial & Error herausfinden, die Undo-Funktion ist ja nicht weit. Dabei auch an User mit kleineren oder größeren Monitoren denken!
Grundsätzlich sollte man das Seitenverhältnis beibehalten und die "schönste" Verkleinerungsmethode wählen, also "bikubisch", "bilinear" oder "Smart Resize", sofern dies das Programm anbietet.
Zeitaufwand: 20 - 30 Sekunden
Helligkeit anpassen: Helligkeit und Gamma kann man in praktisch allen Bildbearbeitungs-Programmen über eine Menüoption manipulieren. Das Ergebnis sieht man üblicherweise sofort. Nicht übertreiben, bei zu großen Änderungen wird das Bild verwaschen.
Zeitaufwand: 10 - 20 Sekunden
Details hervorheben: Möchte man noch eine Stelle besonders markieren, evtl. Nummern dranschreiben? Dann fix ein Stift-Werkzeug ausgewählt, die Farbe dazu und einen Pfeil oder ein Rechteck gemalt. Das muss wirklich nicht perfekt sein. Textwerkzeuge bieten nicht alle Programme, aber eine Zahl ist schnell auch mit der Maus gemalt.
Zeitaufwand: 10 - 60 Sekunden
Farben reduzieren: Bilder mit kleinem Farbraum sollte man nicht als 24Bit-Image speichern. Bei einem Foto ist kaum was rauszuholen, doch bei einer Dialogbox reichen auch Graustufen oder eine 256-Farben-Palette, häufig gar 16 Farben. Es muss nicht immer Truecolor sein. Der tolle Farbverlauf von Ockergelb nach Giftgrün in der Titelleiste vermittelt auch nicht mehr Informationen.
Bei der Palettengenerierung gibt es unterschiedliche Algorithmen, z.B. Octree oder Median Cut, aber nicht alle Programme bieten diese Einstellungsmöglichkeit. Die Auswahl kann jedoch gut und gerne 30% bei der Dateigröße ausmachen. Zudem sollte man jegliche Art von Dithering, sofern möglich, deaktivieren, denn das ist schlecht für die Kompression. Was am besten ist, ist auch hier durch Trial & Error am besten zu ermitteln.
Dieser Schritt ist bei einigen Programmen mit dem Abspeichern zusammengefasst, z.B. bei Paint Shop Pro in den Export-Optimizern. Bietet das genutzte Programm solch ein Feature, sollte man es auch nutzen, denn dort sieht man sofort Bildqualität und Dateigröße in einem.
Zeitaufwand: 10 - 120 Sekunden
Insgesamt sollte man durch diese Schritte mit einem Zeitaufwand, der von wenigen Sekunden bis maximal ein paar Minuten geht, schon eine deutliche Reduktion der Daten erreichen können. Doch das wirkliche Verkleinern kommt erst ...
3. Speichern
Beim Speichern steht natürlich die Wahl des Dateiformats an erster Stelle. Es gibt eine unüberschaubare Anzahl an Bildformaten, doch für den Einsatz im Internet stehen nur drei wirkliche Alternativen zur Auswahl: JPEG, GIF und PNG (unterteilt in PNG24 für Truecolor und PNG8 mit Palette oder Graustufendarstellung). Dabei hat jedes dieser drei Formate seine Stärken und Schwächen.
Andere Formate sind nicht geeignet. Sie sind proprietär (z.B. PSP), bieten unzureichende Kompression (z.B. BMP) oder werden von aktuellen Browsern noch nicht ausreichend unterstützt (JPEG 2000).
Nachfolgend erst eine Übersicht, wann man welches Format einsetzen sollte, und dann eine Einzelbetrachtung der Formate.
Ich muss ein Bild verlustfrei speichern, z.B. für Bildvergleiche
PNG24
Ich habe ein farbenfrohes Foto oder einen Screenshot aus einem Spiel, der nicht für pixelgenaue Vergleiche herhalten soll
JPEG
Ich will eine kurze Animation speichern
GIF (hierzu benötigt man spezielle Programme)
Ich will eine Dialogbox oder ein farbarmes Fenster speichern, generell ein Bild mit großen einfarbigen Flächen, Diagramme, etc.
PNG8 (GIF als schlechtere Alternative)
Ich will Bilder mit Transparenzinformationen speichern
Wenn nur zwischen vollständig deckend und vollständig Transparent unterschieden werden soll: PNG8 (GIF als schlechtere Alternative)
PNG24 (bzw. PNG32) unterstützt einen vollen Alpha-Kanal. Dieser wird leider zur Zeit vom Internet Explorer ignoriert.
to be continued...
Hinweise, Korrekturen und Erweiterungen sind natürlich gern gesehen und werden wenn möglich eingearbeitet.
Fangen wir erst mal beim Wesentlichen an ...
0. Grundsätzliches / Wozu dient mein Bild?
Das ist wohl immer die erste Frage, die man sich stellen sollte. Welchen Sachverhalt möchte ich damit verdeutlichen?
Ist es eine Dialogbox, in der der Text leserlich sein soll, ein Diagramm das mit Formen und Farben Dinge erklärt, oder gar ein Foto mit riesigem Farbumfang? Daran knüpfen sich alle weiteren Entscheidungen, von der Wahl der Bildgröße über das Zuschneiden der wichtigen Bereiche bis zur Auswahl des geeignetsten Dateiformats.
Auch wenn das Sprichwort "ein Bild sagt mehr als Tausend Worte" lautet, ist das doch eher eine grobe Faustregel denn ein Gesetz. Statt einen Screenshot einer Dialogbox mit ein wenig Text zu machen, kann es oft viel einfacher und praktischer sein, den Text abzutippen. Das gleiche gilt für kurze eingescannte Texte.
Bilder machen einen erheblichen Teil des Traffic im Internet aus. Deswegen muss die Devise lauten: Sparen wo es möglich ist. Eine Dialogbox sagt nicht mehr aus, wenn dahinter ein buntes Wallpaper zu sehen ist. Und die wenigsten Leute bekommen einen 1600x1200-Screenshot in einem Stück auf den Bildschirm.
1. Wie mache ich einen Screenshot?
Existiert das Bild, das man veröffentlichen will schon, kann man dieses Kapitel überspringen und mit Punkt 2 fortsetzen.
Auf dem Windows-Desktop: Möchte man ein Bild des gesamten aktuellen Desktops speichern, drückt man einmal auf die "Druck / S-Abf"-Taste, die sich auf den meisten Tastaturen neben der F12-Taste befindet. Möchte man nur ein Bild des aktiven Fensters machen, so muss man die Alt-Taste gedrückt halten, während man die Druck-Taste betätigt.
Das Bild befindet sich nun in der Zwischenablage und kann auf dem üblichen Wege (Strg-V oder "Einfügen" im Menü "Bearbeiten") in vielen Programmen eingefügt werden.
Hinweise: Der Mauszeiger wird beim Screenshot ausgeblendet, ist also nicht zu sehen. Bei Fenstern die nicht rechteckig sind, wird natürlich trotzdem ein rechteckiger Ausschnitt des Bildschirminhalts genommen. So ist ein entsprechend großer Bereich des Hintergrunds zu sehen, ebenso erscheint natürlich bei transparenten Fenstern der Hintergrund.
In Spielen: In manchen Spielen funktioniert das Benutzen der Druck-Taste wie oben beschrieben nicht. Viele Spiele haben eine eigene Screenshot-Funktion, bei der der Screenshot auch gleich verlustfrei in einer Datei gespeichert wird. Dies geschieht meist über eine der F-Tasten oder eben die Druck-Taste.
Hinweise: Es kann vorkommen dass Screenshots aus Spielen bei der Betrachtung viel zu dunkel erscheinen. Dies liegt an den Gamma-/Helligkeits-Einstellungen, welche erst bei der Ausgabe auf den Monitor zum Einsatz kommen. Die Daten im Framebuffer werden dadurch jedoch nicht beeinflusst. Manche Spiele passen die Bilddaten beim Auslesen aus dem Framebuffer entsprechend an, andere tun dies nicht. Wenn man dann beim Spielen z.B. einen Gamma-Wert von 1.8 verwendet, auf dem Desktop aber 1.0, erscheinen die Bilder zu dunkel.
Zudem kann es vorkommen, dass ein Screenshot nicht dem tatsächlich dargestellten Bild entspricht. Dies ist insbesondere bei Antialiasing möglich. Wenn also auf einem Screenshot kein Antialiasing zu sehen ist, sollte man daraus noch nicht sofort schließen, dass Antialiasing tatsächlich nicht aktiv war.
2. Bearbeitung
Nachdem man nun also ein Bild entweder in der Zwischenablage oder im Spiel-Verzeichnis gespeichert hat, startet man ein Bildbearbeitungsprogramm und fügt den Inhalt der Zwischenablage als neues Bild ein oder öffnet die entsprechende Datei.
Welches Programm soll ich nehmen?
Für die meisten Zwecke muss es kein teures Bildbearbeitungsprogramm sein, Photoshop, Paint Shop Pro und Konsorten schießen weit über das Ziel hinaus.
Wichtig sind vor allem die Möglichkeiten zum Vergrößern und Verkleinern, Zuschneiden (Crop), Farbkorrektur, Farbreduzierung und umfangreiche Speichermöglichkeiten. Einige Bildbetrachter bieten diese Funktionen (Liste von geeigneten Programmen erwünscht!), ebenso mit Einschränkungen der MS Photo Editor, der mit MS Office kommt. Nicht geeignet dagegen ist MS Paint, das mit Windows kommt, und dessen Speichermöglichkeiten absolut ungenügend sind.
Wieso eigentlich Bearbeitung?
Hier kommen die Betrachtungen aus Punkt 0 zum Zuge. Was soll das Bild aussagen?
Sind überhaupt alle Teile des Bildes relevant? Geht es nicht auch kleiner/weniger bunt? Ist Graustufendarstellung eine Option? Soll ein Detail hervorgehoben werden? Ist das Bild zu hell/dunkel? Wenn man eine dieser Fragen mit "Ja" beantworten kann, sollte man das Bild bearbeiten.
Unwichtige Bildteile entfernen: Immer auf das wesentliche Konzentrieren! Breite Rahmen braucht man genausowenig wie Fenster oder Hintergrundbilder, die nichts zur Aussage beitragen. Hierzu bieten alle vernünfigen Bildbearbeitungsprogramme die Zuschneide- oder auch Crop-Funktion an. Dabei markiert man einen Rechteckigen bereich, der erhalten bleiben soll, alles andere wird verworfen. Gibt es mehrere interessante Bereiche, so sollte man darüber nachdenken ob man nicht mehrere Bilder erstellt. Dazu dupliziert man das Bild so oft wie nötig und schneidet in jedem Duplikat jeweils einen interessanten Bereich zu.
Zeitaufwand: 10 - 20 Sekunden pro Bereich
Bildgröße anpassen: Wenn man eine hohe Auflösung fährt, sind Screenshots häufig zu groß für die Betrachtung bei niedrigerer Auflösung. Ein Bild, das man im Netz zeigen will, sollte nur in Ausnahmefällen über ca. 950 Pixel Breite hinausgehen. Sonst werden die Benutzer mit 1024er-Auflösung zum Scrollen gezwungen. Zum Posten hier im Forum sollten es gar noch weniger sein, mehr als 800 Pixel Breite sind unschön. Und das reicht in 95% der Fälle auch locker aus! Nur wenn man ein Bild Pixel für Pixel erhalten will, ist eine Bildgrößenanpassung nicht brauchbar.
Welche Größe noch reicht, kann man durch Trial & Error herausfinden, die Undo-Funktion ist ja nicht weit. Dabei auch an User mit kleineren oder größeren Monitoren denken!
Grundsätzlich sollte man das Seitenverhältnis beibehalten und die "schönste" Verkleinerungsmethode wählen, also "bikubisch", "bilinear" oder "Smart Resize", sofern dies das Programm anbietet.
Zeitaufwand: 20 - 30 Sekunden
Helligkeit anpassen: Helligkeit und Gamma kann man in praktisch allen Bildbearbeitungs-Programmen über eine Menüoption manipulieren. Das Ergebnis sieht man üblicherweise sofort. Nicht übertreiben, bei zu großen Änderungen wird das Bild verwaschen.
Zeitaufwand: 10 - 20 Sekunden
Details hervorheben: Möchte man noch eine Stelle besonders markieren, evtl. Nummern dranschreiben? Dann fix ein Stift-Werkzeug ausgewählt, die Farbe dazu und einen Pfeil oder ein Rechteck gemalt. Das muss wirklich nicht perfekt sein. Textwerkzeuge bieten nicht alle Programme, aber eine Zahl ist schnell auch mit der Maus gemalt.
Zeitaufwand: 10 - 60 Sekunden
Farben reduzieren: Bilder mit kleinem Farbraum sollte man nicht als 24Bit-Image speichern. Bei einem Foto ist kaum was rauszuholen, doch bei einer Dialogbox reichen auch Graustufen oder eine 256-Farben-Palette, häufig gar 16 Farben. Es muss nicht immer Truecolor sein. Der tolle Farbverlauf von Ockergelb nach Giftgrün in der Titelleiste vermittelt auch nicht mehr Informationen.
Bei der Palettengenerierung gibt es unterschiedliche Algorithmen, z.B. Octree oder Median Cut, aber nicht alle Programme bieten diese Einstellungsmöglichkeit. Die Auswahl kann jedoch gut und gerne 30% bei der Dateigröße ausmachen. Zudem sollte man jegliche Art von Dithering, sofern möglich, deaktivieren, denn das ist schlecht für die Kompression. Was am besten ist, ist auch hier durch Trial & Error am besten zu ermitteln.
Dieser Schritt ist bei einigen Programmen mit dem Abspeichern zusammengefasst, z.B. bei Paint Shop Pro in den Export-Optimizern. Bietet das genutzte Programm solch ein Feature, sollte man es auch nutzen, denn dort sieht man sofort Bildqualität und Dateigröße in einem.
Zeitaufwand: 10 - 120 Sekunden
Insgesamt sollte man durch diese Schritte mit einem Zeitaufwand, der von wenigen Sekunden bis maximal ein paar Minuten geht, schon eine deutliche Reduktion der Daten erreichen können. Doch das wirkliche Verkleinern kommt erst ...
3. Speichern
Beim Speichern steht natürlich die Wahl des Dateiformats an erster Stelle. Es gibt eine unüberschaubare Anzahl an Bildformaten, doch für den Einsatz im Internet stehen nur drei wirkliche Alternativen zur Auswahl: JPEG, GIF und PNG (unterteilt in PNG24 für Truecolor und PNG8 mit Palette oder Graustufendarstellung). Dabei hat jedes dieser drei Formate seine Stärken und Schwächen.
Andere Formate sind nicht geeignet. Sie sind proprietär (z.B. PSP), bieten unzureichende Kompression (z.B. BMP) oder werden von aktuellen Browsern noch nicht ausreichend unterstützt (JPEG 2000).
Nachfolgend erst eine Übersicht, wann man welches Format einsetzen sollte, und dann eine Einzelbetrachtung der Formate.
Ich muss ein Bild verlustfrei speichern, z.B. für Bildvergleiche
PNG24
Ich habe ein farbenfrohes Foto oder einen Screenshot aus einem Spiel, der nicht für pixelgenaue Vergleiche herhalten soll
JPEG
Ich will eine kurze Animation speichern
GIF (hierzu benötigt man spezielle Programme)
Ich will eine Dialogbox oder ein farbarmes Fenster speichern, generell ein Bild mit großen einfarbigen Flächen, Diagramme, etc.
PNG8 (GIF als schlechtere Alternative)
Ich will Bilder mit Transparenzinformationen speichern
Wenn nur zwischen vollständig deckend und vollständig Transparent unterschieden werden soll: PNG8 (GIF als schlechtere Alternative)
PNG24 (bzw. PNG32) unterstützt einen vollen Alpha-Kanal. Dieser wird leider zur Zeit vom Internet Explorer ignoriert.
to be continued...