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 zum Komprimieren von Volltonbildern wie Fotos. Die Optimierung eines Bilds im JPEG-Format basiert auf der verlustbehafteten Komprimierung, bei der Daten selektiv verworfen werden.

Bestimmt den Komprimierungsgrad. Je höher der Wert der Qualitätseinstellung ist, desto mehr Details werden vom Komprimierungsalgorithmus beibehalten. Die Verwendung einer hohen Qualitätseinstellung führt jedoch zu einer größeren Dateigröße als die Verwendung einer niedrigen Qualitätseinstellung. Zeige das optimierte Bild mit verschiedenen Qualitätseinstellungen an, um das optimale Gleichgewicht zwischen Qualität und Dateigröße zu erzielen.

Erstellt ein verbessertes JPEG mit einer etwas kleineren Dateigröße. Das JPEG-Format „Optimiert“ wird für die maximale Dateikomprimierung empfohlen. Diese Funktion wird jedoch von einigen älteren Browsern nicht unterstützt.

Zeigt das Bild schrittweise in einem Webbrowser an. Das Bild wird als eine Reihe von Überlagerungen angezeigt, sodass Betrachtende eine Version mit niedriger Auflösung sehen, bevor es vollständig heruntergeladen wird. Für die Option „Progressiv“ muss das JPEG-Format „Optimiert“ verwendet werden.

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

Gibt den Grad an Weichzeichnung für das Bild an. Diese Option wendet einen Effekt an, der dem Gaußschen Weichzeichner gleicht, und ermöglicht eine höhere Komprimierung der Datei, was zu einer kleineren Dateigröße führt. Eine Einstellung von 0,1 bis 0,5 wird empfohlen.

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

Legt eine Füllfarbe für die Pixel fest, die im Originalbild transparent waren. Klicke auf das Farbfeld „Hintergrund“, um im Farbwähler eine Farbe auszuwählen, oder wähle eine Option aus dem Menü „Hintergrund“ aus: „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden), „Vordergrundfarbe“, „Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um den Farbwähler zu verwenden).

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 zum Komprimieren von Bildern mit einheitlichen Farben und gestochen scharfen Details wie Lineart, Logos oder Illustrationen mit Text. Wie beim GIF-Format werden auch beim PNG-8-Format Farbflächen unter Beibehaltung scharfer Details effizient komprimiert.

PNG-8- und GIF-Dateien unterstützen 8-Bit-Farben, sodass sie bis zu 256 Farben anzeigen können. Der Prozess, mit dem die zu verwendenden Farben ermittelt werden, wird Indizierung genannt, weshalb Bilder in GIF- und PNG-8-Formaten manchmal als Bilder mit indizierten Farben bezeichnet werden. Um ein Bild in eine indizierte Farbe zu konvertieren, wird eine Farbsuchtabelle erstellt, in der die Farben im Bild gespeichert und indiziert werden. Wenn eine Farbe des Originalbilds nicht in der Farbsuchtabelle angezeigt wird, wählt die Anwendung entweder die ähnlichste Farbe in der Tabelle aus oder simuliert die Farbe mithilfe einer Kombination verfügbarer 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. Eine höhere Verlusteinstellung führt dazu, dass mehr Daten verworfen werden. Häufig kann ein Verlustwert von 5 bis 10 und manchmal sogar ein Wert bis 50 angewendet werden, ohne die Bildqualität zu verschlechtern. Die Option „Mit Verlust“ kann die Dateigröße um 5 bis 40 % reduzieren.

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

Gibt eine Methode zum Generieren der Farbsuchtabelle und die Anzahl der Farben an, die in der Farbsuchtabelle enthalten sein sollen. Du kannst eine der folgenden Methoden zur Farbreduktion 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. Diese Farbtabelle erzeugt in der Regel Bilder mit der größten Farbintegrität. „Selektiv“ ist die Standardoption.

Adaptiv Erstellt eine eigene Farbtabelle mit Farben aus dem Spektrum, das im Bild dominiert. Wenn beispielsweise ein Bild nur die Farben Grün und Blau enthält, wird eine Farbtabelle erstellt, die hauptsächlich aus Grün- und Blautönen besteht. Die meisten Bilder konzentrieren Farben auf bestimmte Bereiche des Spektrums.

Restriktiv (Web) Verwendet die Standardtabelle mit 216 Farben, die mit den 8-Bit-Paletten (256 Farben) aus Windows und Mac OS vergleichbar ist. Diese Option stellt sicher, dass kein Browser-Dither auf Farben angewendet wird, wenn das Bild mit 8-Bit-Farbe angezeigt wird. (Diese Palette wird auch als Web-sichere Palette bezeichnet.) Durch die Verwendung der Web-Palette können größere Dateien erstellt werden. Dies wird nur empfohlen, wenn die Vermeidung von Browser-Dither eine 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 den Umfang des Anwendungs-Dithering. Dithering bezieht sich auf die Methode zum Simulieren von Farben, die im Farbanzeigesystem deines Computers nicht verfügbar sind. Ein höherer Dithering-Prozentsatz führt zur Anzeige von mehr Farben und mehr Details in einem Bild, kann aber auch die Dateigröße erhöhen. Verwenden Sie für eine optimale Komprimierung den niedrigsten Dithering-Prozentsatz, der die benötigten Farbdetails bereitstellt. Bilder, die überwiegend aus durchgehenden Farben bestehen, funktionieren möglicherweise gut ohne Dither. Bei Bildern mit Volltonfarben (insbesondere Farbverläufen) ist Dithering möglicherweise erforderlich, um Farbstreifenbildung zu verhindern.

Du kannst eine der folgenden Dithering-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.

• Um vollständig transparente Pixel transparent darzustellen und teilweise transparente Pixel mit einer Farbe zu unterlegen, wähle „Transparenz“ und anschließend eine Hintergrundfarbe aus.

• Um vollständig transparente Pixel mit einer Farbe zu füllen und teilweise transparente Pixel mit derselben Farbe zu unterlegen, wähle eine Hintergrundfarbe aus und hebe die Auswahl von „Transparenz“ auf.

• Um eine Hintergrundfarbe auszuwählen, klicke auf das Farbfeld „Hintergrund“ und wähle eine Farbe aus dem Farbwähler aus. Alternativ kannst du eine Option aus dem Menü „Hintergrund“ auswählen: „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden), „Vordergrundfarbe“, „Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um den Farbwähler zu verwenden).

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

A. Originalbild B. Auswahl von „Transparenz“ mit einer Hintergrundfarbe C. Auswahl von „Transparenz“ ohne Hintergrundfarbe D. Aufgehobene Auswahl von „Transparenz“ mit einer Hintergrundfarbe

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. Bei Auswahl dieses Algorithmus musst du einen Dither-Prozentsatz auswählen, um die Menge an Dithering zu steuern, die auf das Bild angewendet wird.

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

• Mit „Transparenz-Dither (Rauschen)“ wird ein Zufallsmuster angewendet, dass dem Diffusionsalgorithmus ähnelt, ohne jedoch das Muster über benachbarte Pixel zu streuen. Bei Anwendung des Rauschalgorithmus werden keine Kanten angezeigt.

Es wird eine Version des Bilds mit niedriger Auflösung in einem Browser angezeigt, während die vollständige Bilddatei heruntergeladen wird. Interlacing kann die zum Herunterladen erforderliche Zeit kürzer erscheinen lassen und den Betrachtenden versichern, dass das Herunterladen durchgeführt wird. Durch das Interlacing wird die Dateigröße jedoch ebenfalls erhöht.

Gibt eine Toleranzstufe für das Verschieben von Farben auf die ähnlichsten Entsprechungen der Web-Palette an (und verhindert Dithering der Farben in einem 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 Web-Seite aus einer Farbfläche besteht und Sie diese Farbe kennen.

Verwende die Optionen „Transparenz“ und „Hintergrund“ im Dialogfeld „Für Web und Geräte speichern“, um anzugeben, wie transparente 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.
• Um vollständig transparente Pixel mit einer Farbe zu füllen und teilweise transparente Pixel mit derselben Farbe zu unterlegen, wähle eine Hintergrundfarbe aus und hebe die Auswahl von „Transparenz“ auf.
• (GIF und PNG-8) Um alle Pixel mit einer Transparenz von mehr als 50 % vollständig transparent und alle Pixel mit einer Transparenz von 50 % oder weniger vollständig deckend darzustellen, wähle im Menü „Hintergrund“ „Transparenz“ und dann „Ohne“ aus.
• (PNG-24) Um ein Bild mit Transparenz auf mehreren Ebenen (bis zu 256 Ebenen) zu speichern, wähle „Transparenz“ aus. Die Option „Hintergrund“ ist deaktiviert, da Transparenz auf mehreren Ebenen ermöglicht, dass ein Bild mit jeder Hintergrundfarbe unterlegt wird.

 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. Alternativ kannst du eine Option aus dem Menü „Hintergrund“ auswählen: „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden), „Vordergrundfarbe“, „Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um den Farbwähler zu verwenden).

 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 mehrere Slices enthält, können die Farben in der Farbtabelle zwischen den Slices variieren (du kannst die Slices zuerst verknüpfen, um dies zu verhindern). Wenn du mehrere Slices auswählst, die unterschiedliche Farbtabellen verwenden, ist die Farbtabelle leer und die Statusleiste zeigt die Meldung „Gemischt“ an.

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. Wenn du die Anzahl der Farben verringerst, bleibt die Bildqualität oft erhalten, während die Dateigröße reduziert wird.

Du kannst Farben in der Farbtabelle hinzufügen und löschen, ausgewählte Farben zu Web-sichere Farben verschieben und ausgewählte Farben sperren, um zu verhindern, dass sie aus der Palette entfernt werden.

Sortieren einer Farbtabelle

Wähle im Palettenmenü der Farbtabelle eine Sortierfolge aus:

• „Nicht sortiert“ stellt die ursprüngliche Sortierreihenfolge wieder her.
• „Sortieren nach Farbton“ sortiert nach der Position der Farbe auf dem Standardfarbrad (ausgedrückt als Grad von 0 bis 360). Neutralen Farben wird ein Farbton von 0 zugewiesen und sie befinden sich bei den Rottönen.
• „Sortieren nach Luminanz“ sortiert nach der Helligkeit einer Farbe.
• „Sortieren nach Häufigkeit“ sortiert die Farben nach Häufigkeit ihres Auftretens im Bild.

Hinzufügen einer neuen Farbe zur Farbtabelle

Du kannst Farben hinzufügen, die beim Erstellen der Farbtabelle ausgelassen wurden. Durch das Hinzufügen einer Farbe zu einer dynamischen Tabelle wird die Farbe in die Palette verschoben, die der neuen Farbe am ähnlichsten ist. Durch Hinzufügen einer Farbe zu einer festen oder benutzerdefinierten Tabelle wird der Palette eine zusätzliche Farbe hinzugefügt.

Auswählen von Farben in der Farbtabelle

Um die in der Farbtabelle ausgewählten Farben herum wird ein weißer Rahmen angezeigt.

• Zum Auswählen einer Farbe klicken Sie in der Farbtabelle auf die gewünschte Farbe.
• Um mehrere Farben in der Farbtabelle auszuwählen, halte die Umschalttaste gedrückt und klicke auf eine andere 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.

Verschieben einer Farbe

Du kannst eine in der Farbtabelle ausgewählte Farbe in einen anderen RGB-Farbwert ändern. Wenn du das optimierte Bild erneut generierst, ändert sich die ausgewählte Farbe überall dort zur neuen Farbe, wo sie im Bild angezeigt wird.

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

Um Farben in einem Browser vor Dithering zu schützen, kannst du die Farben in der Web-Palette auf die nächstgelegenen Entsprechungen verschieben. Dadurch wird sichergestellt, dass bei den Farben kein Dithering entsteht, wenn sie in Browsern auf Windows- oder Macintosh-Betriebssystemen angezeigt werden, die nur 256 Farben anzeigen können.

Zuordnen von Farben und Transparenz

Du kannst einem optimierten Bild Transparenz hinzufügen, indem du vorhandene Farben Transparenz zuordnest.

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

Du kannst ausgewählte Farben aus der Farbtabelle löschen, um die Größe der Bilddatei zu verringern. Wenn du eine Farbe löschst, werden Bereiche des optimierten Bilds, in denen diese Farbe zuvor enthalten war, mit der ähnlichsten Farbe in der Palette gerendert.

Wenn du eine Farbe löschst, ändert sich die Farbtabelle automatisch in eine benutzerdefinierte Palette. Dies liegt daran, dass die Paletten „Adaptiv“, „Perzeptiv“ und „Selektiv“ automatisch die gelöschte Farbe wieder in die Palette einfügen, wenn du das Bild erneut optimierst. Eine benutzerdefinierte Palette ändert sich nicht, wenn du das Bild erneut optimierst.

Speichern einer Farbtabelle

Du kannst Farbtabellen aus optimierten Bildern speichern, um sie mit anderen Bildern zu verwenden und in anderen Anwendungen erstellte Farbtabellen zu laden. Sobald du eine neue Farbtabelle in ein Bild lädst, werden die Farben im optimierten Bild so geändert, dass sie die Farben in der neuen Farbtabelle widerspiegeln.

Laden einer Farbtabelle

PNG-24-Optimierungsoptionen

PNG-24 eignet sich zum Komprimieren von Volltonbildern, erzeugt jedoch viel größere Dateien als das JPEG-Format. Der Vorteil von PNG-24 besteht darin, dass bis zu 256 Transparenzstufen in einem Bild erhalten bleiben können.

Legt fest, wie transparente Pixel im Bild optimiert werden.

Es wird eine Version des Bilds mit niedriger Auflösung in einem Browser angezeigt, während die vollständige Bilddatei heruntergeladen wird. Interlacing kann die zum Herunterladen erforderliche Zeit kürzer erscheinen lassen und den Betrachtenden versichern, dass das Herunterladen durchgeführt wird. Durch das Interlacing wird die Dateigröße jedoch ebenfalls erhöht.