Bilder mit Photoshop fürs Web aufbereiten – Dateiformate, Teil 2

Thomas Giannatosio (Übersetzung Manuela Müller)

Für all jene Webworker, die Online-Shops, Blogs oder Informationsseiten pflegen oder betreiben ohne eine Ausbildung beziehungsweise Fachwissen in Webdesign und Bildbearbeitung zu haben, stellt sich immer wieder die Frage, welches Dateiformat Fotos im Web idealerweise haben sollten. Wenn Sie Ihre eher rudimentären Kenntnisse gerne verfeinern möchten, ist dieser Teil der Artikelserie über den Export von Fotos fürs Web ideal für Sie.

JPEG

Das Kompressionsverfahren der Joint Photographic Experts Group (JPEG) unterscheidet sich drastisch von GIF oder PNG wie im vorigen Teil dieser Artikelserie beschrieben. Der Hauptunterschied besteht darin, dass JPEG ein verlustbehaftetes Dateiformat ist. Im Klartext: Es komprimiert Bilder, indem es die Qualität reduziert. Solange das Verfahren vorsichtig angewandt wird, ist der Qualitätsverlust für das menschliche Auge nicht sichtbar. Trotzdem ist JPEG ideal für Fotografien und andere komplexe Bildkompositionen. JPEG sind auch dazu in der Lage, Metadaten einzubetten, was für Copyright-Vermerke und andere Informationen zum Bild nützlich ist.


JPEG-Kompression kann unerwünschte Artefakte schaffen. Sehr starke Kompression kann zu Schachbrett-artigen Feldern führen wie im unteren Bild.

Qualität

Die Qualitäts-Einstellung ist das vorrangige Mittel zum Einstellen der Kompression einer JPEG-Datei. Je niedriger der Wert, desto stärker wird die Datei komprimiert und desto schlechter sieht  Ihr Bild aus. Leider gibt es hier keinen Idealwert. Sie müssen das für jedes Bild individuell und nach eigenem Empfinden entscheiden, wie stark Sie komprimieren können, ohne das Bild zu ruinieren.


Über die Qualitätsoption regulieren Sie die ideale Balance zwischen Komprimierungsgrad und Bildqualität.

Progressiv

JPEGs mit der Option Progressiv werden nach und nach herunter geladen, ähnlich GIFs mit der Option Interlaced. Anwender mit einer langsamen Internetverbindung können die Bilder schneller sehen, anfangs jedoch in einer geringeren Qualität. Die Qualität wird dann progressiv aufgebaut. In die Datei müssen dafür mehr Daten eingebunden werden, was die Dateigröße erhöht. In Anbetracht der heute überwiegend vorhandenen Breitbandverbindungen ist diese Option eher unnötig.

Optimiert

Wenn Sie diese Option aktivieren, durchläuft die Datei eine zusätzliche Komprimierungsroutine (Huffman Coding), um die Dateigröße weiter zu reduzieren. Es wird empfohlen, diese Einstellung zu aktivieren, weil sie die Dateigröße sehr effektiv verringert, ohne die Qualität zu beeinträchtigen.

Farbprofil einbetten

JPEGs können ICC-Farbprofile aufnehmen. Diese Daten lesen Browser aus und wissen so, wie sie die Bilddaten darstellen sollen. Bedauerlicherweise ignoriert die Mehrheit der Browser eingebettete Farbprofile. Standardmäßig ist die Option deaktiviert, dass sollten Sie derzeit auch so lassen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Weichzeichnen

Bedingt durch die Arbeitsweise der JPEG-Kompression, lassen sich verschwommene Bildbereiche stärker komprimieren als solche mit stark kontrastierenden Farbkombinationen. Aus diesem Grund können Sie mit Photoshop Bilder vor dem Exportieren weichzeichnen. Verschwommene Fotos sind natürlich selten erwünscht, doch es gibt auch bestimmte Anwendungsfälle, wo ein sehr dezentes Weichzeichnen die Dateigröße gerade ausreichend reduziert, ohne jedoch die Bildschärfe erkennbar zu beeinträchtigen.

Hintergrund

Da JPEG Transparenz nicht unterstützt, werden jegliche transparente Bildbereich gefüllt und zwar mit der Farbe, die über die Option Hintergrund voreingestellt ist.


Über das Auswahlmenü “Hintergrund” können Sie eine beliebige Farbe zum Füllen der transparenten Bereiche wählen.

PNG-8 und PNG-24

Das Format Portable Network Graphics (PNG) gibt es in zwei verschiedenen Varianten:

  • PNG 8 – vergleichbar mit GIF
  • PNG 24, das die höchste Qualität bietet
PNG 8 unterstützt 1-Bit-Transparenz und begrenzt die Farbpalette auf 256 Werte – 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 nicht unterstützt.

PNG 24 ist verlustfrei, aber speicherplatzintensiv

Die zweite Variante ist PNG 24. Dieses Format bietet die höchste Qualität von allen der bisher genannten Dateiformate. PNG 24 ist komplett verlustfrei – das Bild selbst wird durch die Kompression in seiner Qualität nicht beeinträchtigt. Zudem unterstützt PNG 24 8-Bit-Transparenz. Grundsätzlich kann man sagen, dass das, was Sie in der PSD-Datei sehen, das ist, was anschließend beim PNG-24 hinten raus kommt. Der Nachteil liegt hier in der Dateigröße: Weil das Format vier verlustfreie 8-bit-Kanäle enthält, können PNG-24-Dateien enorm groß sein. Nutzen Sie dieses Format nur dann, wenn es wirklich erforderlich ist.
Die Einstellungen sind recht einfach. Sie können Transparenz per Optionsschaltfläche auswählen und Interlacing einstellen – genau wie bei einem GIF. Sie können auch eine Matte-Farbe zufügen, aber nur dann, wenn Sie die Option Transparenz deaktiviert haben.

WBMP

Wireless Bitmap Files (WBMP) wurden für den Einsatz auf Drahtlosgeräten mit monochromen Displays. Sie bestehen nur aus weißen und schwarzen Pixeln. Photoshop erlaubt es Ihnen, den Dithering-Algorithmus zu steuern und den Grad des Ditherings. Die Chancen stehen gut, dass Sie dieses Format niemals benötigen.

Andere Einstellungen

In sRGB konvertieren

Sollten Sie Ihre Arbeitsumgebung auf irgend etwas anderes eingestellt haben als sRGB, können Sie diese Option aktivieren, damit Photoshop die Bilddatei vor dem Export in diesen Modus umrechnet. Sofern Sie beim grundsätzlichen Farbmanagement mit Photoshop bestimmte Einstellungen beachten, sollten Sie diese Option sollten Sie deaktiviert lassen.

Vorschau

Das Auswahlmenü Vorschau bestimmt, wie das Bild in den Optimierungs-Feldern geproofed wird. Wenn Ihr Monitor gut kalibriert und Ihre Arbeitsumgebung richtig eingestellt ist, können Sie über den Eintrag Monitorfarbe sehen, wie die Datei in einem Browser angezeigt wird. Sie können das Bild auch dahingehend proofen, um zu sehen, wie es jeweils auf einem Mac- oder einem Windows-Rechner dargestellt wird. Sie können den Proof auch abstellen, indem Sie die Einstellung Dokumentprofil verwenden auswählen.


Das Auswahlmenü “Vorschau

Metadaten

Wenn Sie mit Ihrer Datei bestimmte Informationen – wie zum Beispiel Kontakt- und Kameradaten oder Urheberrechtsvermerke – weiter geben möchten, können Sie dies über das Auswahlmenü Metadaten erledigen. Es stehen verschiedene Optionen zur Auswahl, wie Sie an der folgenden Abbildung sehen können.


Optionen des Auswahlmenüs “Metadaten”

Diese Funktion kann natürlich nur dann Kontaktdaten und Copyright-Hinweise in die Datei eintragen, wenn Sie diese zuvor über den Befehl Datei / Dateinformationen festgelegt haben. Kameradaten werden automatisch ermittelt. Metadaten können Sie nur bei JPEGs hinzufügen.

Farbtabelle

Bei der Arbeit mit einem indexierten Dateiformat (GIF oder PNG-8) ist es interessant zu wissen, welche Farben in die Datei eingebettet werden. Die Farbtabelle stellt Ihnen diese Informationen über Farbmuster zur Verfügung. Jedes Muster stellt eine in der Datei vorhandene Farbe dar. Sie können dieser Tabelle Farben zufügen oder vorhandene Farben entfernen beziehungsweise verändern. Dafür stehen Ihnen im Auswahlmenü (siehe rote Umrandung der folgendne Abbildung) zahlreiche Optionen zur Verfügung.


Die Farbtabelle können Sie vielfältig bearbeiten.

Transparenz: Einzelnen Farben können Sie Transparenz zuordnen. Sie haben die Wahl zwischen voll transparent oder voll deckend.

Ausgewählte Farben zur Webpalette verschieben/Verschiebung aufheben: Mit dieser Option näheren Sie eine ausgewählte Farbe dem nächsten websicheren Farbwert an. Dazu wählen Sie eine Farbe aus und klicken dann auf den kleinen Würfel (drittes Icon von links in der oberen Abbildung) oder Sie wählen den Befehl aus dem rot umrandeten Auswahlmenü.


Die Optionen des Farbtabellen-Auswahlmenüs.

Farbe fixieren: Mit dem kleinen Schloss-Icon oder über das Auswahlmenü können Sie ausgewählte Farben fixieren. Damit stellen Sie sicher, dass die Farbe auch dann nicht entfernt wird, wenn eine andere Option aktiviert ist, die dies bewirken würde.

Farbfeld zufügen: Falls Ihr Dokument weniger als 256 Farben aufweist, wie im obigen Beispiel, können Sie Ihrer Farbtafel weitere Farben hinzufügen. Wenn Sie auf das Symbol links vom Mülleimer klicken, wird nicht einfach ein neues Farbfeld zugefügt. Stattdessen wird ein anderes Farbfeld, das der Pipettenfarbe am nächsten kommt diagonal geteilt. Im oberen linken Teil wird die bestehende Farbe angezeigt; im unteren rechten Teil erscheint die neue konvertierte Farbe.

Farbe löschen: Um eine Farbe aus der Tabelle zu löschen, wählen Sie das gewünschte Feld aus und klicken dann entweder auf das Tonnen-Symbol oder Sie wählen den Befehl Farbe löschen aus dem Auswahlmenü.

Bildgröße

Wenn Sie ein Bild vor dem Exportieren vergrößern oder verkleinern möchten, können Sie dies über die Bildgröße-Einstellungen erledigen. Verändern Sie die Größe über vorgegebene Werte oder eine Prozentzahl und steuern Sie den Interpolations-Algorithmus über das Auswahlmenü Qualität. Ich empfehle Ihnen jedoch, Änderungen der Bildgröße nicht im Dialog Für Web und Geräte speichern vorzunehmen.

Animation

Über die lediglich vom GIF-Format unterstützten Einstellungen für Animation können Sie die Werte für die Loops einstellen und eine Vorschau der Animation anzeigen.

Im nächsten Teil der Serie lesen Sie:
  • Erstellen und Bearbeiten von Slices

Hinterlasse einen Kommentar

2 Kommentare auf "Bilder mit Photoshop fürs Web aufbereiten – Dateiformate, Teil 2"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Peter
Gast

hallo, vielen Dank, dies ist eine Bestätigung meiner vielen Tests
pgn, jpeg, was bin ich teilweise erschüttert über schlechte
Fotos oder schlimm auch LOGO´s im Web, probieren denn diese
Leute nichts, teilweise bauen die für Kunden Webseiten
und die eigene sieht schlimm aus. . . ähnlich auch bei den Texten

lieben herzlichen Dank (meine Seite ist in der Testfase)

dino
Gast

danke! hab schon einige erfahrung in ps aber dies nie so schön erklärt in büchern gefunden!