Benutzerhandbuch Abbrechen

Optimieren von Bildern für das GIF- oder PNG-8-Format

Suchen
  1. Photoshop Elements-Benutzerhandbuch
  2. Einführung in Photoshop Elements
    1. Neue Funktionen in Photoshop Elements
    2. Systemanforderungen | Photoshop Elements
    3. Arbeitsbereich – Grundlagen
    4. Modus „Assistent“
    5. Erstellen von Fotoprojekten
  3. Arbeitsbereich und Umgebung
    1. Den Startbildschirm kennenlernen
    2. Arbeitsbereich – Grundlagen
    3. Werkzeuge
    4. Bedienfelder und Bereiche
    5. Öffnen von Dateien
    6. Lineale, Raster und Hilfslinien
    7. Erweiterter Schnellmodus
    8. Dateiinformationen
    9. Vorgaben und Bibliotheken
    10. Multitouch-Unterstützung
    11. Arbeitsvolumes, Zusatzmodule und Anwendungsupdates
    12. Rückgängig-, Wiederholungs- und Abbruch-Aktionen
    13. Anzeigen von Bildern
  4. Korrigieren und Aufwerten von Fotos
    1. Skalieren von Bildern
    2. Freistellen
    3. Verarbeiten von Camera Raw-Bilddateien
    4. Weichzeichnen, Ersetzen von Farben und Kopieren von Bildbereichen
    5. Anpassen von Tiefen und Lichtern
    6. Retuschieren und Korrigieren von Fotos
    7. Schärfen von Fotos
    8. Transformieren
    9. Automatische intelligente Farbtonbearbeitung
    10. Neuzusammensetzen
    11. Verwenden von Aktionen zum Verarbeiten von Fotos
    12. Photomerge Compose
    13. Erstellen von Panoramen
    14. Bewegte Überlagerungen
    15. Bewegliche Elemente
  5. Hinzufügen von Formen und Text
    1. Hinzufügen von Text
    2. Bearbeiten von Text
    3. Erstellen von Formen
    4. Bearbeiten von Formen
    5. Malen – Übersicht
    6. Malwerkzeuge
    7. Einrichten von Pinseln
    8. Muster
    9. Flächen und Konturen
    10. Verläufe
    11. Arbeiten mit asiatischen Schriften
  6. Bearbeitungen, Effekte und Filter mit Assistenten
    1. Modus „Assistent“
    2. Filter
    3. Modus „Assistent“ – Photomerge-Bearbeitungen
    4. Modus „Assistent“ – Grundlegende Bearbeitungen
    5. Anpassungsfilter
    6. Effekte
    7. Modus „Assistent“ – Kreative Bearbeitungen
    8. Modus „Assistent“ – Spezielle Bearbeitungen
    9. Kunstfilter
    10. Modus „Assistent“ – Farbbearbeitungen
    11. Modus „Assistent“ – Schwarzweiß-Bearbeitungen
    12. Weichzeichnungsfilter
    13. Malfilter
    14. Verzerrungsfilter
    15. Sonstige Filter
    16. Rauschfilter
    17. Rendering-Filter
    18. Zeichenfilter
    19. Stilisierungsfilter
    20. Strukturierungsfilter
  7. Arbeiten mit Farben
    1. Farbe
    2. Einrichten des Farbmanagements
    3. Grundlagen zur Farb- und Tonkorrektur
    4. Auswählen von Farben
    5. Anpassen von Farbe, Farbsättigung und Farbton
    6. Korrigieren von Farbstichen
    7. Verwenden von Bildmodi und Farbtabellen
    8. Farbe und Camera Raw
  8. Arbeiten mit Auswahlen
    1. Erstellen einer Auswahl in Photoshop Elements
    2. Speichern ausgewählter Bereiche
    3. Verändern von ausgewählten Bereichen
    4. Verschieben und Kopieren einer Auswahl
    5. Bearbeitung und Verbesserung von Auswahlbereichen
    6. Erstellen glatter Auswahlkanten mit „Glätten“ oder „Weiche Kante“
  9. Arbeiten mit Ebenen
    1. Erstellen von Ebenen
    2. Bearbeiten von Ebenen
    3. Kopieren und Anordnen von Ebenen
    4. Einstellungs- und Füllebenen
    5. Schnittmasken
    6. Ebenenmasken
    7. Ebenenstile
    8. Deckkraft und Mischmodi
  10. Erstellen von Fotoprojekten
    1. Projektgrundlagen
    2. Erstellen von Fotoprojekten
    3. Bearbeiten von Fotoprojekten
  11. Speichern, Drucken und Weitergeben von Fotos
    1. Speichern von Bildern
    2. Drucken von Fotos
    3. Teilen von Fotos über das Internet
    4. Optimieren von Bildern
    5. Optimieren von Bildern für das JPEG-Format
    6. Dithering in Webbildern
    7. Editor mit Assistent – Bedienfeld „Teilen“
    8. Anzeigen von Webbildern in der Vorschau
    9. Verwenden von Transparenz und Hintergrundfarben
    10. Optimieren von Bildern für das GIF- oder PNG-8-Format
    11. Optimieren von Bildern für das PNG-24-Format
  12. Tastaturbefehle
    1. Tastaturbefehle zum Auswählen von Werkzeugen
    2. Tastaturbefehle zum Auswählen und Verschieben von Objekten
    3. Tastaturbefehle für das Ebenenbedienfeld
    4. Tastaturbefehle für das Ein-/Ausblenden von Bedienfeldern (Experten-Modus)
    5. Tastaturbefehle für das Malen und Pinsel
    6. Tastaturbefehle zum Arbeiten mit Text
    7. Tastaturbefehle für den Filter „Verflüssigen“
    8. Tastaturbefehle für das Transformieren einer Auswahl
    9. Tastaturbefehle für das Farbfelderbedienfeld
    10. Tastaturbefehle für das Dialogfeld „Camera Raw“
    11. Tastaturbefehle für die Filtergalerie
    12. Tastaturbefehle zum Arbeiten mit Mischmodi
    13. Tastaturbefehle zum Anzeigen von Bildern (Experten-Modus)

GIF-Format

Das GIF-Format verwendet 8-Bit-Farbe und komprimiert Farbflächen effizient, wobei scharfe Details in Strichgrafiken, Logos oder Text erhalten bleiben. Darüber hinaus können Sie im GIF-Format animierte Bilder erstellen und Transparenz in Bildern beibehalten. GIF wird von den meisten Browsern unterstützt.

Das GIF-Format verwendet LZW-Komprimierung, eine verlustfreie („lossless“) Komprimierungsmethode. Da GIF-Dateien allerdings auf 256 Farben begrenzt sind, kann die Optimierung eines 24-Bit-Originalbilds als 8-Bit-GIF-Datei zum Verlust von Farbdaten führen.

GIF-Bild mit Farbtabelle „Selektiv“ (links) und mit Farbtabelle „Web“ (rechts)

Sie können die Zahl der Farben im GIF-Bild wählen und das Dithering der Farben im Browser steuern. Das GIF-Format unterstützt Hintergrundtransparenz und -farbe, wobei die Bildkanten an den Hintergrund einer Webseite angeglichen werden.

PNG-8-Format

Das PNG-8-Format verwendet 8-Bit-Farbe. Wie das GIF-Format komprimiert auch das PNG-8-Format Farbflächen auf effiziente Weise und erhält dabei scharfe Details in Strichgrafiken, Logos oder Text.

Da PNG-8 nicht von allen Browsern unterstützt wird, sollten Sie dieses Format nicht verwenden, wenn Sie das Bild einem breiten Publikum zugänglich machen möchten.

Beim PNG-8-Format werden komplexere Komprimierungsschemata als bei GIF-Dateien verwendet. Die Dateien können daher je nach den Farbmustern des Bildes 10 % bis 30 % kleiner sein als GIF-Dateien desselben Bildes. Obwohl PNG-8 eine Methode zur Lossless-Komprimierung, also verlustfrei ist, kann die Optimierung eines 8-Bit-Originalbilds als 24-Bit-PNG-Datei zum Verlust von Farbinformationen führen.

Hinweis:

Vor allem bei Bildern mit wenigen Farben und einfachen Mustern kann durch GIF-Komprimierung eine kleinere Datei erstellt werden als durch PNG-8-Komprimierung. Zeigen Sie optimierte Bilder im GIF- und PNG-8-Format an, um die Dateigröße zu vergleichen.

Wie beim GIF-Format können Sie die Zahl der Farben im Bild wählen und das Dithering der Farben im Browser steuern. Das PNG-8-Format unterstützt Hintergrundtransparenz und Hintergrundfarbe, wobei Sie die Bildkanten an die Hintergrundfarbe einer Webseite angleichen.

PNG-8 mit 256 Farben und ohne Dithering (links) und PNG-8 mit 16 Farben und mit Dithering (rechts)

Optimieren von Bildern im GIF- oder PNG-8-Format

GIF ist das Standardformat für das Komprimieren von Bildern mit großen Farbflächen und scharfen Details in Strichgrafiken, Logos oder Text. Wie das GIF-Format unterstützt auch PNG-8 Transparenz und komprimiert Farbflächen, wobei Details erhalten bleiben. Nicht alle Webbrowser können jedoch PNG-8-Dateien anzeigen.

  1. Öffnen Sie ein Bild und wählen Sie „Datei“ > „Für Web speichern“.
  2. Wählen Sie „GIF“ oder „PNG-8“ als Optimierungsformat.
  3. Aktivieren Sie die Option „Interlaced“, um ein Bild während des Ladens im Browser in niedriger Auflösung anzuzeigen. Bei dieser Methode erscheint die Ladezeit kürzer und die Besucher Ihrer Website sehen, dass tatsächlich ein Ladevorgang stattfindet.
  4. Wählen Sie unter dem Menü für das Optimierungsformat einen Farbreduzierungsalgorithmus zum Erstellen der Farbtabelle:

    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 durch Aufnehmen von Farben aus dem Spektrum, das im Bild am häufigsten vorkommt. Für ein Bild, das z. B. nur Grün- und Blauschattierungen enthält, wird eine Tabelle 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 websicheren Farben, die für die 8-Bit-Paletten (256 Farben) von Windows und Mac OS gültig ist. Durch diese Option wird sichergestellt, dass beim Anzeigen des Bildes mit 8-Bit-Farbe kein Browser-Dithering auf Farben angewendet wird. Enthält Ihr Bild weniger als 216 Farben, werden nicht verwendete Farben aus der Tabelle entfernt.

  5. Wählen Sie zum Einstellen der maximalen Anzahl von Farben eine Zahl aus dem Menü „Farben“ des Farbbedienfelds, geben Sie einen Wert in das Textfeld ein oder ändern Sie die Zahl der Farben mit den Pfeilen. Enthält das Bild weniger Farben als das Bedienfeld, so spiegelt die Farbtabelle nur die kleinere Anzahl der Farben im Bild wider.
  6. Wenn Sie als Farbreduzierungsalgorithmus „Restriktiv (Web)“ einstellen, können Sie aus dem Menü „Farben“ die Option „Auto“ wählen. Wählen Sie „Auto“, wenn die optimale Anzahl der Farben in der Farbtabelle von Photoshop Elements auf der Grundlage der Farbhäufigkeit im Bild bestimmt werden soll.
  7. Wählen Sie einen Dither-Prozentwert, indem Sie einen Wert im Textfeld „Dither“ eingeben oder indem Sie auf den Pfeil an dem Feld klicken und den daraufhin eingeblendeten Regler ziehen.
  8. Wenn das Bild Transparenz enthält, aktivieren Sie „Transparenz“, um transparente Pixel zu erhalten. Deaktivieren Sie die Option, wenn vollständig und teilweise transparente Pixel mit der Hintergrundfarbe gefüllt werden sollen.
  9. Wenn Sie eine animierte GIF-Datei erstellen möchten, aktivieren Sie „Animieren“.
  10. Wenn Sie das optimierte Bild speichern möchten, klicken Sie auf „OK“. Geben Sie im Dialogfeld „Optimierte Version speichern unter“ einen Dateinamen ein und klicken Sie auf „Speichern“.

Erstellen einer animierten GIF-Datei

  1. Platzieren Sie die Bilder, die in den Frames der Animation angezeigt werden sollen, auf separaten Ebenen des Ebenenbedienfelds. Wenn Sie z. B. die Animation eines zwinkernden Auges erstellen möchten, legen Sie ein Bild des geöffneten Auges auf einer Ebene ab, ein Bild des geschlossenen Auges auf einer anderen.
  2. Wählen Sie „Datei“ > „Für Web speichern“.
    Hinweis:

    Befinden sich mehrere Ebenen im Bild, können Sie das Dialogfeld „Für Web speichern“ auch über das Dialogfeld „Speichern unter“ öffnen. Wählen Sie dazu das Format „CompuServe GIF“ und aktivieren Sie „Ebenen als Frames“.

  3. Optimieren Sie das Bild im GIF-Format.
  4. Aktivieren Sie „Animieren“.
  5. Legen Sie im Abschnitt „Animation“ des Dialogfelds weitere Optionen fest:

    Wiederholungsoptionen

    Wiederholen Sie die Animation in einer Schleife in einem Webbrowser oder animieren Sie nur einmal. Sie können auch „Andere“ wählen, um die Anzahl der Schleifen für die Animation festzulegen.

    Frameverzögerung

    Legt die Zahl der Sekunden fest, für die jeder Frame im Webbrowser angezeigt wird. Sekundenbruchteile können Sie durch Dezimalwerte angeben, z. B. 0,5 für eine halbe Sekunde.

Mehr

Adobe-Logo

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie