Webgrafikformate

Webgrafikformate sind Bitmap- (Raster) und Vektorformate. Die Bitmapformate – GIF, JPEG, PNG und WBMP – sind auflösungsabhängig, d. h., dass sich die Maße eines Rasterbildes (und ggf. die Bildqualität) 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.

Optimierungseinstellungen A. Menü „Dateiformat“ B. Menü „Kompressionsqualität“ C. Menü „Optimieren“

Qualität

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.

Optimiert

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.

Progressiv

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.

Hinweis:

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

Weichzeichnen

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.

Farbprofil einbetten (Photoshop) bzw. ICC-Profil (Illustrator)

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

Hintergrund

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. Siehe Anpassen der Farbtabelle für GIF- und PNG-8-Bilder.

Lossy (nur im GIF-Format)

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.

Hinweis:

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

Farbreduktionsmethode und Farben

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.

Hinweis:

Passen Sie die Farbtabelle (CLUT) mithilfe der Palette „Farbtabelle“ im Dialogfeld „Für Web und Geräte speichern“ an.

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

Dithering-Methode und Dither

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.

GIF-Bild mit 0 %-Dithering (links) und mit 100 %-Dithering (rechts)

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.

Transparenz und Hintergrund

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).

Hinweis:

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

Beispiele für Transparenz und Hintergrund

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

Transparenz-Dithering

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.

Beispiel für Muster-Transparenz-Dithering (links) und Anwendung auf den Hintergrund einer Webseite (rechts)

Interlaced

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.

Ausrichtung

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. Hintergrundmaskierung simuliert Transparenz, indem transparente Pixel mit einer maskierten Farbe aufgefüllt oder überblendet werden, die mit der Webseiten-Hintergrundfarbe übereinstimmen kann. 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.

Hinweis:

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).

Hinweis:

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.

  1. Wenn in der Farbtabelle Farben ausgewählt sind, wählen Sie „Auswahl aller Farben aufheben“ im Palettenmenü „Farbtabelle“, um deren Auswahl aufzuheben.

  2. Wählen Sie eine Farbe auf eine der folgenden Weisen:

    • Klicken Sie auf das Feld „Pipettenfarbe“ im Dialogfeld „Für Web und Geräte speichern“ und wählen Sie eine Farbe im Farbwähler aus.

    • Wählen Sie die Pipette im Dialogfeld „Für Web und Geräte speichern“ aus und klicken Sie in das Bild.

  3. Führen Sie einen der folgenden Schritte aus:

    • Klicken Sie in der Farbtabelle auf die Schaltfläche „Neue Farbe“.

    • Wählen Sie im Palettenmenü „Farbtabelle“ die Option „Neue Farbe“ aus.

    • Um von der Farbtabelle zu einer eigenen Palette zu wechseln, halten Sie beim Hinzufügen der neuen Farbe die Strg-Taste (Windows) bzw. die Befehlstaste (Mac OS) gedrückt.

      Die neue Farbe wird in der Farbtabelle mit einem kleinen weißen Quadrat in der rechten unteren Ecke angezeigt. Dies bedeutet, dass die Farbe fixiert ist. Wenn die Farbtabelle dynamisch ist, wird die ursprüngliche Farbe links oben und die neue Farbe rechts unten angezeigt.

       

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ü des Bedienfelds „Farbtabelle“ finden Sie auch Befehle für die Auswahl 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.

  1. Doppelklicken Sie in der Farbtabelle auf die Farbe, um den Standard-Farbwähler anzuzeigen.

  2. Wählen Sie eine Farbe aus.

    Die ursprüngliche Farbe wird links oben im Farbfeld angezeigt, die neue Farbe rechts unten. Das kleine Quadrat rechts unten im Farbfeld zeigt an, dass die Farbe fixiert ist. Wenn Sie zu einer websicheren Farbe verschieben, wird in der Mitte des Farbfelds eine kleine weiße Raute angezeigt.

  3. Führen Sie einen der folgenden Schritte durch, um die ursprüngliche Farbe wiederherzustellen:

    • Doppelklicken Sie auf das Farbfeld der verschobenen Farbe. Die ursprüngliche Farbe wird im Farbwähler ausgewählt. Klicken Sie zum Zurücksetzen der Farbe auf „OK“.

    • Zum Zurücksetzen aller verschobenen Farben in einer Farbtabelle (einschließlich Web-Verschiebungen) wählen Sie im Menü des Bedienfelds„Farbtabelle“ die Option „Verschiebung rückgängig für alle Farben“ aus.

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.

  1. Wählen Sie eine oder mehrere Farben aus dem optimierten Bild oder der Farbtabelle.

  2. Führen Sie einen der folgenden Schritte aus:

    • Klicken Sie in der Palette „Farbtabelle“ auf die Schaltfläche „Web-Verschiebung“.

    • Wählen Sie im Palettenmenü „Farbtabelle“ den Befehl „Ausgewählte Farben zur Web-Palette verschieben/Verschiebung aufheben“ aus. Die ursprüngliche Farbe wird links oben, die neue Farbe rechts unten im Farbfeld angezeigt. Die kleine weiße Raute  in der Mitte des Farbfelds zeigt an, dass es sich um eine websichere Farbe handelt. Das kleine Quadrat unten rechts bedeutet, dass die Farbe fixiert ist.

  3. Um einen Toleranzwert für die Verschiebung zu konfigurieren, geben Sie einen Ausrichtungswert ein. Je höher der Wert, desto mehr Farben werden verschoben.

  4. Führen Sie einen der folgenden Schritte aus, um die Verschiebung der Farben wieder aufzuheben:

    • Wählen Sie in der Farbtabelle eine aus den Webfarben verschobene Farbe und klicken Sie auf die Schaltfläche„Web-Verschiebung“  in der Palette „Farbtabelle“.

    • Zum Zurücksetzen aller Web-verschobenen Farben in einer Farbtabelle wählen Sie im Palettenmenü „Farbtabelle“ die Option „Verschiebung rückgängig für alle Farben“ aus.

Zuordnen von Farben und Transparenz

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

  1. Wählen Sie eine oder mehrere Farben aus dem optimierten Bild oder der Farbtabelle.

  2. Führen Sie einen der folgenden Schritte aus:

    • Klicken Sie auf die Schaltfläche „Transparenz zuordnen“  in der Palette „Farbtabelle“.

    • Wählen Sie im Palettenmenü „Farbtabelle“ die Option „Ausgewählten Farben Transparenz zuordnen/Zuordnung aufheben“ aus.

      Das Transparenzraster  wird in der Hälfte jeder zugeordneten Farbe angezeigt. Das kleine Quadrat rechts unten im Farbfeld zeigt an, dass die Farbe fixiert ist.

  3. Führen Sie einen der folgenden Schritte aus, um für die Transparenz die Originalfarbe wiederherzustellen:

    • Wählen Sie die gewünschten Farben aus, deren Zuordnung aufgehoben werden soll, und klicken Sie auf die Schaltfläche „Transparenz zuordnen“ , oder wählen Sie im Palettenmenü „Farbtabelle“ den Befehl „Ausgewählten Farben Transparenz zuordnen/Zuordnung aufheben“ aus.

    • Zum Zurücksetzen aller Zuordnungen von Farben zu Transparenz wählen Sie „Zuordnung für alle transparenten Farben aufheben“ aus.

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.

Hinweis:

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

  1. Wählen Sie in der Farbtabelle mindestens eine Farbe.

  2. Fixieren Sie die Farbe auf eine der folgenden Weisen:

    • Klicken Sie auf die Schaltfläche „Fixieren“ .

    • Wählen Sie im Palettenmenü „Farbtabelle“ die Option „Gewählte Farben fixieren/lösen“ aus.

    In der rechten unteren Ecke jeder fixierten Farbe wird ein weißes Quadrat  angezeigt.

  3. Heben Sie die Fixierung der Farbe auf eine der folgenden Weisen auf:

    • Klicken Sie auf die Schaltfläche „Fixieren“ .

    • Wählen Sie im Palettenmenü „Farbtabelle“ die Option „Gewählte Farben fixieren/lösen“ aus.

    Das weiße Rechteck auf dem Farbfeld wird nicht mehr angezeigt.

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.

  1. Wählen Sie in der Farbtabelle mindestens eine Farbe.

  2. Löschen Sie die Farbe auf eine der folgenden Weisen:

    • Klicken Sie auf das Symbol „Löschen“ .

    • Wählen Sie im Palettenmenü „Farbtabelle“ die Option „Farbe löschen“ aus.

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.

  1. Wählen Sie „Farbtabelle speichern“ im Palettenmenü „Farbtabelle“ aus.

  2. Benennen Sie die Farbtabelle und wählen Sie einen Speicherort. Die Farbtabellendatei erhält standardmäßig die Erweiterung .act (für Adobe Farbtabelle).

    Wenn Sie beim Auswählen von Optimierungsoptionen für ein GIF- oder PNG-Bild auf die Farbtabelle zugreifen möchten, speichern Sie die Farbtabelle im Ordner „Optimierte Farben“ im Anwendungsordner von Photoshop.

  3. Klicken Sie auf „Speichern“.

    Hinweis:

    Wenn Sie die Tabelle erneut laden, werden alle verschobenen Farben als vollständige Farbfelder angezeigt und sind nicht mehr fixiert.

Laden einer Farbtabelle

  1. Wählen Sie „Farbtabelle speichern“ im Palettenmenü „Farbtabelle“ aus.

  2. Navigieren Sie zu einer Datei mit der Farbtabelle, die geladen werden soll. Das kann eine ACT-Datei (Adobe Color Table), eine ACO-Datei (Adobe Color Swatch) oder eine GIF-Datei (um die eingebettete Farbtabelle der Datei zu laden) sein.

  3. Klicken Sie auf „Öffnen“.

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.

Transparenz und Hintergrund

Legt fest, wie transparente Pixel im Bild optimiert werden. Siehe Optimieren von Transparenz in GIF- und PNG-Bildern.

Interlaced

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.

WBMP-Optimierungseinstellungen

WBMP ist das Standardformat zur Optimierung von Bildern für mobile Geräte, z. B. Mobiltelefone. WBMP unterstützt 1-Bit-Farbe, d. h., WBMP-Bilder enthalten nur schwarze und weiße Pixel.

Mit dem Dither-Algorithmus und -Prozentsatz legen Sie fest, mit welcher Methode und Stärke das Anwendungs-Dithering durchgeführt wird. Eine optimale Darstellung erzielen Sie, wenn Sie den niedrigsten Prozentsatz des Dithering verwenden, mit dem Sie die gewünschten Details noch erreichen.

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

Kein Dither

Wendet kein Dithering an, sondern stellt das Bild ausschließlich mit rein schwarzen und rein weißen Pixeln dar.

Diffusion

Es wird ein Zufallsmuster angewendet, das im Allgemeinen weniger auffällig ist als das Muster-Dithering. 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.

Hinweis:

Bei Diffusion-Dither kann es zu sichtbaren Nahtstellen an Slice-Grenzen kommen. Durch das Verbinden von Slices wird das Dither-Muster über alle verbundenen Slices verteilt und die Nahtstellen verschwinden.

Muster

Verwendet ein rasterähnliches Muster aus Quadraten zum Festlegen der Pixelwerte.

Rauschen

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

SWF-Optimierungsoptionen (Illustrator)

Das Adobe Flash-Dateiformat (SWF) ist ein vektorbasiertes Grafikdateiformat für die Erstellung skalierbarer, kompakter Grafiken für das Web. Da das Dateiformat vektorbasiert ist, bleibt die Bildqualität unabhängig von der Auflösung erhalten. Das SWF-Format ist ideal für die Erstellung von Animationsframes geeignet, Sie können aber auch Rasterbilder im SWF-Format speichern oder Raster- und Vektorgrafiken kombinieren.

Vorgabe

Legt den vorkonfigurierten Optionssatz fest, den Sie für den Export verwenden möchten. Wenn Sie neue Vorgaben erstellen möchten, legen Sie die gewünschten Optionen fest und wählen Sie im Bedienfeldmenü die Option Einstellungen speichern. (Klicken Sie auf das Dreieck rechts neben dem Menü „Vorgabe“, um das Bedienfeldmenü zu öffnen.)

Flash Player-Version

Gibt die früheste Version von Flash Player an, die die exportierte Datei unterstützt.

Exporttyp

Legt fest, wie Ebenen exportiert werden. Wählen Sie „AI-Datei in SWF-Datei“, wenn das Bildmaterial als Einzelframe exportiert werden soll. Aktivieren Sie „Ebenen in SWF-Frames“, um das Bildmaterial auf den einzelnen Ebenen in separate SWF-Frames zu exportieren und so eine animierte SWF-Datei zu erstellen.

Hinweis:

Wählen Sie die Option „AI-Datei in SWF-Datei“ aus, damit Ebenenschnittmasken beibehalten werden.

Kurvenqualität

Bestimmt die Genauigkeit der Bézierkurven. Ein geringer Wert verringert die Größe der exportierten Datei bei minimalem Verlust der Kurvenqualität. Ein höherer Wert erhöht die Genauigkeit der Wiedergabe der Bézier-Kurve, führt jedoch zu einer größeren Datei.

Framerate

Legt fest, wie schnell die Animation in einem Flash-Viewer abgespielt wird. Diese Option ist nur für Ebenen in SWF-Frames.

Schleife

Legt fest, dass die Animation in einem Flash-Viewer nicht nur einmal abgespielt und dann angehalten, sondern wiederholt abgespielt wird. Diese Option ist nur für „Ebenen in SWF-Frames“ verfügbar.

Beibehalten: Aussehen

Wandelt Konturen in konturförmige Flächen um und reduziert sämtliche Füllmethoden und Transparenz, die vom SWF-Format nicht unterstützt werden.

Beibehalten: Bearbeitbarkeit

Wandelt Konturen in SWF-Konturen um. Transparenz, die nicht vom SWF-Format unterstützt wird, wird in einer Annäherung reproduziert oder ignoriert.

Hinweis:

Das SWF-Format unterstützt Deckkraft nur auf Objektebene.

Hinweis:

Wenn Sie die Stapelreihenfolge des Bildmaterials beibehalten möchten, verwenden Sie anstelle von „Exportieren“ den Befehl „Für Web und Geräte speichern“. Dadurch wird die Stapelreihenfolge der Grafiken beibehalten, indem jede einzelne Ebene in eine separate SWF-Datei exportiert wird. Sie können dann die exportierten SWF-Dateien gleichzeitig in Adobe Flash importieren.

Komprimiert

Komprimiert die exportierte Datei.

Datei schützen

Bewirkt, dass die Datei von keiner Anwendung außer Flash importiert werden kann.

Text als Konturen

Wandelt alle Textzeichen in Pfade um, damit das Erscheinungsbild des Textes erhalten bleibt. Wenn Sie vorhaben, den Text in Flash zu bearbeiten, aktivieren Sie diese Option nicht.

SVG-Optimierungsoptionen (Illustrator)

Das SVG-Format ist ein Vektorformat, das Bilder als Formen, Pfade, Text und Filtereffekte beschreibt. Dadurch entstehen kompakte und professionelle Grafiken für das Web und sogar für mobile Geräte, deren Ressourcen beschränkt sind.

Komprimiert

Erstellt eine komprimierte SVG-Datei (SVGZ).

SVG-Profile

Legt die SVG-XML-DTD (Document Type Definition, Dokumenttypdefinition) für die exportierte Datei fest.

SVG 1.0 und SVG 1.1 Ist für SVG-Dateien geeignet, die auf einem Desktop-Computer angezeigt werden sollen. SVG 1.1 ist die Vollversion der SVG-Spezifikation, zu der die Untergruppen SVG Tiny 1.1, SVG Tiny 1.1 Plus, SVG Tiny 1.2 und SVG Basic 1.1 gehören.

SVG Basic 1.1 Ist für SVG-Dateien geeignet, die auf Geräten mit mittlerer Leistung angezeigt werden sollen (wie zum Beispiel auf Handhelds). Beachten Sie, dass „SVG Basic“ nicht von allen Handhelds unterstützt wird. Wenn Sie diese Option auswählen, ist daher nicht gewährleistet, dass die SVG-Datei auf allen Handhelds angezeigt werden kann. „SVG Basic“ unterstützt weder nicht rechteckige Schnittmasken noch einige SVG-Filtereffekte.

SVG Tiny 1.1 und SVG Tiny 1.1+ Ist für SVG-Dateien geeignet, die auf kleinen Geräten angezeigt werden sollen (wie zum Beispiel auf Smartphones). Beachten Sie, dass die Profile „SVG Tiny“ und „SVG Tiny Plus“ nicht auf allen Smartphones unterstützt werden. Wenn Sie eine dieser Optionen auswählen, ist daher nicht gewährleistet, dass die SVG-Datei auf allen kleinen Geräten angezeigt werden kann.

SVG Tiny 1.2 Ist für SVG-Dateien geeignet, die auf einer Vielzahl der unterschiedlichsten Gerätetypen angezeigt werden sollen (z. B. auf PDAs, Smartphones, Laptops und Desktop-Computern).
Verläufe, Transparenz, Schnittmasken, Masken, Symbole oder SVG-Filtereffekte werden von SVG Tiny nicht unterstützt. „SVG Tiny Plus“ kann Verläufe und Transparenz anzeigen, unterstützt jedoch keine Schnittmasken, Masken, Symbole und SVG-Filtereffekte.

Hinweis:

Weitere Informationen zu SVG-Profilen finden Sie in der SVG-Spezifikation auf der Website des World Wide Web Consortium (W3C) unter www.w3.org.

Dezimalstellen

Legt die Genauigkeit der Vektordaten in der SVG-Datei fest. Es können bis zu 7 Dezimalstellen festgelegt werden. Je höher der Wert, desto größer die Datei und desto besser die Bildqualität.

Schriften teilweise laden

Steuert, welche Schriftzeichen aus der SVG-Datei eingebettet werden. Wählen Sie die Option „Keine“, wenn Sie sich sicher sind, dass die benötigten Schriften auf den Endbenutzersystemen installiert sind. Wählen Sie „Nur verwendete Schriftzeichen“ aus, wenn nur die Schriftzeichen für Texte einbezogen werden sollen, die im aktuellen Bildmaterial enthalten sind. Die anderen Werte – „English (allg.)“, „English (allg.) und verwendete Schriftzeichen“, „Roman (allg.)“, „Roman (allg.) und verwendete Schriftzeichen“ sowie „Alle Schriftzeichen“ – sind nützlich, wenn der Textinhalt der SVG-Datei dynamisch ist (wie z. B. servergenerierter oder interaktiver Text).

Schriftart

Legt fest, wie Schriften exportiert werden.

Adobe CEF Setzt „Font-Hinting“ für ein besseres Rendering kleiner Schriften ein. Diese Schriftart wird in Adobe SVG Viewer unterstützt, in anderen SVG-Viewern jedoch möglicherweise nicht.

SVG Verwendet kein Font-Hinting. Diese Schriftart wird von allen SVG-Viewern unterstützt.

In Konturen umwandeln Konvertiert Text- in Vektorpfade. Mit dieser Option können Sie sicherstellen, dass Text in allen SVG-Viewern gleich dargestellt wird.

Bildposition

Legt fest, ob Bilder eingebettet oder verknüpft werden sollen. Durch das Einbetten von Bildern vergrößert sich zwar die Datei, es wird damit jedoch auch sichergestellt, dass die Pixelbilder stets verfügbar sind.

CSS-Eigenschaften

Legt fest, wie CSS-Stilattribute im SVG-Code gespeichert werden. Bei der Standardmethode „Präsentationsattribute“ werden Eigenschaften an der höchsten Stelle der Hierarchie angewendet. Dies gewährleistet bei bestimmten Bearbeitungsvorgängen und Transformationen ein Höchstmaß an Flexibilität. Die mit der Methode „Stilattribute“ erstellten Dateien können zwar am besten gelesen werden, fallen jedoch möglicherweise auch größer aus. Wählen Sie diese Methode, wenn der SVG-Code in Transformationen eingesetzt werden soll – wie zum Beispiel bei Transformationen mittels XSLT (Extensible Stylesheet Language Transformation). Die Methode „Entitätsreferenzen“ führt zu kürzeren Rendering-Zeiten und kleineren SVG-Dateien. Die Methode „Stilelemente“ wird beim Freigeben von Dateien mit HTML-Dokumenten eingesetzt. Durch Auswahl von „Stilelemente“ können Sie die SVG-Datei so ändern, dass ein Stilelement in eine externe, in der HTML-Datei referenzierte Stylesheet-Datei verschoben wird. Der Nachteil dieser Option sind jedoch die längeren Rendering-Zeiten.

Kodierung

Legt fest, wie Zeichen in der SVG-Datei kodiert werden. UTF-Kodierung (Unicode Transformation Format) wird von allen XML-Prozessoren unterstützt. (UTF-8 ist ein 8-Bit-Format und UTF-16 ein 16-Bit-Format.) Bei der Kodierung nach ISO 8859-1 und UTF-16 bleiben keine Dateimetadaten erhalten.

Für Adobe SVG Viewer optimieren

Optimiert Bilder für Adobe SVG Viewer.

Weitere Hilfethemen

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie