Bilder mit Photoshop für den Export ins Web optimal aufbereiten (1)

Thomas Giannatasio (Übersetzung Manuela Müller)

Wenn Sie mit Photoshop alle Pixel auf Hochglanz poliert haben, sind Sie mit der Arbeit an Ihrem Design, Ihren Bildmontagen oder Fotoretuschen noch nicht fertig. Für die Darstellung in einem Browser müssen Sie die Dateien noch optimieren. Auch, wenn das relativ zügig geht, ist dieser Arbeitsschritt doch entscheidend – denn gerade bei speicherintersiven Dateien kommt es auf eine gute Balance zwischen Bildqualität und kurzer Downloadzeit an. Wie Sie das je nach Bildmaterial am besten erreichen, erläutert diese Artikelserie, die dem Smashing eBook #3 – Mastering Photoshop for Webdesign – entnommen ist.

Lesetipps

Die folgenden Beiträge könnten ebenfalls interessant für Sie sein:

Jedes Foto und jede Grafik, die Sie aus Photoshop für die anschließende Verwendung im Internet exportieren, sollte den Dialog Für Web und Geräte speichern passieren. Damit werden Ihre Bilder nicht nur in bestimmten Formaten gespeichert, dieser Dialog bietet Ihnen auch Kontrolle über Qualität, Tansparenz und Farben. Das wird zunehmend wichtiger, da mehr und mehr Menschen mit mobilen Geräten im Internet surfen. Kleine Dateigrößen sind für ein gutes Anwendererlebnis dieser Benutzergruppe entscheidend.

Beginnen wir mit der Oberfläche des Dialogs Für Web und Geräte speichern. Sie rufen ihn über das Menü Datei oder durch Drücken der Tasten Strg / Befehl + Alt / Auswahl + Shift + S auf. Das Erste, was Ihnen vermutlich ins Auge fällt, ist das große Vorschaufenster für die optimierte Version. Es gibt vier Ansichten, zwischen denen Sie über die Registerkarten oben links wechseln können:

  • Original
  • Optimiert
  • 2-fach
  • 4-fach

Die Ansicht Original zeigt die Datei genau so wie außerhalb des Dialogs. Optimiert zeigt die Datei, wie sie nach dem Anwenden der aktuellen Optimierungseinstellungen aussehen würde. 2fach und 4fach fügen in den Dialog zwei beziehungsweise vier Vorschaufenster ein, damit Sie die Auswirkung der verschiedenen Einstellungen mit direkt vergleichen können. In der Ansicht 4fach können Sie drei verschiedene Versionen und das Original gleichzeitig anzeigen. Mit einem Klick ins Vorschaufenster aktivieren Sie die jeweiligen Einstellungen. Diese können Sie unabhängig von den anderen Vorschaufenstern ändern, was beim Testen verschiedener Komprimierungsarten sehr nützlich sein kann.


In der 4fach-Ansicht können Sie drei verschiedene Optimierungsversionen mit dem Originalbild vergleichen.

Unter den Vorschaubildern wird eine kurze Zusammenfassung angezeigt: der gewählte Dateityp, die Dateigröße und die geschätzte Ladezeit. Bedenken Sie, dass Sie diesen Dialog zwar aufgerufen haben, um eine möglichst kleine Dateigröße einzustellen. Das sollte jedoch nicht zu Lasten der Bildqualität gehen. Schenken Sie dieser Zusammenfassung also Ihre Aufmerksamkeit. Wenn Sie wollen, können Sie die geschätzten Ladezeiten verändern, um die Geschwindigkeit des Downloads besser abschätzen zu können, indem Sie die in der folgenden Abbildung rot markierte Schaltfläche Downloadgeschwindigkeit auswählen anklicken.

Rechts von den Vorschaubildern sind die Dateieinstellungen. Hier nehmen Sie alle Änderungen vor. Die Optionen unterscheiden sich je nach dem gewählten Dateiformat erheblich voneinander. Sie haben die Auswahl zwischen fünf verschiedenen Formaten: GIF, JPEG, PNG-8, PNG-24 und WBMP.

Dateiformat-spezifische Optionen

GIF

Das Graphic Interchange Format (GIF) eignet sich sehr gut zum Speichern von Logos, Text und anderen grafischen Bildern. Das Format nutzt eine verlustfreie Komprimierung, das heißt die höchste Qualität bleibt bei diesem Prozess erhalten. Allerdings erlaubt das GIF-Format nur 256 Farben. Das heißt nicht, dass Sie lediglich aus einem festgelegten Set aus 256 Farben auswählen können. Es ist eher so, dass eine Datei im GIF-Format lediglich bis zu 256 Farbtöne speichern kann, in der jedes Pixel farbig ist. Daher ist das Format für Fotos eher ungeeignet, aber perfekt für Bilder mit großen einheitlichen Flächen mit Volltonfarbe.


Das GIF-Format komprimiert Bilder, indem es große Bereiche ähnlicher Farbtöne untersucht. Damit eignet sich das Format sehr gut für Logos.

Farbreduktion
Wenn Sie aus der Auswahlliste Optimierungsformat das Format GIF wählen, sehen Sie diverse Optionen, um zu steuern, wie das GIF komprimiert wird. Die erste Option ist der Farbreduktionsalgorithmus. Da das GIF-Format lediglich 256 Farben speichern kann, schickt Photoshop das Bild durch einen Algorithmus, um zu entscheiden, welche Pixel erhalten bleiben und welche nicht. Dafür gibt es wiederum verschiedene Optionen.


Die Optionen der Auswahlliste Farbreduktionsalgorithmus

Manche Optionen, wie Schwarzweiß oder Graustufen, sind selbsterklärend. Manche sind im Prinzip nutzlos – zum Beispiel Mac OS und Windows, die versuchen, die für das jeweilige Betriebssystem typische Farbskala zu simulieren. Schließlich gibt es die Option Benutzerdefiniert, die es Ihnen erlaubt, die komplette Farbpalette selbst einzustellen. Dies kann ziemlich mühsam sein, daher sind Sie besser mit einer der folgenden Methoden bedient:

  • Perzeptiv: bevorzugt Farben, an deren Wahrnehmung das menschliche Auge am meisten angepasst ist. Der Algorithmus ist jedoch weniger genau in der Wiedergabe exakter Farbwerte.
  • Selektiv: bestimmt, welche Farbtöne am meisten und in größter Konzentration verwendet wurden. Diese Option gewährleistet, dass die ermittelteten Werte erhalten bleiben. Für die meisten Bilder ist „Selektiv“ die beste Option.
  • Adaptiv: Funktioniert ähnlich wie „Selektiv“; allerdings bevorzugt dieser Algorithmus Farbtöne, die im gesamten Dokument verwendet werden – anstatt nebeneinander liegender Farbtöne.
  • Restriktiv: Limitiert die Farbpalette auf die inzwischen überkommene Palette der so genannten 216 websicheren Farben. Anhand dieser Palette wurde in den frühen Tagen des Internets Farben festgelegt, die von der Mehrheit der verfügbaren Monitore gerendert werden konnten. Heute dürfte es schwierig sein, jemanden zu finden, der einen Monitor mit einer solch begrenzten Farbpalette verwendet – sprich, die Option „Restriktiv“ ist quasi nutzlos.

Farben
Ein GIF kann 256 Farben in seiner Farbtabelle speichern. Es kann jedoch manuell auf einen geringeren Wert eingestellt werden. Die Anzahl der Farben zu senken, kann dazu beitragen, die Dateigröße zu reduzieren. In einigen Fällen ist dies sogar ohne Qualitätsverlust möglich.

Das Reduzieren der Farben in der Farbtabelle kann in manchen Fällen die Dateigröße reduzieren, ohne allzu großes Dithering.

Dithering
Farbverläufe mit einer solch reduzierten Farbpalette zu reproduzieren, kann mitunter eine echte Herausforderung sein. Selbst ein einfacher Verlauf kann hunderte von Schattierungen enthalten, so dass die Farbtabelle schnell an ihre Grenzen stößt. Einfach ein paar der Farben rauszuschmeißen, kann zu unerwünschten Effekten führen. Um das zu verhindern, bietet Ihnen Photoshop den Dithering-Algorithmus, der Pixel mit verschiedenen Farben strategisch über den Farbverlauf verteilt. Dieses Verfahren ähnelt dem Pointilismus in der Malerei, denn es vertraut darauf, dass Ihr Auge die Farben zu einem nahtlosen Verlauf mixt.


Weil GIF-Dateien nur 256 Farben speichern können, müssen weitere Farben durch Dithering kompensiert werden.

Fürs Dithering gibt es vier Optionen:

  • Ohne Dither entfernt Dithering komplett, was zu Farbstreifen führen kann.
  • Diffusion wendet ein diffuses Muster an, mit dem Pixel anhand ihrer Konzentration ausgeschlossen werden.
  • Muster schließt Pixel etwas gleichmäßiger aus, um ein Halbton-Muster zu simulieren – was eher stilistisch als realistisch wirkt.
  • Die Option Rauschen arbeitet ähnlich wie Diffusion, aber die Platzierung der Pixel ist zufälliger, was zu gitterartigen Verläufen führt. Dank Photoshop können Sie dieses Ditherung noch etwas verfeinern, in dem Sie die Stärke vorgeben.
Die Dithering-Optionen: 1) Diffusion, 2) Muster, 3) Rauschen, 4) Ohne

Transparenz und Hintergrund-Matte
Das GIF-Format erlaubt 1-Bit-Transparenz – sprich, ein Pixel kann entweder völlig transparent oder vollkommen opak sein. Dies kann zu hässlichen, scharfen Kanten und merkwürdig gefärbten Farbverläufen führen. Sie können den Transparenz-Dither-Algorithmus verändern, um die Farbverläufe etwas fließender erscheinen zu lassen – allerdings sehen sie anschließend häufig etwas gitterhaft aus.

Am besten erzielen Sie eine gleichmäßige Transparenz bei einem GIF, indem Sie die Hintergrund-Matte an die Hintergrundfarbe des Zielbereich beziehungsweise des Containers anpassen, in den die Grafik später eingebunden wird. Über das Ausklappmenü Hintergrund können Sie eine Matte-Farbe auswählen, mit der transparente Pixel ausgefüllt oder überblendet werden.


Über das rot umrandete Auswahlmenü Hintergrund können Sie eine Matte-Farbe wählen.

Beispiel: Wenn ein Pixel eine Deckkraft von 30 Prozent hat, füllt Photoshop die übrigen 70 Prozent mit der Matte-Farbe, so dass eine überblendete Farbe mit 100 Prozent Deckkraft entsteht. Diese Technik funktioniert ganz hervorragend, wenn das Bild an seiner späteren Position über einer Volltonfarbe liegt. Wenn es über einer Struktur oder einem Verlauf platziert wird, entstehen Säume, wie die folgende Abbildung zeigt.

Es sind folgende Kombinationen zu sehen:

  1. Ohne Hintergrund-Matte auf Volltonfarbe
  2. Hintergrund-Matte auf Volltonfarbe
  3. Ohne Hintergrund-Matte auf Farbverlauf
  4. Hintergrund-Matte auf Farbverlauf
Interlaced
Die Methode Interlaced ist ein inzwischen überholtes Verfahren, mit dem  Anwender mit langsamen Internetverbindungen Dateien abschnittsweise im Browser laden können. Da die Mehrheit der Internetnutzer heute mit Breitbandverbindungen im Netz unterwegs ist, wird diese Methode kaum noch gebraucht. Zudem treibt Interlaced die Dateigröße in die Höhe. Deshalb sollten Sie die Methode nur dann, wenn unbedingt nötig anwenden.
Web-Ausrichtung
Dies ist eine weitere veraltete Option, die ursprünglich dazu eingesetzt wurde, um Farben an der Palette der 216 websicheren Farben auszurichten. Heutzutage können Sie es bei der Standardeinstellung „0%“ belassen.
Lossy
Die Einstellung Lossy opfert zugunsten der Dateigröße Bildqualität. Im Idealfall sollten Sie an der Voreinstellung „0“ niemals etwas ändern. Es sei denn, Sie benötigen eine minimale Dateigröße und können auf etwas Bildschärfe verzichten.
Im nächsten Teil lesen Sie:
  • JPEG – Eigenschaften und Optimierungsmethoden
  • PNG-8 und PNG-24
  • WBMP
  • Sonstige Einstellungen (sRGB, Vorschau, Metadaten)
  • Arbeit mit Farbtabellen
  • Bildgröße
  • Animation

(tm)

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] es gleicht wie gesagt dem GIF-Format, so dass Sie weitere Einzelheiten zu Vorzügen und Nachteilen dort nachsehen können. Der einzige wirkliche Unterschied zu GIF besteht darin, dass PNG-8 Animation […]

Mialia
Gast

Super, vielen Dank! Sehr hilfreich!

Max
Gast

Sehr hilfreich, vor allem wenn man sein Kompendium verlegt hat!!!

trackback

[…] für sich ist, möchte ich euch hier gerne einfach auf einen weiteren interessanten Beitrag von Dr.Web dazu […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen