Optimierungsoptionen für Bilder und animierte GIF-Dateien

Webgrafikformate sind Bitmap- (Raster) und Vektorformate. Die Bitmapformate – GIF, JPEG und PNG – sind auflösungsabhängig, die Maße eines Rasterbildes (und ggf. die Bildqualität) wird sich bei unterschiedlichen Bildschirmauflösungen ändern. Die Vektorformate – SVG und SWF – sind auflösungsunabhängig und können ohne Qualitätsverlust skaliert werden. Im Vektorformat vorliegende Bilder können Rasterdaten enthalten. 

JPEG-Optimierungsoptionen

JPEG ist das Standardformat für das Komprimieren von Halbtonbildern (z. B. Fotos). Die Optimierung eines Bildes im JPEG-Format beruht auf der verlustbehafteten Komprimierung, bei der ausgewählte Daten weggelassen werden.

Bestimmt die Komprimierungsstufe. Je höher die Einstellung unter „Qualität“ ist, desto mehr Details bleiben bei der Komprimierung erhalten. Je höher der Wert ist, desto größer wird auch die Datei. Sehen Sie sich das optimierte Bild mit verschiedenen Einstellungen an, um Qualität und Dateigröße optimal abzustimmen.

Erstellt ein verbessertes JPEG-Bild mit leicht reduzierter Dateigröße. Das optimierte JPEG-Format wird zwar für eine maximale Dateikomprimierung empfohlen, von einigen älteren Browsern jedoch nicht unterstützt.

Lädt das Bild im Webbrowser in mehreren Durchgängen. Das Bild wird als Serie von Überlagerungen angezeigt, bei der eine Version des Bildes mit geringer Auflösung angezeigt wird, bevor es vollständig geladen wurde. Für „Progressiv“ muss eine Datei im optimierten JPEG-Format verwendet werden.

 Progressive JPEG-Dateien erfordern mehr Arbeitsspeicher für die Anzeige, und einige Browser unterstützen das Format nicht.

Legt fest, in welchem Umfang das Bild weichgezeichnet werden soll. Mit dieser Option wird derselbe Effekt erzielt wie mit dem Filter Gaußscher Weichzeichner. Die Datei kann stärker komprimiert werden, was zu kleineren Dateien führt. Eine Einstellung von 0,1 bis 0,5 wird empfohlen.

Behält Farbprofile in der optimierten Datei bei. Einige Browser verwenden Farbprofile für die Farbkorrektur.

Legt eine Füllfarbe für die Pixel fest, die im Originalbild transparent waren. Klicken Sie auf das Farbfeld „Matte“ und wählen Sie mit dem Farbwähler eine Farbe aus oder wählen Sie eine Option im Menü „Maske“: „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden), „Vordergrundfarbe“,„Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um den Farbwähler zu öffnen).

Pixel, die im Originalbild vollständig transparent waren, werden mit der ausgewählten Farbe gefüllt. Pixel, die im Originalbild teilweise transparent waren, werden mit der ausgewählten Farbe angeglichen.

Optimierungsoptionen für GIF und PNG-8

GIF ist das Standardformat für die Komprimierung von Bildern mit kontrastarmen Farben und scharfen Details, z. B. Strichgrafiken, Logos oder Illustrationen mit Text. Wie beim GIF-Format werden beim PNG-8-Format Volltonbereiche effizient und unter Bewahrung der Details komprimiert.

PNG-8- und GIF-Dateien unterstützen den 8-Bit-Farbmodus und können daher bis zu 256 Farben darstellen. Welche Farben zu verwenden sind, wird durch die sogenannte Indizierung ermittelt, weshalb Bilder im GIF- oder PNG-8-Format gelegentlich auch als Bilder mit indizierten Farben bezeichnet werden. Zum Konvertieren eines Bildes in den indizierten Farbmodus wird eine Farbtabelle angelegt, in der Bildfarben gespeichert und indiziert werden. Wenn eine Farbe aus dem Originalbild nicht in der Farbtabelle enthalten ist, verwendet die Anwendung entweder die nächstliegende Farbe oder simuliert die Farbe durch Mischen vorhandener Farben.

Neben den folgenden Optionen können Sie auch die Anzahl der Farben in der Farbtabelle des Bildes anpassen.

Reduziert die Dateigröße, indem ausgewählte Daten weggelassen werden. Je höher der Wert, desto mehr Daten gehen verloren. Oft können Sie einen Lossy-Wert von 5 bis 10 anwenden, manchmal bis zu 50, ohne dass die Bildqualität erheblich beeinträchtigt wird. Die Option „Lossy“ kann die Dateigröße um 5 % bis 40 % verringern.

 Sie können die Option „Lossy“ nicht zusammen mit der Option „Mehrere Durchgänge“ oder mit den Dither-Algorithmen „Rauschen“ bzw. „Muster“ verwenden.

Legt die Methode zur Erstellung der Farbtabelle sowie die Anzahl der Farben in der Farbtabelle fest. Sie können aus folgenden Farbreduktionsmethoden auswählen:

Perzeptiv Erstellt eine eigene Farbtabelle, indem Farben, auf die das menschliche Auge sensibler reagiert, Priorität erhalten.

Selektiv Erstellt eine der perzeptiven Farbtabelle ähnliche Farbtabelle, wobei jedoch breite Farbbereiche und die Erhaltung von Webfarben Vorrang haben. Aus dieser Farbtabelle werden normalerweise Bilder mit der höchsten Farbintegrität erzeugt. „Selektiv“ ist die Standardoption.

Adaptiv Erstellt eine eigene Farbtabelle mit Farben aus dem Spektrum, das im Bild dominiert. Für ein Bild, das z. B. nur die Farben Grün und Blau enthält, wird eine Farbtabelle erstellt, die hauptsächlich aus Grün- und Blautönen besteht. Bei den meisten Bildern sind Farben in bestimmten Bereichen des Spektrums konzentriert.

Restriktiv (Web) Verwendet die Standardtabelle mit 216 Farben, die mit den 8-Bit-Paletten (256 Farben) aus Windows und Mac OS vergleichbar ist. Durch diese Option wird sichergestellt, dass beim Anzeigen des Bildes mit 8-Bit-Farbe kein Browser-Dithering auf Farben angewendet wird. (Dieses Bedienfeld wird auch als websicheres Bedienfeld bezeichnet.) Bei Verwendung des Web-Bedienfelds entstehen u. U. größere Dateien. Daher wird empfohlen, sie nur dann zu verwenden, wenn das Vermeiden von Browser-Dithering hohe Priorität hat.

Benutzerdefiniert Verwendet eine vom Benutzer erstellte oder geänderte Farbpalette. Wenn Sie eine bestehende GIF- oder PNG-8-Datei öffnen, enthält diese eine eigene Farbpalette.

 Passen Sie die Farbtabelle im Dialogfeld „Für Web und Geräte speichern“ im Farbtabellen-Bedienfeld an.

Schwarzweiß, Graustufen, Mac OS, Windows Verwendet eine voreingestellte Farbpalette.

Bestimmt die Methode und Stärke des Anwendungs-Dithering. Im Dithering-Menü wird angegeben, wie Farben simuliert werden sollen, die im Farbanzeigesystem Ihres Computers nicht verfügbar sind. Bei einem höheren Dithering-Prozentwert scheint das Bild mehr Farben zu haben und detaillierter zu sein. Die Datei kann dabei aber größer werden. Eine optimale Komprimierung erzielen Sie, wenn Sie den niedrigsten Prozentsatz des Dithering verwenden, mit dem Sie die gewünschten Farbdetails noch erreichen. Bilder, in denen vorrangig Grundfarben enthalten sind, kommen u. U. ohne Dithering aus. Bei Halbtonbildern (insbesondere Farbverläufen) ist möglicherweise Dithering erforderlich, um eine Farbstreifenbildung zu verhindern.

Sie können aus folgenden Dither-Methoden auswählen:

Diffusion Wendet ein Zufallsmuster an, was meist weniger auffällig als Muster-Dithering ist. Die Dithering-Effekte werden über benachbarte Pixel gestreut.

Muster Wendet ein rasterartiges Muster an, um in der Farbtabelle nicht enthaltene Farben zu simulieren.

Rauschen Wendet ein Zufallsmuster ähnlich wie bei der Diffusionsmethode an, ohne jedoch das Muster über benachbarte Pixel zu streuen. Beim Dithering-Verfahren „Rauschen“ entstehen keine Nahtstellen.

Legt fest, wie transparente Pixel im Bild optimiert werden.

• Wenn vollständig transparente Pixel transparent und teilweise transparente Pixel mit einer Farbe überblendet werden sollen, aktivieren Sie die Option „Transparenz“ und wählen Sie eine Hintergrundfarbe.

• Wenn vollständig transparente Pixel mit einer Farbe gefüllt und teilweise transparente Pixel mit derselben Farbe überblendet werden sollen, wählen Sie eine Hintergrundfarbe und deaktivieren Sie die Option „Transparenz“.

• Um eine Hintergrundfarbe auszuwählen, klicken Sie auf das Farbfeld „Hintergrund“ und wählen Sie eine Farbe aus dem Farbwähler. Wählen Sie alternativ eine Option im Menü „Matte“: „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden), „Vordergrundfarbe“, „Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um den Farbwähler zu öffnen).

 Die Optionen „Vordergrundfarbe“ und „Hintergrundfarbe“ stehen nur in Photoshop zur Verfügung.

A. Originalbild B. Transparenz aktiviert mit einer maskierten Farbe C. Transparenz aktiviert ohne Maskierung D. Transparenz deaktiviert mit einer maskierten Farbe

Wenn die Option „Transparenz“ ausgewählt ist, können Sie eine Dithering-Methode für teilweise transparente Pixel wählen:

• Mit „Kein Transparenz-Dither“ wird kein Dithering auf teilweise transparente Pixel im Bild angewendet.

• Diffusion-Transparenz-Dither wendet ein Zufallsmuster an, was für gewöhnlich weniger auffällig als Muster-Dither ist. Die Dithering-Effekte werden über benachbarte Pixel gestreut. Geben Sie bei diesem Algorithmus einen Dithering-Prozentwert an, um zu steuern, wie stark das auf das Bild angewendete Dithering sein soll.

• Mit „Transparenz-Dither (Muster)“ wird ein rasterähnliches Muster aus Quadraten auf teilweise transparente Pixel angewendet.

• Mit „Transparenz-Dither (Rauschen)“ wird ähnlich wie beim Algorithmus „Diffusion“ ein Zufallsmuster angewendet, jedoch ohne das Muster über benachbarte Pixel zu streuen. Beim Dithering-Algorithmus „Rauschen“ entstehen keine Nahtstellen.

Zeigt während des Ladevorgangs im Browser eine Version des Bildes mit niedriger Auflösung an. Bei dieser Methode wirkt die Ladezeit kürzer und die Besucher der Website können sehen, dass tatsächlich ein Ladevorgang stattfindet. Hierdurch steigt allerdings die Dateigröße.

Legt die Toleranz für die automatische Verschiebung von Farben zu den ähnlichsten Entsprechungen im Web-Bedienfeld fest (und vermeidet Dithering im Browser). Je höher der Wert, desto mehr Farben werden verschoben.

Optimieren von Transparenz in GIF- und PNG-Bildern

Transparenz ermöglicht es, nicht rechteckige Bilder für das Web zu erstellen. Hintergrundtransparenz behält die transparenten Pixel im Bild bei.

Dadurch kann der Hintergrund der Webseite durch die transparenten Bereiche Ihres Bildes durchscheinen. Hintergrund-Matte simuliert die Transparenz, indem transparente Pixel mit einer Matte-Farbe gefüllt oder überblendet werden, die der Webseiten-Hintergrundfarbe entspricht. Dies funktioniert am besten, wenn der Hintergrund der Webseite aus einer Farbfläche besteht und Sie diese Farbe kennen.

Mit den Transparenz- und Masken-Optionen im Dialogfeld „Für Web und Geräte speichern“ können Sie festlegen, wie transparent Pixel in GIF- und PNG-Bildern optimiert werden.

• (GIF und PNG-8) Wenn vollständig transparente Pixel transparent und teilweise transparente Pixel mit einer Farbe angeglichen werden sollen, aktivieren Sie die Option „Transparenz“ und wählen Sie eine Masken-Farbe.
• Wenn vollständig transparente Pixel mit einer Farbe gefüllt und teilweise transparente Pixel mit derselben Farbe überblendet werden sollen, wählen Sie eine Hintergrundfarbe und deaktivieren Sie die Option „Transparenz“.
• (GIF und PNG-8) Aktivieren Sie das Kontrollkästchen „Transparenz“ und wählen Sie „Ohne“ im Popup-Menü „Matte“, um alle Pixel mit mindestens 50 % Transparenz vollständig transparent und alle Pixel mit höchstens 50 % Transparenz vollständig deckend zu machen.
• (PNG-24) Um ein Bild mit mehrstufiger Transparenz zu speichern (bis zu 256 Stufen), wählen Sie „Transparenz“. Die Option „Matte“ wird deaktiviert, weil mehrstufige Transparenz die Überblendung eines Bildes mit einer Hintergrundfarbe ermöglicht.

 In Browsern, die die PNG-24-Transparenz nicht unterstützen, können transparente Pixel vor der Hintergrundfarbe (z. B. grau) dargestellt werden.

Um eine Hintergrundfarbe auszuwählen, klicken Sie auf das Farbfeld „Hintergrund“ und wählen Sie eine Farbe aus dem Farbwähler. Wählen Sie alternativ eine Option im Menü „Matte“: „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden), „Vordergrundfarbe“, „Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um den Farbwähler zu öffnen).

 Die Optionen „Vordergrundfarbe“ und „Hintergrundfarbe“ stehen nur in Photoshop zur Verfügung.

Anzeigen einer Farbtabelle für ein optimiertes Slice

Die Farbtabelle für ein Slice wird im Bedienfeld „Farbtabelle“ des Dialogfelds „Für Web und Geräte speichern“ angezeigt.

Wählen Sie ein im GIF- oder PNG-8-Format optimiertes Slice aus. Die Farbtabelle für das ausgewählte Slice wird in der Farbtabelle des Dialogfelds „Für Web und Geräte speichern“ angezeigt.

Wenn ein Bild aus mehreren Slices besteht, können die Farben in der Farbtabelle von Slice zu Slice variieren (Sie können die Slices zunächst verbinden, um dies zu verhindern). Wenn Sie mehrere Slices mit unterschiedlichen Farbtabellen auswählen, ist die Farbtabelle leer und in der Statusleiste wird die Meldung „Gemischt“ angezeigt.

Anpassen der Farbtabelle für GIF- und PNG-8-Bilder

Mithilfe der Farbtabelle im Dialogfeld „Für Web und Geräte speichern“ können Sie die Farben in optimierten GIF- und PNG-8-Bildern anpassen. Durch Reduzieren der Anzahl der Farben ist es oft möglich, die Dateigröße eines Bildes ohne Qualitätsverlust zu verringern.

Sie können Farben in die Farbpalette einfügen und sie daraus löschen, ausgewählte Farben zu websicheren Farben verschieben und ausgewählte Farben fixieren, um das Löschen aus der Palette zu verhindern.

Sortieren einer Farbtabelle

Wählen Sie aus dem Menü des Bedienfelds „Farbtabellen“ eine Sortierreihenfolge aus:

• „Nicht sortiert“ stellt die ursprüngliche Sortierreihenfolge wieder her.
• „Sortieren nach Farbton“ sortiert nach der Position der Farbe im Standard-Farbkreis (ausgedrückt als Gradzahl von 0 bis 360). Neutrale Farben erhalten den Farbton 0 und werden bei den Rottönen platziert.
• „Sortieren nach Luminanz“ sortiert nach der Helligkeit einer Farbe.
• „Sortieren nach Häufigkeit“ sortiert nach der Häufigkeit der Farben im Bild.

Einfügen einer neuen Farbe in die Farbtabelle

Sie können Farben, die beim Erstellen der Farbtabelle ausgelassen wurden, hinzufügen. Wenn Sie einer dynamischen Tabelle eine Farbe hinzufügen, wird die der neuen Farbe in der Palette am nächsten liegende Farbe verschoben. Wenn Sie einer festen oder eigenen Tabelle eine Farbe hinzufügen, wird die Palette um eine zusätzliche Farbe erweitert.

Auswählen von Farben in der Farbtabelle

Ausgewählte Farben werden mit einer weißen Umrandung in der Farbtabelle.

• Zum Auswählen einer Farbe klicken Sie in der Farbtabelle auf die gewünschte Farbe.
• Um mehrere Farben auszuwählen, halten Sie die Umschalttaste gedrückt und klicken Sie auf eine weitere Farbe. Alle Farben in den Zeilen zwischen der ersten und der zweiten ausgewählten Farbe werden ausgewählt. Um mehrere nicht nebeneinander liegende Farben auszuwählen, klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Mac OS) auf jede einzelne auszuwählende Farbe. Im Menü der Palette „Farbtabelle“ finden Sie außerdem Befehle zum Sortieren von Farben.
• Um eine Farbe im Vorschaubild auszuwählen, klicken Sie mit der Pipette aus dem Dialogfeld „Für Web und Geräte speichern“ in die Vorschau. Wählen Sie durch Klicken bei gedrückter Umschalttaste weitere Farben aus.
• Wenn Sie alle ausgewählten Farben wieder aufheben möchten, wählen Sie im Palettenmenü „Farbtabelle“ die Option „Auswahl aller Farben aufheben“ aus.

Ändern einer Farbe

Sie können eine ausgewählte Farbe in der Farbtabelle in einen anderen RGB-Farbwert ändern. Wenn Sie das optimierte Bild regenerieren, wird die ausgewählte Farbe im gesamten Bild in die neue Farbe geändert.

Verschieben von Farben zu den nächsten Äquivalenten im Web-Bedienfeld

Um Dithering der Farben in einem Browser zu vermeiden, können Sie die Farben zu den nächsten Äquivalenten im Web-Bedienfeld verschieben. Dadurch wird Dithering bei der Browser-Anzeige sowohl unter Windows- als auch unter Macintosh-Betriebssystemen verhindert, in denen nur 256 Farben angezeigt werden können.

Zuordnen von Farben und Transparenz

Sie können einem optimierten Bild Transparenz hinzufügen, indem Sie vorhandene Farben einer Transparenz zuordnen.

Fixieren von Farben oder Aufheben der Farbfixierung

Sie können ausgewählte Farben in der Farbtabelle fixieren, damit sie nicht gelöscht werden, wenn die Farbanzahl reduziert wird, und damit sie in der Anwendung kein Dithering verursachen.

 Durch das Fixieren von Farben wird das Dithering in einem Browser nicht verhindert.

Löschen ausgewählter Farben

Sie können ausgewählte Farben aus der Farbtabelle löschen, um die Dateigröße des Bildes zu verringern. Wenn Sie eine Farbe löschen, werden Bereiche des optimierten Bildes, die zuvor diese Farbe enthielten, mit der ähnlichsten Farbe in der Palette neu gerendert.

Wenn Sie eine Farbe löschen, wird die Farbtabelle automatisch zu einer eigenen Palette. Dies liegt daran, dass die gelöschte Farbe beim erneuten Optimieren des Bildes vom Adaptiv-, dem Perzeptiv- und dem Selektiv-Bedienfeld automatisch wieder der Palette hinzugefügt wird. Die eigene Palette ändert sich beim erneuten Optimieren des Bildes nicht.

Speichern einer Farbtabelle

Sie können Farbtabellen aus optimierten Bildern speichern, um sie für andere Bilder zu verwenden und um in anderen Anwendungen erstellte Farbtabellen zu laden. Wenn Sie eine neue Farbtabelle in ein Bild laden, werden die Farben im optimierten Bild an die Farben der neuen Farbtabelle angepasst.

Laden einer Farbtabelle

PNG-24-Optimierungsoptionen

Das PNG-24-Format eignet sich zum Komprimieren von Halbtonbildern. Die dabei entstehenden Dateien sind jedoch wesentlich größer als JPEG-Dateien. Der Vorteil des PNG-24-Formats besteht darin, dass bis zu 256 Transparenzstufen in einem Bild erhalten werden können.

Legt fest, wie transparente Pixel im Bild optimiert werden.

Zeigt während des Ladevorgangs im Browser eine Version des Bildes mit niedriger Auflösung an. Bei dieser Methode wirkt die Ladezeit kürzer und die Besucher der Website können sehen, dass tatsächlich ein Ladevorgang stattfindet. Hierdurch steigt allerdings die Dateigröße.